Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP)とは
Largest Contentful Paint (LCP)の基礎知識
Web サイトのパフォーマンスは、SEOやWebサイトの再設計を定期的に行うことで、向上もしくは維持させることができます。Web サイトが改善されると、マーケティングのパフォーマンスが向上し、トラフィックが増加し、コンバージョンが増加し、努力の成果が向上します。要因の 1 つは、Largest Contentful Paint (LCP: 最大視覚コンテンツの表示時間)です。
Largest Contentful Paint (LCP) は、Web サイトまたは Web アプリケーションの読み込みパフォーマンスを測定するCore Web Vitals[※1]の重要な指標の一つです。Core Web Vitals は、2021年6月にGoogle Page ExperienceUpdate（ページエクスペリエンスアップデート）で導入された新しい指標です。Googleのランキング評価要因として注目されている指標。 Core Web Vitalsでは3つの指標で評価されます。
LCD: Largest Contentful Paint
FID: First Input Delay
CLS: Cumulative Layout Shift
Largest Contentful Paint (LCP)は、サイト上の最大の視覚要素の読み込み時間を測定します。ほとんどの場合、LCP はページ全体ではなく、スクロールせずに見える範囲の視覚要素であるコンテンツを指します。
Largest Contentful Paint (LCP)で考慮されるコンテンツ要素
Largest Contentful Paint (LCP)で考慮されるコンテンツ要素のタイプは次のとおりです
<img> 要素
<svg> 要素内の <image> 要素
<video> 要素 (ポスター画像が使用されます)
url() 関数を介してロードされた背景画像
テキストノードやその他のインラインレベルのテキスト要素の子要素を含むブロックレベル要素。
※テキスト要素については、テキスト ノード（タグ以外の文字データ）のサイズのみが考慮されます。 ※CSS を介して適用されているマージン、パディング、ボーダーはすべて考慮されません。
Largest Contentful Paint (LCP)はどのタイミングの数字ですか？
Web ページは段階的に読み込まれる場合が多く、Largest Contentful Paint (LCP)の要素が変更される可能性があります。こういった変更の可能性に対応するため、ブラウザーは最初のフレームを描画した直後に、Largest Contentful Paint (LCP)の要素を特定するPerformanceEntryを実行させます。
テキストとヒーロー画像があるページでは、ブラウザーは最初にテキストをレンダリングします。element プロパティはおそらく <p> または <h1> を参照します。 次にヒーロー画像を読み込みます。element プロパティは <img> を参照するはずです。
重要なのは、ある要素についてレンダリングが完了し、ユーザーに対して表示された時点で初めて、その要素は最大のコンテンツ要素としてみなされるという点です。まだ読み込まれていない画像は、レンダリングされたとはみなされません。
遅延して画像やフォントが読み込まれた時や新しいコンテンツが追加される時にLargest Contentful Paint (LCP)の要素よりもサイズが大きくなる場合は、新しい PerformanceEntry もレポートされます。一方でサイズの大きい要素がレンダリングされない限り、その要素が引き続き最大のコンテンツ要素として見なされます。
例えば、下記の場合はコンテンツが読み込まれると、最大の要素が変更されています。
現時点での最大のコンテンツ要素がビューポートから削除された場合 (あるいは DOM から削除された場合)、よりサイズの大きい要素がレンダリングされない限り、その要素が引き続き最大のコンテンツ要素として見なされます。
理想的なLargest Contentful Paint (LCP)のスコア
Googleは、LCP における良いスコアに関して、下記のように記載しています。
良好なユーザー体験を提供するために、サイトは Largest Contentful Paint が 2.5 秒以下になるように努力する必要があります。ほぼすべてのユーザーに対してこの目標値を確実に達成するためには、モバイル デバイスとデスクトップ デバイスに分けた上で、総ページロード数の 75 パーセンタイルをしきい値として設定します。
75 パーセンタイルをしきい値として使うという意味は、あるサイトのページ ビューの 75% 以上が "良い" に該当するしきい値を満たしていれば、そのサイトはその指標について "良い" パフォーマンスを維持しているとして分類されます。
Largest Contentful Paint (LCP)という指標ができた理由
過去には、初期表示後の読み込みエクスペリエンスを把握するために、ページ表示速度の指標としてユーザーにとって最も重要なのは First Meaningful Paint (意味のある視覚コンテンツの初期表示時間、FMP)やSpeed Index (ページが表示される速さ、SI)と考えられていました。
これらの指標は複雑で説明が難しく、間違っている場合も多かったため、FMPやページのメイン コンテンツがいつ読み込まれたかを特定することはできませんでした。 W3C Web Performance ワーキング グループでの議論や Google が実施した調査によると、ページのメイン コンテンツの読み込みタイミングをより正確に測定するためには、最も大きい要素がレンダリングされるタイミングの測定が重要であることが分かりました。
参考：Largest Contentful Paint｜W3C
参考：Largest Contentful Paint (LCP)| web.dev
マーケティング活動において、Largest Contentful Paint (LCP)はどのような影響がありますか？
Largest Contentful Paint (LCP)スコアが悪い場合は、メインコンテンツをより速く読み込む必要があることを示している可能性があり、ユーザーがサイトを離脱してしまう可能性があります。これにより直帰率が高くなり、Web サイトの検索エンジンのランキングや全体的な可視性に悪影響を及ぼす可能性があります。さらにはコンバージョンにも大きな影響を与える可能性があります。読み込みに時間がかかると、ユーザーはイライラし、ユーザーが目的のアクションを完了するのに十分な時間滞在できない可能性があるため、コンバージョン率に悪影響を与える可能性があります。
LCP スコアが良ければ、ユーザーは Web サイトの読み込みが速いと認識し、エンゲージメント、コンバージョン率、ユーザー満足度の向上につながります。良好な LCP スコアは 2.5 秒未満である必要があり、2.5 秒を超えると遅いと見なされ、ユーザー エクスペリエンスが低下する可能性があります。
Largest Contentful Paint (LCP)の測定方法
フィールドデータ（実際にユーザーがアクセスした環境で取得した数値）
Chrome User Experience Report
PageSpeed Insights
Search Console (Core Web Vitals Report)
web-vitals JavaScript ライブラリ
ラボデータ（PSIを実行した環境におけるシミュレーション環境での数値）
Chrome DevTools
Lighthouse
PageSpeed Insights
WebPageTest
Largest Contentful Paint (LCP)を向上させるポイント
LCP が Web サイトのパフォーマンスを決定する唯一の指標ではないことは注目に値します。First Contentful Paint、Speed Index、Time to Interactive、Total Blocking Time などの他の指標も、Web サイトとページ エクスペリエンスの全体的なパフォーマンスを決定する上で重要な役割を果たします。
弊社では、Web サイトのパフォーマンスに関するクライアントの状況に応じたサポートを提供しています。現在お困りの場合、またはこれからSEOやWebサイトの再設計、Webサイトの定期的な最適化どうしたら良いか悩んでいるケースでもまずはお気軽にお問合せください。