LCP（Largest Contentful Paint）の問題とは、表示領域内の画像およびテキストブロックのレンダリング時間が長い場合の警告です。
端的にはWebページが読み込まれる速度に問題があるということです。LCP”ブラウザがビューポート内の最大の視認可能な要素をレンダリングするまでに要する時間”が長く対処が必要になる場合があります。
目次
問題発生の原因
以下の様な原因で読込が遅くなります。
- サーバー応答時間が遅い
- レンダリングをブロックするJavaScriptとCSS
- リソースの読み込み時間
- クライアント側のレンダリング
LCPの問題の対処
- PCRLパターンを使用してインスタントロードを適用する
- クリティカルレンダリングパスを最適化する
- CSSを最適化する
- 画像を最適化する
- Webフォントを最適化する
- JavaScriptを最適化する
PCRLパターンを使用してインスタントロードを適用する
- 最も重要なリソースをプッシュ（またはプリロード）します
- 最初のルートをできるだけ早くレンダリングします
- 残りのアセットをプリキャッシュします
- 他のルートや重要でないアセットを遅延読み込みします
上記を推奨してはいますが、時間を掛けすぎずに行うことが出来るのは、プラグイン等で遅延読み込みを有効にするくらいでした。
クリティカルレンダリングパスを最適化する
コンテンツ表示の優先順位付けを意味しています。
CSSを最適化する
使用していないコードを削除して対応します。
画像を最適化する
画像、イラストの多いサイトでの対処として、Image Optimizerプラグインを導入していますが、ページ内に複数の画像がある場合は大きな影響を受けている気がします。
Webフォントを最適化する
CocoonテーマでGoogleフォントをしている場合は「Cocoon設定」＞「高速化」＞「Googleフォントの非同期読み込みを有効にする」から設定できます。
JavaScriptを最適化する
使用していない、不要なJavaScriptを削除する事によって解決します。
参考文献
Largest Contentful Paint (LCP) | Articles | web.dev
This post introduces the Largest Contentful Paint (LCP) metric and explains how to measure it
web.dev
Optimize Largest Contentful Paint | Articles | web.dev
A step-by-step guide to identifying and understanding key areas for improving LCP.
web.dev
コメント