ヘルプとドキュメント
速度 大きな影響 中程度 30～60分
レンダリングをブロックするリソース
最初のレンダリングを遅延させるヘッド内の CSS と JS。
それは何ですか
レンダリング ブロック リソースは、ブラウザがコンテンツをレンダリングする前にダウンロードして処理する必要があるファイル (通常は <head> の CSS と同期 JS) です。それまで、ユーザーには何も表示されません。
なぜそれに対処するのでしょうか？
これらは、最初のレンダリングが遅くなり、LCP が低下する最も一般的な原因です。数が多く、サイズが大きくなるほど、コンテンツが表示されるまでに時間がかかります。
やり方
- 1defer/async を介してスクリプトを延期します。
- 2「重要な CSS」（表示部分のスタイル）を特定してインライン化し、残りを非同期で読み込みます。
- 3CSS/JS ファイルを結合して縮小し、未使用のスタイルを削除します。
- 4font-display を使用して外部フォントをロードします。それらを交換してプリロードします。
結論
目標は、目に見えるコンテンツをできるだけ早く配信し、それ以外は延期することです。まず、スクリプトを延期し (簡単に解決します)、CSS を最適化します (重要な CSS)。この領域は、Google が追跡する指標である LCP に直接影響します。
関連トピック