皆さんはLCPをご存知ですか？LCPとは、UXの向上に重要なCore Web Vitalsの1つで、主にメインコンテンツの読み込み時間を測る指標です。今回はLCPの概要や効果、指標の測定方法、改善方法などについて解説します

LCP(Largest Contentful Paint)とは？

画像引用元:Google Developers Japan: Web Vitals の概要: サイトの健全性を示す重要指標

LCP（Largest Contentful Paint）は、ウェブページ上で最も大きなコンテンツ要素が表示されるまでの時間を測定するGoogleの指標です。この指標は、ページの読み込み速度を評価する重要な要素であり、ユーザーエクスペリエンスの向上に直結します。具体的には、ページのソースコード内で最も大きな要素（通常は画像や大きなテキストブロックなど）の読み込み時間を計測可能です。

LCPのスコアは、「Good」「Needs Improvement」「Poor」の3つのカテゴリーに分けられ、サイトのパフォーマンス改善に役立つ情報を提供します。GoogleはLCPを重視しており、SEOの観点からもこの指標の最適化が推奨されています。

LCPを改善する方法としては、サーバーの応答速度の向上、JavaScriptやCSSによるレンダリングブロックの削減、リソースの読み込み時間の短縮、クライアント側のレンダリング効率化などです。これらの改善策は、ユーザーエクスペリエンスの向上だけでなく、SEOにおける検索順位の向上にも寄与する重要な施策となります。

そもそもCore Web Vitalsとは？

Core Web Vitalsとは、UXの向上において特に重要とされる以下の要素を意味します。

Core Web Vitals(コアウェブバイタル)とは？計測方法やSEO効果

2020年5月、検索エンジンのランキング指標に組み込まれると発表された「Core Web Vitals(コアウェブバイタル)」ですが、一体どのようなものなのでしょうか？このページではCore Web Vitalsの概要だけでなくCLS・LCP・FIDの計測方法や改善策についてもご紹介します。気になるポイントをここで一挙に確認してしまいましょう。

LCPの評価基準

LCPの評価が「良好」と判断されるためには、コンテンツが読み込みを始めてから2.5秒以下に表示されることが理想的と言われています。

LCPのメインコンテンツはどのように確定するのか

引用：Largest Contentful Paint (LCP)

LCPのメインコンテンツがどのように確定するかを理解するのに重要なのが、FCPです。こちらはFarst Contentful Paintの略で、最初に読み込まれたコンテンツを表します。
これがそのままLCPになるとは限らず、右図のように読み込みとともにLCPは変化していきます。

引用：Largest Contentful Paint (LCP)
※GIFは画像を参考に弊社でオリジナルに作成しています

LCPが一定で変わらない例

引用：Largest Contentful Paint (LCP)
※GIFは画像を参考に弊社でオリジナルに作成しています

LCPの低下要因

ここでは、LCPのよくある低下要因についてみていきます。主に3点あるので、それぞれについて詳しくみていきましょう。

画像などの読み込み速度が遅い

画像などの読み込み速度が遅いことは、LCPの低下要因になりえます。リソースの数やサイズが大きくなればなるほど、その分読み込み時間が遅延する可能性があるため、使用する画像の大きさなどには注意が必要です。

JavaScriptやCSSが原因でレンダリングがブロックされている

JavaScriptやCSSが原因で、レンダリングがブロックされることもLCPの低下要因になりえます。

レンダリングとは、表示される現物データをもとに、内容を整形して再表示することです。
基本的にWebサイトなどのコンテンツは、ブラウザが受信した情報をサーバーに送信し、そこで必要に応じて画像や内容を最適化し、サーバーから帰ってきたデータが表示されています。レンダリング前には、リソースのダウンロードやCSSの解析、JavaScriptの実行などが行われており、それらの作業が終了するまでレンダリングは止まります。

レンダリングが遅れるとコンテンツ自体の読み込みが遅れるため、結果的にLCPの低下につながります。

サーバーの応答時間が遅い

サーバーの応答時間が遅いことも、LCPの低下要因になりえます。

先ほども解説しましたが、Webサイトなどのコンテンツはレンダリングを経てユーザーに表示されます。レンダリングの際、なんらかの問題が生じ、サーバーに負荷がかかると、その分表示速度が遅くなるため注意が必要です。

なお、サーバーの応答時間はTTFB(Time to First Bite)という指標で確認可能です。TTFBはサーバーからデータを取得する際、最初の1バイトを取得するまでにかかる時間を表します。ちなみに、GoogleによるTTFBの推奨値は200ミリ秒以下です。TTFBはGoogleが提供するLCP測定ツール「PageSpeed　Insights」や、「Chrome Dev Tool」で確認できます。

ブラウザ(クライアントサイド)のレンダリングが遅い

ユーザーが扱うブラウザにかかる負荷もLCPの低下に影響します。キャッシュの蓄積や広告表示などが原因で発生するため、注意が必要です。

LCPの改善方法

ここでは、LCPの改善方法についてご紹介します。
主な改善方法は上記の3つです。

画像を最適化する

画像ファイルの読み込み速度を改善するために画像を圧縮し、コンテンツに応じて最適化することは、LCPの改善につながります。Webでコンテンツを制作する際は、最適な画像サイズを意識しながら、できるだけ画像を小さく圧縮したり、不必要な画像は添付したりしないのがLCP改善に有効です。

レンダリングを速くする

レンダリングを速くすることも、LCPの改善につながります。レンダリングを速くするためには、リソースのダウンロードやCSSの解析、JavaScriptの実行などの処理を速くする必要があります。そのためにはCSSやJavaScriptの不要なコードは削除し、ファイルを圧縮してサイズを小さくすることが重要です。初回の読み込み時に必要ないコードは非同期で読み込ませるなどで工夫するとレンダリングの加速につながります。
また、クライアントサイドのレンダリング速度を改善する際には、JavaScriptの最小化や非同期、サーバーサイドレンダリングの活用が有効です。

サーバーの応答時間を速くする

サーバーの応答時間を速くすることも、LCPの改善につながります。先ほども簡単に解説しましたが、サーバーの応答時間の改善にはTTFB (Time to First Bite)を参考にしましょう。なお、LCPの測定ツールである「PageSpeed Insight」では、TTFBが600ミリ秒を超えると、何かしら問題があると警告されます。警告された場合は、サーバー環境の調整やキャッシュの活用などで対応しましょう。

具体的なLCPの改善施策例

画像に関する具体的な改善施策

lazy loadの利用による改善施策

JavaScriptに関するLCP改善施策

Webフォントに関する改善施策

CSSに関する改善施策

LCPの測定ができるツール

ここでは、LCPの測定ツールについて3点解説します。

Google Search Console (Core Web Vitals report)

Google Search Console (Core Web Vitals report)は、Googleが提供する無料解析ツールです。
Google Search Consoleを使うことで、検索KWの順位やアクセス数など、コンテンツの検索順位を下げる可能性のある問題点を確認できます。

主にSEO対策や新規マーケティング施策の検証におすすめのツールです。

Google Search Consoleを利用したい方はこちらから

PageSpeed　Insights

PageSpeed　Insightsは、あるコンテンツの表示速度の最適化に重点を置いた監査ツールです。調べたいサイトのURLを入力すれば、速度スコアとともにCore Web Vitalsの数値が表示されます。

モバイル端末やデスクトップの両方のページパフォーマンスに関するレポートを確認できるため非常に便利なツールです。

PageSpeed　Insightsを利用したい方はこちらから

Chrome DevTools

Chrome DevToolsとは、Google Chromeに搭載されている開発者向けのデバッグツールです。
主にWebサイトのページ表示速度やHTML構成、通信状況などを確認できます。

特別なツールやプログラムを使わずブラウザのみで簡単に確認でき、Webサービスの開発やテスト、デザインチェックの際に便利なツールです。

Chrome DevToolsを利用したい方はこちらから

LCPを改善してUXを高め、SEO対策を始めよう！

今回はLCPの概要や効果、指標の測定方法、改善方法などについて解説しました。どんなにコンテンツの内容やデザインが良くても、画像やファイルの表示速度･読み込み速度が遅いと、ユーザーに大きなストレスを与え、UX低下につながります。

LCPを改善すれば、UXを高められるだけでなく、SEO対策にもつながりますので、ぜひこのページを参考にしてみてください。