LCPとは
LCPとは、ユーザーに優れたユーザーエクスペリエンスを実現するための核になる、Core Web Vitals(コアウェブバイタル)の３指標の一つです。
Largest Contentful Paintの略で「ページの表示速度」や「読み込み時間」を示す指標です。
直訳すると「最大コンテンツの描画」となり、正確にはそのページにおける最もサイズの大きなコンテンツの読み込みにかかる時間のことです。
2.5秒以内であれば良好、4.0秒以上だと不良と評価され、その間は改善の必要性ありと判断されます。
LCP測定方法
- DeepCrawl
- PageSpeed Insights
- Google Search Console
- Web Vitals
- Lighthouse
LCPスコアが低下する原因とそれぞれの施策
1.サーバー応答時間が長い
ブラウザがサーバーからコンテンツを受信するのに、時間がかかればかかるほど、
レンダリング（受け取ったデータの描画）する時間がかかってしまいます。
サーバーの応答速度はTTFB（サーバーの初期応答時間）という指標で表され、このTTFBの遅延がLCPの低下につながります。
施策
- サーバーを最適化
- ユーザーから地理的に近いCDNを活用する
- キャッシュの活用
- サードパーティの接続時間を早める
2.JavaScriptとCSSのレンダリングブロック
サイトを読み込む際、サーバーからレスポンスを受けたら処理が開始され、そのレスポンスの中身のHTML、CSS、JavaScriptのコードをどのようにレンダリングします。
その際、JavaScriptやCSSの処理に時間がかかるため、不要なJavaScriptやCSSが多いとLCPの低下につながります。
施策
- コード内のスペースやコメント削除によるJavaScriptやCSSの最少化
- 不要なJavaScriptやCSSファイルの削除
- 初期の読み込みで不要なものは非同期で読み込む
- JavaScriptの調整
3.リソースの読み込み時間が遅い
多くの場合、読み込み速度に影響を与えるのが画像です。
<img>、要素内の<svg><image></image></svg>、<video>、url() 関数を介して読み込まれた背景画像が含まれている要素、テキストノードやインラインレベルのテキスト要素を含むタグ以外の文字データなどのリソースが膨大にあるとLCPの低下につながります。
施策
- 画像の最適化と圧縮
- 不要な画像を減らす
- 重要なリソースをプリロード
- テキストファイルの圧縮
- Adaptive servingを活用する
- Service Workerを使ったキャッシュ利用
4.クライアント側のレンダリングが遅い
クライアント側のレンダリング速度の改善には、以下のような施策をおこないます。
施策
- JavaScriptの最小化
- JavaScriptの非同期化
- サーバーサイドレンダリングを使用する
参考
https://gmotech.jp/semlabo/seo/blog/corewebvitals_lcp/
https://growthseed.jp/experts/seo/optimize-lcp/
https://innova-jp.com/core-web-vitals-lcp/