このページは Cloud Translation API によって翻訳されました。

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

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

レンダリングブロックリソースとしてフラグが立てられる URL はどれですか。

Lighthouse では、レンダリングをブロックする 2 種類の URL（スクリプトとスタイルシート）にフラグが設定されます。

<script> タグ:

ドキュメントの <head> 内にある。
defer 属性がない。
async 属性がない。

<link rel="stylesheet"> タグ:

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

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

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

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

緑（重大）: First Paint のために必要なスタイル。ページのコア機能に不可欠なコードです。
赤（重大ではない）: すぐには見えないコンテンツに適用されるスタイル。ページのコア機能でコードが使用されていない。

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

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

レンダリングブロック URL に重要でないコードがある場合は、それを URL に保持して、その URL に async 属性または defer 属性を指定します（JavaScript とのインタラクティビティの追加もご覧ください）。

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

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

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

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

レンダリングブロックスタイルをなくす別の方法として、スタイルを複数のファイルに分割し、メディアクエリごとに整理することもできます。次に、各スタイルシートのリンクに media 属性を追加します。ページの読み込み時、ブラウザはファーストペイントのみをブロックして、ユーザーのデバイスに一致するスタイルシートを取得します（レンダリングブロック CSS を参照）。

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

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

AMP

AMP オプティマイザーなどのツールを使用して、AMP レイアウトをサーバー側でレンダリングします。

Drupal

モジュールを使用して重要な CSS や JavaScript をインラインで読み込むか、JavaScript 経由でアセットを非同期（Advanced CSS/JS Aggregation モジュールなど）を読み込むことを検討してください。

Joomla

重要なアセットをインライン化したり、重要性の低いリソースを遅延させたりするのに役立つ Joomla プラグインがいくつかあります。

WordPress

重要なアセットをインライン化したり、重要性の低いリソースを遅延させたりするための WordPress プラグインはいくつかあります。

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

レンダリング ブロック リソースとしてフラグが立てられる URL はどれですか。