PageSpeed InsightsのLCP（Largest Contentful Paint）の改善項目に「最大コンテンツの描画」と表示されているけど、これってどういうこと？

なんとなく理解しているけど説明できるほど詳しくわからない・・・

こんな方のために詳しくわかりやすく解説していきます。

最大コンテンツの描画とは？わかりやすく解説

最大コンテンツの描画（LCP：Largest Contentful Paint）は、Webページ上でビューポート内（画面に見える範囲）において最も表示面積が大きい要素が完全に表示されるまでのことを言います。

LCP（Largest Contentful Paint）では、この最大コンテンツの要素が表示されるまでの時間を計測した指標になります。

最大コンテンツの定義

最大コンテンツの定義としては、ビューポート内（画面に見える範囲）で一番面積の大きい要素が最大コンテンツの対象となります。

ビューポートに表示されるサイトの構成の例

• ヘッダー画像（10％の面積を占有）
• ナビゲーション（5%を占有）
• メイン画像（50％を占有）
• サイドバー（10％を占有）
• テキストブロック（20％を占有）
• サイドバー（10％を占有）
• フッター（10％を占有）

例えば上記のような構成の割合で画面を占めていた場合、全体の50％を占めている（一番占有面積が多い）メイン画像が最大コンテンツと判別されます。

こちらはあくまでも例ですが、文章が多いページなどテキストブロックの占有面積が多いページであれば、そのテキストブロックが最大コンテンツと判断されるということになります。

サイズというとファイル容量などをイメージしてしまう方もいるかと思いますが、表示面積が対象となるという点は注意しておきましょう。

ビューポート内の定義

上記の画像のように画面上で見えている範囲をビューポート内と言います。

スクロールしないと出てこないページ下部の部分などの要素はビューポートには入りません。

LCPで言われる「最大コンテンツ」はこの範囲に含まれるコンテンツに限定されるということになります。

最大コンテンツの対象となる要素の定義

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

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

測定対象となるのは、画像（<img>タグや<svg>タグ内容image要素）、動画（<video>タグ）、CSS背景画像を持つ要素、テキストを含むブロックレベル要素です。

ファイルサイズではなく画面上での表示面積で判定されます。

img要素のサイズ特定の仕組み

<img>タグの表示サイズの決定要因は、基本的にはCSSやHTMLや親要素なので指定されているheight（高さの要素）とwidth（横幅の要素）のサイズで大きさを特定されます。

ただしイレギュラーのケースもあるので、ケース別に説明していきます。

画像の固有サイズと指定している表示サイズが異なる場合

例えば、元の画像サイズが1000×800pxのサイズで、widthとheightで800×600pxと指定され、元の画像よりも指定されたサイズが小さい場合は小さい方のサイズ（800×600px）が対象となります。

①元の画像サイズ：1000×800px＝8,000,000px
②widthとheight指定サイズ：800×600px＝480,000px

②の800×600px＝480,000pxが対象となります。

逆のケースの場合も小さいサイズが優先されます。

①元の画像サイズ：800×600px＝480,000px
②widthとheight指定サイズ：1000×800px＝8,000,000px

①の800×600px＝480,000pxが対象となります。

レスポンシブ画像も同様の考え方で、結果的にそのデバイスで指定されたサイズと、元の画像サイズを比較し小さい方のサイズが採用されます。

また、object-fitや、transformなどの場合もこれと同様に元画像のサイズと指定表示サイズの小さい方を採用されると認識しておいていいでしょう。

svg要素内のimage要素についても同様

ここでも元画像のサイズとwidthとheight指定されたサイズの小さい方が採用されるという概念は変わりありません。

ただし、勘違いのないように注意しておきたいのがsvgの指定サイズは関係ありません。

あくまでsvg要素内のimage要素が対象となります。

video要素のサイズ特定の仕組み

video要素もimage要素と同じように、元動画の固有のサイズとwidthとheightで指定された表示サイズの小さい方が採用されるという仕組みになります。

元動画の固有サイズというのが何を指すのかというと、動画自体のサイズはもちろんですが、ポスター画像がある場合はそのポスター画像も対象となります。

サイズが採用される例

1. 元動画の固有サイズ：1920 × 1080px
2. ポスター画像：800 × 600px
3. widthとheightの指定サイズ：400 × 300px

この場合は一番小さい③の400 × 300pxが採用されます。

video要素は読み込み時間でも優先が変わる

上記はサイズの話（表示される面積）で採用が決まるという話でしたが、「ポスター画像の読み込み時間または動画の最初のフレームの表示時間のいずれか早い方が採用される」という点も忘れてはいけません。

下記の例は、ポスター画像の方が表示サイズは大きい（本来は優先されない）が、先に表示されたのでこちらの表示速度の計測が優先されたという例のイメージです。

ポスター画像が1920 × 1080pxで、元動画の固有サイズが800 × 600pxだった場合でも、ポスター画像の読み込みが100msで元動画のフレームの読み込みが500msで表示された場合、ポスター画像（1920 × 1080px）の読み込み時間がLCPの対象として計測されることになります。

上記を踏まえると、video要素のポスター画像などの表示速度を上げる工夫をすることでLCPも改善につながると言えます。

背景画像を持つ要素のサイズ特定の仕組み

背景画像もurl()関数で読み込まれた背景画像は対象になりますが、CSSグラデーションは対象になりません。

対象となる背景画像例

.hero {
  background-image: url('hero-image.jpg');
}

対象とならない例

.gradient {
  background-image: linear-gradient(to right, blue, red);
}

また、要素のサイズについても画像などの考え方と同じで、元画像の固有サイズと表示サイズを比較して小さい方が採用される仕組みとなります。

例えば①背景要素の表示サイズが800×400pxで、②背景画像の固有サイズが2000×1500pxとなった場合は、①のサイズが小さい方がLCP計測の対象となります。

①背景要素の表示サイズ：800×400px＝320,000px
②背景画像の固有サイズ：2000×1500px＝3,000,000px

①の800×400px＝320,000pxが対象となります。

background-sizeプロパティが含まれるケース

background-sizeのプロパティにcoverやcontainなどの値が入る場合は、通常の考え方と変わらず、背景要素の表示サイズと背景画像の固有サイズのどちらか小さい方の値が対象となります。

「background-size: 指定サイズ」となる場合だけ、背景要素の表示サイズと背景画像の固有サイズと指定されたサイズが対象となり、一番小さい値が対象となります。

ビューポート（表示画面）からはみ出たサイズの場合

例えばビューポート（表示画面）の幅が1200pxのケースで、背景要素の表示サイズが2000pxと指定されている場合（画面のサイズを超えている）、ビューポート（表示画面）のサイズの計算で適用されます。

.large-bg {
  width: 2000px;  /* ビューポート幅1200pxを超える */
  height: 1000px;
  background-image: url('huge-image.jpg');
}

上記のようなソースの場合

ビューポート（表示画面）のサイズ（1200px）×height（1000px）の計算となります。

ここで計算されたサイズと背景画像の固有のサイズを比較し、小さい方のサイズがLCPの対象となります。

テキスト要素のサイズ特定の仕組み

テキスト要素は指定されているブロックレベル要素のサイズ（見出しや段落など）が対象となります。

インライン要素（リンクタグや太文字など）で単体のものは対象になりません。

LCP測定対象となるテキスト要素

テキスト要素は見出しタグ<h>、段落のテキストコンテンツ<p>、ブロック要素内のテキスト<div>の要素、セクション<section>が対象となります。

LCP測定対象となるテキストのブロックレベルの要素

• 見出し要素：<h>
• 段落のテキストコンテンツ<p>
• ブロック要素内のテキスト<div>
• セクション<section>

ブロック要素内に含まれるインラインテキスト<span>やリンクテキスト<a>や斜体</em>は対象とはなりません。

LCP測定対象とならないテキスト要素

1. インラインテキスト<span>
2. リンクテキスト<a>
3. 斜体</em>

LCP測定対象となるテキストのサイズ計算方法

テキストのサイズ計算方法について、例を交えて解説していきます。

シンプルな見出しの例

<h1 style="font-size: 48px; width: 600px;">
  大見出しテキスト
</h1>

例えば上記の見出しの場合、「大見出しテキスト」と記載のある実際の文字列の幅（例：300px）とフォントサイズの高さ（例：72px）が考慮され

（文字の幅：300px）×（文字の高さ：72px）がサイズとなります。

見出しの幅600pxの幅ではなく、テキストの幅が対象です。

複数行テキストの例

<p style="width: 400px; font-size: 16px; line-height: 1.5;">
  これは長い段落テキストで、
  指定された幅で折り返されて
  3行になる場合の例です。
</p>

この場合はブロック要素であるコンテナ幅400pxと行の高さ24px（16px × 1.5）と3行分のサイズが考慮され下記のような計算式でサイズが決まります。

（コンテナの幅：400px）×（行の高さ：24px × 3行）がサイズとなります。

「最大コンテンツの描画」とは

本記事では、Webパフォーマンス指標の一つであるLCP（最大コンテンツの描画）について詳しく解説されています。LCPは、ユーザーが画面で見える範囲（ビューポート）内で最も表示面積が大きい要素が完全に表示されるまでの時間を測定する重要な指標です。

測定対象となるのは、画像要素、動画要素、CSS背景画像、テキストブロック要素の4つで、ファイルサイズではなく実際の表示面積で判定される点が特徴的です。特に画像や動画では「表示サイズと固有サイズの小さい方」が採用され、動画の場合はポスター画像と最初のフレームのうち早く表示される方がタイミング対象となります。

テキスト要素については、見出しや段落などのブロックレベル要素のみが対象で、リンクや太字などのインライン要素単体は測定されません。LCP改善の目標は2.5秒以内とし、画像最適化やサーバー性能向上などの継続的な取り組みにより、ユーザー体験の向上とSEO効果の両方が期待できると結論づけられています。