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

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

Lighthouse のスクリーンショット - 「レンダリング ブロック リソースの排除」の監査

どの URL にレンダリング ブロック リソースのフラグが付けられますか？

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

次の <script> タグ:

  • ドキュメントの <head> にある。
  • defer 属性はありません。
  • async 属性を持たない。

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

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

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

レンダリングをブロックするリソースの影響を軽減するための最初のステップは、クリティカルなものとそうでないものを特定することです。Chrome DevTools の [Coverage] タブを使用して、クリティカルでない CSS と JS を特定します。ページを読み込みまたは実行すると、このタブに、読み込まれたコードと使用されたコードの量が表示されます。

Chrome DevTools: [Coverage] タブ
Chrome DevTools: [Coverage] タブ。

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

  • 緑（クリティカル）: 初回ペイントに必要なスタイル、ページのコア機能に不可欠なコード。
  • 赤（重要ではない）: コンテンツに適用されるスタイル。すぐには表示されません。コードはページのコア機能では使用されません。

レンダリングをブロックするスクリプトを排除する方法

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

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

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

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

<script> タグにコードをインライン化する方法と同様に、HTML ページの head にある <style> ブロック内に、初回ペイントに必要なクリティカル スタイルをインライン化します。次に、preload リンクを使用して、残りのスタイルを非同期で読み込みます（未使用の CSS を先送りするをご覧ください）。

クリティカル ツールを使用して、「スクロールせずに見える範囲」の CSS を抽出してインライン化するプロセスを自動化することを検討してください。

レンダリングをブロックするスタイルを排除するもう 1 つの方法は、スタイルをメディアクエリごとに整理された複数のファイルに分割することです。次に、各スタイルシート リンクにメディア属性を追加します。ページの読み込み時に、ブラウザは初回ペイントのみをブロックして、ユーザの端末に対応するスタイルシートを取得します（レンダリングをブロックする CSS をご覧ください）。

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

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

AMP

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

Drupal

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

Joomla

重要なアセットをインライン化することや、重要性の低いリソースを先送りするために役立つ Joomla プラグインは数多くあります。

WordPress

重要なアセットをインライン化することや、重要性の低いリソースを遅らせるために役立つ WordPress プラグインがたくさんあります。

リソース