PageSpeed ルールとおすすめの方法

コンテキストに応じた PageSpeed Insights ルール: いつクリティカル レンダリング パスを最適化するのか、なぜ最適化するのか、どのような点に注意すればよいのか。

レンダリングをブロックする JavaScript と CSS を取り除く

最初のレンダリングをできる限り早くするには、ページ上のクリティカル リソース数の最小化(可能な場合はリソースの削除)、ダウンロードするクリティカル バイト数の最小化、クリティカル パス長の最適化が重要です。

JavaScript の使用方法を最適化する

JavaScript リソースは、デフォルトではパーサー ブロックであり、非ブロック化するには async としてマーキングするか、特別な JavaScript コードを通じて追加する必要があります。パーサー ブロック JavaScript があると、ブラウザは、CSSOM を待ち、DOM 構築を一時中断する必要があります。これにより、最初のレンダリングが大幅に遅れることになります。

非同期 JavaScript リソースを選択する

非同期リソースの場合、ドキュメント パーサーをブロックすることはなく、ブラウザは、スクリプトの実行前に CSSOM に対するブロックを回避することができます。多くの場合、スクリプトを非同期化できれば、最初のレンダリングに対しても重要ではなくなります。最初のレンダリングの後に非同期スクリプトを読み込むようにしてください。

JavaScript の解析を遅らせる

最初のレンダリングの表示コンテンツの構築にとって重要ではないスクリプトは、遅らせて処理するように設定して、ページのレンダリング時にブラウザが実行しなければならない作業量を最小化するようにします。

長時間実行する JavaScript を避ける

長時間実行する JavaScript は、ブラウザによる DOM 構築、CSSOM 構築、ページ レンダリングをブロックします。そのため、最初のレンダリングにとって重要ではない初期化ロジックや初期化機能は、遅らせて処理するようにします。長時間の初期化シーケンスを実行する必要がある場合、複数のステージに分割して、その間にブラウザが他のイベントを処理できるようにすることをおすすめします。

CSS の使用方法を最適化する

CSS は、レンダリング ツリーの構築に必要であり、最初にページを構築する際、多くの場合、JavaScript が CSS に対してブロックします。重要でない CSS は非クリティカルとしてマーキングし(print や他のメディアクエリ)、クリティカル CSS の量とその配信時間をできる限り小さくします。

CSS をドキュメントの head に配置する

CSS リソースはすべて、HTML ドキュメント内でできる限り早く指定する必要があります。それにより、ブラウザができる限り早く タグを発見し、CSS に対するリクエストをディスパッチできるようになります。

CSS の import を避ける

CSS の import (@import)ディレクティブは、あるスタイルシートが別のスタイルシート ファイルからルールをインポートできるようにします。ただし、このディレクティブは、クリティカル パスにラウンドトリップを追加することになるので、避けることをおすすめします。インポートされる CSS リソースは、@import ルールのある CSS スタイルシート自身の取得と解析が完了した後でのみ発見されます。

インライン レンダリング ブロック CSS

クリティカル CSS は、HTML ドキュメント内で直接インライン化することをおすすめします。これにより、クリティカル パスの追加ラウンドトリップが削減され、適切に設定できれば、HTML が唯一のブロック リソースの場合に「1 ラウンドトリップ」のクリティカル パス長が実現できます。