LCP（Largest Contentful Paint）とは？誰でもわかる意味と改善法｜わかりやすく用語解説

2020年5月、「LCP（Largest Contentful Paint）」という指標が突如として脚光を浴びました。Googleが「Core Web Vitals（コアウェブバイタル）」というWebページのユーザー体験を測る指標群を検索順位のランキングシグナルに導入することを発表し、Core Web VitalsにはLCPが含まれているからです。
LCPはユーザーが体感するWebページの読み込み速度を測る指標であり、SEO（検索エンジン最適化）だけでなく、Webページのユーザー体験全体に影響を及ぼしています。SEO担当者だけでなく、Webマーケター全員が理解しておきたい指標です。そこでこの記事では、Webエンジニアリングの知識のない人にもわかりやすく、LCPについて詳しく解説します。

サイト表示速度の現状を競合と比較してプロが診断！

LCP（Largest Contentful Paint）とは？言葉の意味と定義

「LCP」とは、Webページのメインコンテンツとなる、視覚的に最も大きな画像や動画、テキスト要素がブラウザ上に表示されるまでの時間です。そのWebページがどれだけ速くユーザーに対して意味のある情報を提供できるかを測る指標と言い換えてもいいでしょう。速ければ速いほど良く、GoogleはLCPの理想的な時間を2.5秒以下としています。

下の図はCNNのWebサイト「CNN.com」がブラウザに表示される様子を時系列で表現したものです。様々なコンテンツ（ページを構成する要素）が順番に表示されていく様子がわかります。緑色で示したコンテンツがその瞬間に最も視覚的に大きなコンテンツと認識されている部分で「LCPリソース」と呼ばれます。LCPリソースが確定し、それが表示されるまでの時間がLCPです。

■CNN.comのページ表示タイムライン

【図】CNN.comのLCPが表示、特定されるまでの流れをわかりやすく示した図緑色で示した領域がLCPリソース。LCPリソースはページの表示状況に合わせて変化しており、最終的に写真がLCPリソースとして認識されている。このときLCPは写真の表示が完了するまでの時間。
出典：Largest Contentful Paint（LCP）

LCPの計測対象となる要素と時間

「Webページのメインコンテンツとなる、視覚的に最も大きな画像や動画、テキスト要素がブラウザ上に表示されるまでの時間」がLCPであると前述しました。では、具体的にどんな要素を対象とし、いつからいつまでの時間を計測しているのでしょうか。より詳しく見ていきましょう。

LCPの計測対象は画像、テキスト、動画、背景画像が含まれる要素

LCPの計測対象は「画像」「テキスト」「動画」「背景画像が含まれる要素」の4種類に大別されます。LCPという言葉を聞いて、画像だけを意識する人が多いのですが、LCPリソースはWebページによって異なるので注意が必要です。

画像
<img> 要素もしくは、<svg> 要素内の <image> 要素としてHTMLに記述されているJPEG、PNG、GIFなどの画像。PNGアニメーション、GIFアニメーションのようなアニメーションの場合は、最初のフレームが計測対象となります。
動画
<video> 要素としてHTMLに記述されている動画。ポスター（サムネイル）画像が表示される場合はポスター画像が、表示されない場合は最初のフレームが計測対象となります。
テキスト
テキストを含んでいる<div>、<h>、<p>などのブロックレベル要素が計測対象となります。
背景画像が含まれる要素
url() 関数（CSS グラデーションではない）を使用して読み込まれた背景画像がある要素が計測対象となります。Reproのマーケティングサイトのトップページの場合、以下の青の囲みで示した部分がLCPの計測対象となっています。

■Repro マーケティングサイトのTOPページのLCPリソース

【図】Repro マーケティングサイトのTOPページのLCPリソースをわかりやすく示したスクリーンショット ReproのマーケティングサイトのTOPページのLCPは、青い囲みで示した背景画像を含む要素がLCPリソースとして認識されている。

LCPは4つのサブパートの時間の合計

LCPの計測対象となっている時間は、「Time to First Byte（TTFB）」「リソース読み込みの遅延」「リソースの読み込み時間」「要素のレンダリングの遅延」の時間の合計であり、それぞれをサブパートと呼びます。各サブパートの意味は以下の通りです。

Time to First Byte（TTFB）
ユーザーがWebページにアクセスする操作をしたあとに、ブラウザがサーバーから最初のデータ（バイト）を受信するまでにかかる時間。サーバーの応答時間が遅かったり、リダイレクト回数が多かったりするとこの時間が長くなります。
リソース読み込みの遅延
TTFBが終わったあとにブラウザがLCPリソースの読み込みを開始するまでの時間。LCPリソースの読み込み前にはCSS（StyleSheet）やJavaScriptの読み込みが発生することが多く、読み込むCSSやJavaScriptの量が多かったり、複雑だったりするとこの時間が長くなります。
リソースの読み込み時間
LCPリソースの読み込み自体にかかる時間。LCPリソースの容量が大きいとこの時間が長くなります。
要素のレンダリングの遅延
LCPリソースの表示処理（レンダリング）が完了するまでの時間。LCPリソースの表示以外の処理が発生し、表示をブロックするとこの時間が長くなります。多くの場合、JavaScriptの実行が表示処理をブロックしています。

■LCPのサブパートの構成とタイムライン

【図】LCPのサブパートの構成とタイムライン「#1 Time to first byte」がTTFB、「#2 Resource load delay」がリソース読み込みの遅延、「#3 Resource load duration」がリソースの読み込み時間、「Element render delay」が要素のレンダリングの遅延を示しており、それぞれ重複は発生せず、単純な合計時間がLCPとなる。
出典：Largest Contentful Paint を最適化する

LCPを計測するためのツールと使い方

LCPを計測するツールには様々なものがあり、どれを使用しても問題はありません。ここではエンジニア以外にもわかりやすく、改善のヒントを見つけやすい、「PageSpeed Insights」というWebツールを紹介します。

PageSpeed InsightsはGoogleが提供するWebサイトのパフォーマンス診断ツールです。LCPだけでなくユーザー体験にかかわる様々な指標を計測してスコア化。ユーザー体験を損なうような結果になった場合には、その原因の特定や改善方法の提案までをしてくれるものです。

PageSpeed InsightsにアクセスしてURLを入力

PageSpeed Insightsにアクセスすると、URLの入力ボックスが表示されます。LCPを計測したいWebページのURLを入力して「分析」ボタンを押しましょう。

【図】PageSpeed Insightsの初期画面のスクリーンショットページ上部にあるURLの入力ボックスにLCPをチェックしたいWebページのURLを入力し、「分析」ボタンをクリックする。LCPはページ単位で計測するものなので、計測したいページのURLをピンポイントで入力すること。
出典：PageSpeed Insights

診断結果が表示される

「分析しています」と表示されたあとに診断結果が表示されます。診断結果は現実のユーザーのアクセスデータを集約した「実際のユーザーの環境で評価する」と、課題把握用の特定環境のデータを表示する「パフォーマンスの問題を診断する」のふたつのブロックに分かれています。LCPを確認する際は、「実際のユーザーの環境で評価する」と「パフォーマンスの問題を診断する」の「パフォーマンス」ブロックをチェックしましょう。

実際のユーザーの環境で評価する

過去28日間に実際にアクセスしたユーザーに対してどのようなユーザー体験を提供できたかを確認できます。「Chrome ユーザーエクスペリエンスレポート（CrUX）」という、Google Chromeを用いてアクセスしたユーザーのデータを集約したものです。

「実際のユーザーの環境で評価する」の数値は複数のユーザーのデータを基にしているため、診断結果に表示される数値は75パーセンタイルの数値です。この数値が2.5秒以下で「良好」、4.0秒以下で「改善が必要」、4.0秒を超えると「不良」と評価されます。

【図】PageSpeed Insightsの診断結果（実際のユーザー環境で評価する）のスクリーンショット青い囲みで示した左上の「Largest Contentful Paint（LCP）」にLCPの秒数が表示されている。画面の例では3.3秒がLCPの75パーセンタイルの数値。
出典：PageSpeed Insights

パフォーマンスの問題を診断する

特定環境下でのWebサイトのパフォーマンスを確認できます。各指標の数値だけでなく、改善余地を示すためのスコア、さらには具体的な課題と改善方法が表示されるため、Webサイトの改善点を探す目的で使用します。

【図】PageSpeed Insightsの診断結果（パフォーマンスの問題を診断する）のスクリーンショット左の画面が各指標の数値やスコアが表示されている部分。LCPの秒数は右上に表示され、ここでは11.6秒となっている。右の画面は具体的な課題と改善方法の一覧。
出典：PageSpeed Insights

LCPを改善するための4種類のアプローチ

もし、自分が運営しているWebサイトのLCPが長く、改善が必要なときにはどのようなアクションを取ればいいのでしょうか。具体的な改善方法についても触れていきましょう。

【STEP1】LCPリソースを特定する

まずはLCPの計測対象となっている画像や動画（LCPリソース）などが何なのかを特定します。PageSpeed Insightsの「パフォーマンスの問題を診断する」内にある「診断」の一覧から「『最大コンテンツの描画』要素」という項目を探し、展開してください。そこに表示された要素がLCPリソースです。

【図】「最大コンテンツの描画」要素を展開し、LCPリソースを示したスクリーンショット「『最大コンテンツの描画』要素」を展開すると、上の画面のように詳細が表示される。青い囲みで示した部分がLCPリソース。
出典：PageSpeed Insights

【STEP2】LCPのサブパートを確認して課題を特定する

「『最大コンテンツの描画』要素」の項目を展開すると、LCPリソースが表示されるだけでなく、LCPを構成するサブパートそれぞれにかかっている時間を確認できます。LCPを短縮するために「TTFB」「読み込み遅延」「読み込み時間」「レンダリング遅延」のどれを短縮すればよいのかを特定しましょう。

【図】「最大コンテンツの描画」要素を展開し、各サブパートの時間を示したスクリーンショット「『最大コンテンツの描画』要素」を展開すると、LCPのサブパートそれぞれにかかっている時間と内訳を確認できる。
出典：PageSpeed Insights

【STEP3】サブパートごとに改善施策を実施する

LCPの改善はサブパートごとに狙いを絞って対策を実施するのが鉄則です。TTFBに時間がかかっていることが要因でLCPが長くなっているケースで、いくら画像や動画などのLCPリソースの容量を圧縮しても意味がないからです。

「TTFB」が長い場合の改善施策

TTFBはサーバーの応答時間と言い換えることができます。根本的な改善を目指すのであれば、サーバーのスペックアップ、サーバーアプリケーションの改善、CDN（Contents Delivery Network）の導入によるサーバーからユーザーまでの物理的な距離の短縮などが有効です。そのほか、DNSルックアップにかかっている時間や、不要なリダイレクトが発生していないかもチェックしましょう。

ただし、これらの改善施策はサーバーエンジニアが関わる領域。Webマーケターが直接的に改善に携わるのは難しく、時間を要するものです。もし、Webマーケター自身の手で短期間にLCP改善を目指すのであれば、HTML先読み機能を搭載した速度改善ツールを導入するのがおすすめです。

「読み込み遅延」が長い場合の改善施策

読み込み遅延は多くの場合、CSSやJavaScriptがLCPリソースよりも早く読み込まれることで発生しています。まずは、不要なCSSやJavaScriptがないかを確認し、不要なものは徹底的に削除、圧縮していくことをおすすめします。

LCPリソースが画像である場合には、より端的に読み込み優先度を高める方法もあります。これは「fetchpriority属性」を「high」に設定するだけで実現可能です。

「読み込み時間」が長い場合の改善施策

読み込み時間は、LCPリソース自体の読み込みにかかっている時間なので、LCPリソースの容量を小さくすることが最も有効な対策です。画像ファイルの容量が大きい場合は、WebPやAVIFなどの次世代画像フォーマットへの変換を検討しましょう。PNGやJPEG画像を使用する場合でも、画像品質が落ちない程度に圧縮率を高めて容量を削減することが重要です。

次世代画像フォーマットへの変換を自動で行ってくれるCMSやツールも世の中にはたくさんあるので、積極的に活用するのがいいでしょう。

「要素のレンダリングの遅延」が長い場合の改善施策

要素のレンダリングの遅延は多くの場合、CSSやJavaScriptがLCPリソースの表示処理をブロックすることで発生しています。あとで実行してもユーザー体験や計測に影響のないCSSやJavaScriptの処理は後回しにする実装を行いましょう。

LCPについてのよくある質問

最後にLCPについて多くの人が感じている疑問にまとめて回答していきます。気になる点がある人はぜひチェックしてください。

Q：LCPを短縮するとGoogle検索での検索順位は上がりますか？

「良い影響を与える」ことは事実ですが、LCPの改善＝順位上昇となるのはレアケースと考えたほうがよいでしょう。LCPはCore Web Vitalsを構成するひとつの指標でしかなく、Core Web VitalsもGoogleが検索順位の決定に使用している200以上のランキングシグナルの一部でしかありません。LCPの改善はあくまでユーザー体験を向上させるためのものであると割り切って施策を推進することをおすすめします。