レンダリング ブロック リソースを排除する

Lighthouse レポートの [改善できる項目] セクションには、ページの First Paint をブロックしているすべての URL が表示されます。目標は、重要なリソースをインライン化し、重要でないリソースを遅延させ、未使用のものを削除することで、レンダリングをブロックする URL の影響を軽減することです。

Lighthouse の「レンダリングを妨げるリソースの除外」監査のスクリーンショット

どの URL がレンダリングをブロックするリソースとしてフラグ設定されますか？

Lighthouse は、スクリプトとスタイルシートの 2 種類のレンダリング ブロック URL を検出します。

次の条件を満たす <script> タグ:

  • ドキュメントの <head> にあります。
  • defer 属性が記述されていない。
  • async 属性が記述されていない。

次の条件を満たす <link rel="stylesheet"> タグ:

  • disabled 属性が記述されていない。この属性が存在する場合、ブラウザはスタイルシートをダウンロードしません。
  • ユーザーのデバイスに固有の media 属性がない。media="all" はレンダリング ブロックとみなされます。

重要なリソースを特定する方法

レンダリングをブロックするリソースの影響を軽減する最初の手順は、何が重要で何が重要でないかを特定することです。Chrome DevTools のカバレッジ タブを使用して、重要でない CSS と JS を特定します。ページを読み込むか実行すると、タブに、使用されたコードの量と読み込まれたコードの量が表示されます。

Chrome DevTools: [Coverage] タブ
Chrome DevTools: [カバレッジ] タブ。

必要なコードとスタイルのみを配信することで、ページのサイズを縮小できます。URL をクリックして、[ソース] パネルでそのファイルを検査します。CSS ファイルのスタイルと JavaScript ファイルのコードは、次の 2 色でマークされます。

  • 緑（重要）: ファースト ペイントに必要なスタイル。ページのコア機能に不可欠なコード。
  • 赤（重要でない）: すぐに表示されないコンテンツに適用されるスタイル。ページのコア機能で使用されていないコード。

レンダリングを妨げるスクリプトを排除する方法

重要なコードを特定したら、そのコードをレンダリングをブロックする URL から HTML ページのインライン script タグに移動します。ページが読み込まれると、ページのコア機能を処理するために必要なものが揃います。

レンダリングをブロックする URL に重要でないコードが含まれている場合は、そのコードを URL に残し、async 属性または defer 属性で URL をマークできます（JavaScript を使用してインタラクティブ機能を追加するも参照）。

まったく使用されていないコードは削除する必要があります（使用されていないコードを削除するを参照）。

レンダリングをブロックするスタイルシートを削除する方法

<script> タグでコードをインライン化するのと同様に、最初のペイントに必要なクリティカル スタイルを HTML ページの head の <style> ブロック内にインライン化します。次に、preload リンクを使用して残りのスタイルを非同期で読み込みます（未使用の CSS を遅延するを参照）。

Critical ツールを使用して、ファーストビューの CSS を抽出してインライン化するプロセスを自動化することを検討してください。

レンダリングをブロックするスタイルを排除するもう 1 つの方法は、メディアクエリごとにスタイルを別のファイルに分割することです。次に、各スタイルシート リンクにメディア属性を追加します。ページを読み込む際、ブラウザは最初のペイントのみをブロックして、ユーザーのデバイスに一致するスタイルシートを取得します（レンダリング ブロック CSS を参照）。

最後に、CSS を縮小して、余分な空白や文字を削除します（CSS を縮小するを参照）。これにより、ユーザーに送信するバンドルを可能な限り小さくすることができます。

スタック固有のガイダンス

AMP

AMP Optimizer などのツールを使用して、AMP レイアウトをサーバーサイドでレンダリングします。

Drupal

モジュールを使用して重要な CSS と JavaScript をインライン化し、重要でない CSS または JavaScript に defer 属性を使用することを検討してください。

Joomla

重要なアセットをインラインで読み込むまたは重要度が低いリソースの読み込みを遅らせるために役立つ、さまざまな Joomla プラグインがあります。

WordPress

重要なアセットをインラインで読み込むまたは重要度が低いリソースの読み込みを遅らせるために役立つ、さまざまな WordPress プラグインがあります。

リソース