このページではLCP（Largest Contentful Paint）についてわかりやすく解説していきます。

計測される仕組みから、評価内容までをわかりやすく解説していきます。

LCPの改善施策に関しては「LCP改善」の記事をご覧ください。

LCPとは？

LCPはLargest Contentful Paintの略で、表示されている画面内のウェブページ上で最も大きなコンテンツ要素（画像、動画、テキストブロックなど）がブラウザに表示されるまでの時間を測定するパフォーマンス指標です。

この時間が短ければ良好と評価され、長いと改善余地があると判断されます。

LCPの計測対象になる最も大きなコンテンツ要素の定義

最も大きなコンテンツ要素とは、表示されている画面内で表示面積の一番大きいコンテンツのことを指します。

例えば、初めに表示される画面の範囲に下記の画像のような要素があった場合、全体の50％を占めるメイン画像が最も大きなコンテンツと判断され、このメイン画像が表示されるまでの時間が評価されます。

上記は最大コンテンツが画像要素の例ではありましたが、LCPの計測の対象となるコンテンツ要素は他にもあります。

LCP（Largest Contentful Paint）の計測対象となるコンテンツ要素

• <img>要素
• <svg>要素内の<image> 要素
• <video> 要素（ポスター画像の読み込み時間または動画の最初のフレームの表示時間のいずれか早い方）
• url() 関数を使用して読み込まれた背景画像を持つ要素（CSS グラデーションではない）
• テキストノードや他のインライン レベルのテキスト要素の子要素を含むブロックレベルの要素。

画像以外にも、動画要素、素背景画像、テキストのブロック要素などです。

最も大きなコンテンツ要素のポイント

• ビューポート外のコンテンツは対象外となる
• ファイルサイズではなく、画面の面積が対象

更に詳しくはLCPの「最大コンテンツの描画」とは？で理解を深められます。

LCPの計測時間と計算方法をわかりやすく解説

ここでは各コンテンツ毎に計測開始タイミングから終了までの説明を画像を使ってわかりやすく解説していきます。

LCPの画像の計測時間について

LCPの画像計測方法について、ビューポート（表示されている画面内）で画面に占める画像の割合が最大の場合対象となります。

ユーザーがWEBサイトにアクセスした瞬間からLCPの計測がスタートし、対象となる画像が全て描写完了になった時点で計測が終了となります。

上記は計測のイメージですが、ページを読み込まれてから最も大きいコンテンツである画像描写が完全に完了した2.3秒がLCPでの計測結果となります。

また、background-image: url()などで指定されている背景画像についても対象となります。

LCPのテキストの計測方法

LCPのテキスト計測方法について、ビューポート（表示されている画面内）で画面に占めるテキストブロックの割合が最大の場合対象となります。

ユーザーがWEBサイトにアクセスした瞬間からLCPの計測がスタートし、対象となるテキストブロックが全て描写完了になった時点で計測が終了となります。

テキストブロックの定義は「テキストノードやその他のインラインレベルのテキスト要素の子要素を含むブロックレベル要素」となります。

ブロックレベルの要素例

• <div> – 汎用コンテナ
• <p> – 段落
• <h> – 見出し
• <article> – 記事
• <section> – セクション
• <header> – ヘッダー
• <footer> – フッター
• <ul>, <ol>, <li> – リスト

例ではありますが、ソースで説明すると下記のようになります。

<div class="hero-section">← これがテキストブロック（LCP対象）

  <h1>メインタイトル</h1>← テキストノード
  <p>説明文が<span>ここに</span>入ります</p>← テキストノード

</div>

また、注意点としてwebフォントを使用している場合に代替えフォントが先に表示されますが、この代替えフォントが表示されている時点では、LCPは計測完了となりません。

一見早く表示されているように見えても、webフォントが完全に読み込むまでの時間で計測されることを覚えておきましょう。

webフォントを使わなくても済む場合は、使わない方がLCPの数値は良くなる傾向にあります。

LCPの動画要素の計測方法

LCPの動画（video要素）の計測方法について、ビューポート（表示されている画面内）で画面に占めるvideo要素の割合が最大の場合対象となります。

ユーザーがWEBサイトにアクセスした瞬間からLCPの計測がスタートし、下記の画像のように対象となるvideo要素の最初のフレームが鮮明に表示された時点で計測が終了となります。

上記の画像の場合はLCPは2.0秒と計測されます。

ポイントとしては動画ファイルは比較的重いことが多いです。

そのため、LCPの数値を意識するのであれば、poster属性で初めのフレームに画像を読み込ませるというテクニックもあります。

もしくは、どうしても必要という場合以外は初期表示エリアに動画はおかないようにすると良いでしょう。

LCPにおける動画計測のポイント

• 最初のフレームが表示されれば測定完了となる
• フレームは完全に鮮明な状態で表示されないと測定完了とならない
• poster属性で画像を読み込ませる方法もある

LCPの計測される仕組みを要素ごとにわかりやすく解説

LCPが計測される時間を時系列で細かく分類すると、下記の3つの要素に分けられます。

それぞれの仕組みを理解することで、効果的な改善策を立てることができます。

LCPが計測されるパート

1. サーバーのリクエストから応答までの時間※TTFB（Time to First Byte）
2. リソース読み込み開始から読み込みまでの時間（ただし対策で飛ばすことができる）
3. 要素のレンダリング時間

①サーバーのリクエストから応答までの時間　※TTFB（Time to First Byte）

ここの項目はWEBサイトへアクセスして、サーバーからHTMLなどのデータを受信するまでの時間を指します。

WEBサイトにアクセスをする必要があり、アクセスした時点からLCPの計測が始まります。

読み込む仕組みとして、WEBサイトにアクセスしブラウザからサーバーにHTMLなどの情報を読み込みに行きます。読み込みにいった後にサーバーからデータを受信すると言う流れになります。

ここの要素はTTFB（Time to First Byte）とも言われ、PageSpeed Insightsの指標にもなっています。

LCPに影響するポイント

サーバーのリクエストにかかる応答時間（TTFB）やDNSの読み込みを速くするためにサーバースペックを上げることや、CDNネットワークの活用、リダイレクトなど無駄な読み込みの回数を減らすことでリクエストの時間を短縮できます。

②リソース読み込み開始から読み込みまでの時間

ここの項目は、①のサーバーからデータを受信した後に、HTMLなどを構成するCSSやJavaScriptを先に読み込みにいく動作の時間を指します。

特にここで注意したい点としては、外部のCSSファイルや外部のJavaScriptファイルを設定しているとそちらの読み込みが優先されてしまい、レンダリングがブロックされLCPの計測に必要な画像や動画の読み込みが遅れてしまいます。

「FCPとは」の記事でも紹介しているように、ここではファーストビューの表示に必要なCSSやJavaScriptをインライン上に記載しそれ以外の読み込みは遅延させる方法や、ファーストビューに表示されない画像の遅延読み込みなどをすることで、リソース読み込み時間を回避できます。

LCPに影響するポイント

FCPの改善施策を実施することでリソースの読み込みを回避、もしくは短縮できます。こちらは必須の施策と言えるでしょう。

③要素のレンダリング時間

LCPの計測対象となる表示されている画面内で、最も大きいコンテンツの表示処理（レンダリング）が完了するまでの時間の項目です。

通常レンダリングが始まると、ページ全体の画像などのコンテンツを同時に読み込まれてしまいます。（表示されている画面外のものも読み込まれる）

LCPの対象となるコンテンツ以外を遅延読み込みさせるなどの施策を行うことでLCPの改善にも繋がります。

LCPに影響するポイント

表示されている画面以外のコンテンツを遅延読み込みさせることや、最も大きいとされるコンテンツ（画像など）の容量を圧縮し軽くすることなどが改善できる施策となります。

LCPは秒数で評価される

LCPの評価は秒数で評価されます。

上記の画像のように2.5秒以下は良好で2.5秒〜4.0秒は改善が必要で4.0秒以上は不良といった評価となります。

PageSpeed Insightsでも2.5秒以内を推奨していて、SEOの評価にも影響がある要素となります。

優れたユーザー エクスペリエンスを提供するには、サイトで Largest Contentful Paint を 2.5 秒以下に収めるようにします。ほとんどのユーザーが閲覧する際に目標値が達成されるよう、モバイル デバイスとデスクトップ デバイスでページ読み込みの75 パーセンタイルを測定することをおすすめします。

引用：PageSpeed Insights

参考記事：「LCPの問題: 2.5秒超」の原因と改善方法を解説

LCPが重要な理由

LCP（Largest Contentful Paint）は、ユーザーがページの主要コンテンツを実際に見ることができるまでの時間を測定するための指標で、実際のユーザー体験と直結する重要な指標です。

ユーザー体験向上による間接的影響

LCPが遅いとユーザーの離脱率が大幅に増加し、コンバージョン率低下や売上減少に直結します。

これにより、サイト内での行動が活発になり、ページビュー数の増加や滞在時間の延長につながります。

Googleはこうしたユーザー行動シグナルも検索順位の判断材料として活用しているため、LCPの改善は間接的にもSEO効果をもたらします。

特に、モバイルユーザーにとって表示速度は重要な要素であり、モバイルファーストインデックスを採用するGoogleにとって、LCPの最適化は欠かせない要素となっています。

Core Web Vitalsの検索ランキングへの直接的影響

Googleは、LCPを含むCore Web Vitalsを検索ランキングの公式要因として組み込みました。

これにより、LCPのスコアが悪いサイトは検索結果で不利になる可能性があります。

特に、競合サイトとコンテンツの質が同程度の場合、LCPを含むCore Web Vitalsのスコアが優秀なサイトが上位表示される傾向が強くなっています。

つまり、技術的なSEO対策としてLCPの改善は必須の取り組みと言えるでしょう。

これはSEOランキング要因に採用しているため、検索順位にも影響します。

直帰率、滞在時間、コンバージョンといった要素にも大きく影響します。

直帰率改善とエンゲージメント向上

調査によると、ページの読み込み時間が1秒から3秒に増加すると、直帰率が32%増加するとされています。

LCPを2.5秒以内に抑えることで、ユーザーの離脱を防ぎ、サイト内での回遊を促進できます。

これにより、平均セッション時間の延長やページ/セッション数の向上が期待でき、Googleからの評価も高まります。

特にECサイトや企業サイトでは、LCPの改善が直接的にビジネス成果に結びつくケースも多く見られます。

LCPの測定方法をわかりやすく紹介

LCPの計測方法についてご紹介していきます。

基本的にはPageSpeed Insightsとlighthouseを活用する方法があります。

WEBサイトの表示速度を計測する方法でも詳しく説明しています。

PageSpeed Insightsの計測方法

PageSpeed InsightsにアクセスしURLを入力し分析ボタンをクリックするだけで計測が行われます。

計測に1分前後ほど待つ場合がありますが、計測結果や改善点も詳しく表示されます。

計測されると下記の画像のような表示となりLCPの計測結果も表示されます。

PageSpeed Insightsの計測の特徴をまとめると下記となります。

PageSpeed Insightsでの計測の特徴

• URL入力だけで簡単に確認できる
• 1度の計測でモバイル・PC両方簡単に確認できる
• 実際の利用環境での計測値になる
• Chromeユーザーの実測値を集計
• 改善ポイントなどが詳しく出てくる

計測するまでの操作も簡単で、実際の利用環境での計測値が取れるということが特徴的です。

改善ポイントが詳しく出てくると言う点も利点ではあります。

PageSpeed Insightsの利用がおすすめな方

• マーケティング担当の方
• 一般ユーザーの方

また、上記のようにマーケティング担当の方や一般ユーザーの方の利用がおすすめです。

理由は特徴にもあるように、簡単に操作でき改善ポイントも具体的に出てくる点があげられます。

Lighthouseでの計測方法

測定したいページをChromeブラウザで開きます。

下記の手順に沿って計測ができます。

1. 右クリックして「検証」をクリックし下記の画像の画面を開きます。
2. 「Lighthouse」タブをクリック
3. 測定条件を設定する
4. Analyze page loadをクリックして計測開始

計測ができたら下記の「Largest Contentful Paint」の項目にLCPの計測結果が出ます。

lighthouseの計測の特徴をまとめると下記となります。

lighthouseでの計測の特徴

• 開発環境での計測値になる
• 他の影響を受けないので常に同条件で計測が可能

開発環境での計測となるのが特徴です。（回線速度などその他の影響を受けない）

ページを構築する際の表示速度の確認などに最適となります。

PageSpeed Insightsの利用がおすすめな方

• フロントエンドの開発担当の方

そのため一般向けというよりかはフロントエンド開発者などの利用がおすすめです。

まとめ：LCP改善で競合に差をつけよう

LCPは、ユーザーがページにアクセスしてから表示されている画面内のウェブページ上で最も大きなコンテンツ要素が表示されるまでの時間を測定する重要な指標です。

LCPの改善は、ユーザーエクスペリエンスの向上だけでなく、SEOの観点からも非常に重要な要素です。

設定が難しいケースや知識がなく難しいと言う方は、是非一度LandingHubにご相談ください。

タグの設置一つで表示速度改善に役立てるツールとなります。

また、表示速度において詳しい知識を持ち合わせるスタッフもおりますのでご相談を承ります。