このページで: [隠れる]
Googleの重要なランキング要素は読み込み速度です. GooglePageSpeedInsightsで確認した場合, レンダリングをブロックするリソースを排除する必要があることをご存知かもしれません. 今日の記事で, Howtohosting.guideの私たちは、レンダリングをブロックするリソースを排除し、Webサイトを高速化する方法を紹介します.
レンダリングをブロックするリソースを排除する – 意味
レンダリングブロックリソースとは? それらはあなたの読み込み速度を遅くしているコードです.
単に, これらのタイプのリソースは、サイトの健全性、特にその速度には適していません。. あなたが彼らの名前から判断できるように, 彼らはあなたのサイトの読み込みのレンダリングを停止します.
訪問者がページにアクセスしようとすると、WebブラウザはサイトのHTMLコードを上から下に読み始めます。. そしてここに問題があります: ブラウザがレンダリング中にそれらを検出した場合, ブラウザが指定されたファイルをダウンロードするまで、プロセス全体を停止する必要があります. これにより、HTMLの読み込みが遅くなります. 言い換えると, ブラウザは、表示されているサイトコードではなく、不要なリソースを読み込んでいます.
このタイプのすべてのリソースがレンダリングをブロックしているわけではないことに注意してください.
レンダリングをブロックするリソースについてWebサイトをテストする方法
レンダリングをブロックするリソースがあるかどうかをテストするには、次のURLにアクセスしてください。 Google PageSpeed Insights コピーします URL. 結果が表示されたら、 機会 セクション, それらを削除する必要がある場合はリストされます.
レンダリングをブロックするリソースを排除する方法?
レンダリングをブログに載せるリソースを排除する2つの異なる方法があります. 最初のオプションは手動で行うことです, これはより複雑なものです, 開発者が行う方が良いです. 2番目のオプションはプラグインを使用することです.
レンダリングをブロックするJavaScriptを排除する
このプロセスを最適化し、不要なJavascriptファイルを排除するには、いくつかの方法があります。.
非同期メソッドを使用する
非同期 ブラウザまたはパーサーがスクリプトをダウンロードしている間にHTMLがWebサイトをロードできるようにします. プロセス中、一時停止はほとんどなく、これによりロード時間が確実にスピードアップします.
Deferメソッドを使用する
The 延期方法 Asyncメソッドとほぼ同じことを行いますが、一時停止はありません. ロードプロセスが完了した後、スクリプトを除外します.
Javascriptを縮小して圧縮する
Javascriptコードを縮小すると、サイトの読み込み速度が向上し、ブラウザがスクリプトをダウンロードしやすくなります。. JavaScriptコードを縮小する最良の方法は、ツールまたはプラグインを使用することです。.
レンダリングブロックコードを排除する
デフォルトでは, CSSはレンダリングをブロックするリソースと見なされますが、見栄えを良くするコードであるため、サイトから削除する方法はありません。, それがないと、私たちのサイトはまったく機能しません.
あなたができることがいくつかあります.
– インラインコードの使用
– スクリプトを組み合わせる
– リソースを縮小する
– より少ないコードを使用してみてください
– 未使用のコードを延期する
インラインCSSの使用方法
ページの読み込みが遅いのは、Webサイトにある複雑なセクションの数によって異なります。. それを最適化する最良の方法は、HTMLで直接書くことです. この上, カスケードスタイルシートは、特定のページが開かれたときにのみ読み込まれます. これはインラインコードと呼ばれます. 関連するセクションをコピーしてHTMLに貼り付けることができます, その後、通話を削除します.
CSSファイルを組み合わせる方法
読み込みが遅い問題のもう1つの修正は、読み込みが遅いアクションの組み合わせです。. それらを1つに組み合わせることができます, この上, ブラウザは、一度に複数のものではなく、1つずつロードします. この動きは間違いなく速度を最適化することができます. これをする, サポートリソースを開き、コードをコピーします, 次に、メインドキュメントに貼り付けます. 初期ファイルの呼び出しを削除することを忘れないでください.
CSSファイルを縮小する方法
JSファイルと同様, CSSの場合, それらを圧縮または縮小するための最良の方法は、CSSファイルを圧縮および縮小するために設計されたツールを使用することです。.
より少ないCSSを使用してみてください
私たちが言ったように, このタイプのより少ない要素を使用する, 読み込みが速くなります, しかし、不要なコードの量を減らす方法, 影響を与えることなく.
問題を解決できる1つの決定は、あまり多くのプラグインを使用しないことです。. プラグインは追加のコードを使用します, カスタマイズを容易にする, 不要なファイルをサイトにロードします.
あなたのウェブサイトの健康のためにあまりにも多くのプラグインを避けてください
あなたのページを不必要なコードで満たすもう一つのことは多目的テーマです. それらは、迅速な設計変更を行うために作成されます, 読み込みが必要です.
未使用のCSSを延期する
延期方法を使用する. これにより、レンダリングが最適化され、ブラウザがWebサイトをロードしている間一時停止することはありません。.
画像を最適化する
画像はレンダリングを停止するファイルではありませんが, それらが最適化されていない場合、それらはあなたのウェブサイトを遅くすることに貢献する可能性があります. あなたのウェブサイトの画像を最適化するために、あなたはいくつかのことをすることができます.
画像をアップロードする前にまず 固有名を付けてください, と 適切なタイプを選択してください PNGまたはJPEGを使用することをお勧めします。これらは、最小サイズで最高の品質を提供します。.
最適なIMGフォーマットを選択した後 画像を圧縮する . 最後にもう1つ、サイトマップを画像に追加して、Googleクローラーが画像を見つけやすくします。.