レンダリングブロックリソースとは何ですか？レンダリングブロックの問題を修正する方法

公開: 2018-02-28

レンダリングをブロックするリソースは、Webサイトの読み込みが遅い最も一般的な理由の1つです。 また、Webサイトの速度が十分でない場合、訪問者のユーザーエクスペリエンスを損なうだけでなく、検索エンジンのランクも低下します。 悪いニュースは、あなたのウェブサイトが遅い場合、あなたは顧客と収入を失っているということです。

ただし、良いニュースもあります。レンダリングをブロックするリソースを排除することで、Webサイトの速度を向上させることができます。 この記事では、レンダリングブロックリソースが読み込み時間にどのように影響するかを説明し、それらを修正する方法を示します。

レンダリングブロックリソースとは何ですか？

最も一般的なレンダリングブロックリソースは、Webページの先頭にあるJavaScriptファイルとCSSファイルです。 それらは折り畳み領域（または下にスクロールして残りのコンテンツを表示する前にWebサイトで通常表示される領域）の上に読み込まれ、Webブラウザーで使用される重要なレンダリングパスの一部です。

素人の言葉で言えば、これは、ブラウザがWebページの初期ビューを適切に表示（レンダリング）するために、特定のイベントが発生する必要があることを意味します。 基本的なレンダリングパスがどのように機能するかの例を次に示します。

  • ブラウザは、Webページの構造を保持するHTMLファイルで構成されるWebページをダウンロードします。
  • 次に、ブラウザはHTMLを読み取り、cssファイル、javascriptファイル、および画像の3つの追加ファイルに気付きます。
  • ブラウザは最初に画像をダウンロードします
  • その後、ブラウザは、CSSとJavaScriptを取得せずにページを表示し続けることができないことに気付きます。
  • ブラウザはCSSファイルをダウンロードして読み取り、他に何も呼び出されていないことを確認します。
  • ブラウザはJavaScriptファイルをダウンロードして読み取り、他に何も呼び出されていないことを確認します
  • ブラウザは最終的にWebページを表示できます

ブラウザがCSSファイルとJavaScriptファイルのそれぞれの読み込みと読み取りでビジー状態になっている間、訪問者は空白の画面を見つめ、サイトが読み込まれるのを待っています。 WordPressのようなCMSを使用している場合、テーマのスタイルとスクリプトファイルだけでなく、WordPress自体に付属するスクリプトとスタイルファイルもロードする必要があるため、ブラウザはかなり長い間ビジー状態になる可能性があります。使用しているすべてのプラグインとウィジェットに付属しているもの。

Webサイトの速度を最適化する場合、リストの最初のタスクは、ユーザーがコンテンツを表示して操作できるようになるまでの時間を短縮することです。 これを行う最も簡単な方法は、重要なレンダリングパスを最適化することです。

レンダリングブロッキングの問題を修正する方法

レンダリングブロックの問題の原因と、それらがサイトの速度にどのように影響するかがわかったところで、これらの問題を修正する方法について説明しましょう。

レンダリングブロックCSS

レンダリングをブロックするCSSの問題を修正する方法は3つあります。

  • CSSファイルを適切に呼び出す–CSSファイルは次のようにHTMLファイルにリンクする必要があります： <link rel="style.css" href=“style.css"> @importメソッドの使用に依存するのではなく、@ @importメソッド通常、通常のスタイルシートの上部にあり、CSSファイルの残りの部分を読み取る前に、ブラウザが戻ってインポートされたファイルを見つけるため、Webページのレンダリングにさらに大きな遅延が発生します。
  • クリティカルパス内のCSSファイルの数を減らします–可能であれば、すべての異なるCSSファイルを1つに結合し、HTMLからそれらのファイルへの呼び出しを削除します

レンダリングブロックJavaScript

レンダリングをブロックするJavaScriptを削除するには、読み込まれるJavaScriptファイルの数と、HTML内のどこで呼び出されるかを知る必要があります。 これを見つける良い方法は、Google PageSpeedInsightsツールを使用することです。 オーストラリアを拠点とするクリーニング会社、This Is Neat Cleaningがウェブサイトを構築していたとき、彼らはGoogleのPageSpeed Insightsをベンチマークとして使用し、さまざまなシナリオをテストして、モバイルとデスクトップの両方に必要なものを正確に見つけました。

テストから明らかなように、スクリプトの大部分をHTMLファイルの下部に挿入すると、最良の結果が得られました。 主な理由は、スクリプトをページの下部に移動すると、レンダリングがブロックされ、javascriptがユーザーエクスペリエンスを停止するのを防ぐことができたためです。 重要なCSSがまだフォールドの上にロードされているため、ユーザーは基本的にサイトを使用できますが、インタラクションと機能はバックグラウンドでロードされたままです。

プラグインの使用

もちろん、WordPressに関連するものと同様に、プラグインを使用してレンダリングブロッキングの問題を修正できます。 合計100万を超えるアクティブなインストールがあるため、This is Neat Cleaningがキャッシュ、縮小、およびパフォーマンスの最適化にW3 TotalCacheを使用することは簡単でした。

W3 TotalCacheを使用してレンダリングブロッキングの問題を修正する方法は次のとおりです。

WordPressダッシュボードで、 [パフォーマンス]> [設定]に移動し、[縮小]セクションまでスクロールします。 [有効にする]チェックボックスをオンにして、縮小モードの横にあるドロップダウンメニューから[手動]を選択します。 設定を保存します。 次に、縮小するすべてのスクリプトとスタイルを追加する必要があります。

レンダリングをブロックしているスクリプトとスタイルシートがどこにあるかを確認するには、Google Page Speed Insightsツールにアクセスして、Webサイトを分析します。 次に、[提案]タブを見て、次のセクションを見つけます。フォールド上のコンテンツでレンダリングをブロックするJavaScriptとCSSを削除します。 [修正方法を表示]をクリックし、ファイルのURLを選択してコピーします。

WordPressダッシュボードに戻り、 [W3 Total Cache]> [Performance]> [Minify]に移動します。 [JavaScript]セクションまで下にスクロールし、[操作]で、 <head> ]セクションの[遅延を使用して埋め込みタイプ]が[非ブロック]に設定されていることを確認します。 次に、[スクリプトの追加]ボタンをクリックして、GooglePageSpeedツールからコピーしたURLを貼り付けます。

すべてのスクリプトファイルを追加したら、[ CSS ]セクションまで下にスクロールし、[スタイルシートの追加]をクリックして、Google PageSpeedInsightsからコピーしたスタイルシートファイルのURLを追加します。

完了したら、[設定を保存してキャッシュを削除]ボタンをクリックします。

最終的な考え

レンダリングをブロックするリソースは、Webサイトの速度に関して大混乱を引き起こす可能性があります。 幸い、これらの問題を修正する方法はいくつかあります。ここで提供されるヒントを使用して、Webサイトの速度を向上させ、訪問者が可能な限り最高のユーザーエクスペリエンスを利用できるようにします。