最大規模のコンテンツペイント事例とベストプラクティス

LCP（Largest Contentful Paint）は、Core Web Vitalsの指標の一つで、ユーザーの視点から見たページの読み込み速度を計測します。これは、ユーザーがスクロールする前に、初期ビューポート内で最も大きく表示される要素（ヒーロー画像や見出しなど）のレンダリングが完了するまでの時間を測定します。

最も大きな内容物となる塗料は何ですか？

最大コンテンツペイントとは、ページ内で最も大きな視覚的要素を指します。これは、ユーザーがスクロールダウンしたりボタンをタップしたりする前に、ビューポート内で最も大きな表示要素（多くの場合画像）のレンダリング時間を示します。

LCPは基本的に、ページスクロールせずにユーザーに表示されるコンテンツ、つまりページフォールドより上にあるオブジェクトのみを考慮します。これらのオブジェクトには通常、ヒーロー画像、ブロックレベルテキスト、ビデオポスター画像などの要素が含まれます。LCPは、ビューポート（閲覧に使用するデバイスによって変化するWebページの表示領域）の外側にあるものは考慮しません。    

最大のコンテンフルペイント vs. 最初のコンテンフルペイント

最大の要素の読み込み時間とは対照的に、ファースト・コンテントフル・ペイント（FCP）とは、ビューポートに最初の視覚要素が表示されるまでにかかる時間を指します。 

従来、サイトのパフォーマンスは全体の読み込み速度によって判断されていましたが、LCPとFCPは、ウェブサイトの体感的な読み込み速度を測定するために業界で広く認知されている指標となっています。

FCPは重要な指標ではありますが、LCPほど決定的な指標ではありません。なぜなら、FCPはウェブページに最初に表示される要素の瞬間を測定するだけであり、他のより大きな要素よりもかなり前に表示される可能性があるからです。一方、LCPはユーザーエクスペリエンスとより密接に関連しており、LCPが速いほどユーザーの不満を最小限に抑えることができます。  

なぜ最大コンテンツペイントがSEOにとって重要なのか？

検索エンジン最適化（SEO）とLCPの関係を考える際、Googleの検索エンジンアルゴリズムは、ページエクスペリエンスを測定する上でLCPを重要なランキングシグナルとみなしていることを覚えておきましょう。ウェブサイトのデザインが洗練されていて、魅力的な商品や良質なコンテンツがあっても、読み込みに時間がかかりすぎると、ユーザーエクスペリエンスは低下します。サイトの読み込み速度が速ければ速いほど、Google検索結果ページでのランキングは向上します。  

事例研究：塗料業界における最大のインパクト事例

ボーダフォンは世界最大級のワイヤレスサービスプロバイダーの一つであり、22カ国で90,000万人以上の従業員を擁している。 ケーススタディ Googleが発表した資料によると、同社はウェブサイト訪問者の購入率を高めることで顧客生涯価値（LCP）を31%向上させ、その結果として売上を5%増加させることができたという。Vodafoneの規模を考えると、この増加額は数千万ドルに相当する。

彼らは2つのランディングページ（下の2つのスクリーンショット）でA/Bテストを実施し、それぞれディスプレイ広告、ソーシャルメディア、オーガニック検索など複数のチャネルから3万4千人の訪問者を集めた。

左側のスクリーンショットは、LCPを改善するためのベストプラクティスを活用したもので、これについてはこの記事の後半で詳しく説明します。このケースでは、一部のロジックをクライアント側（スマートフォン）からサーバー側に移行し、画像のフォーマットと読み込み方法を改善しました。

これらの改善により、最大のコンテンツ描画時間が8.3秒から5.7秒に短縮され、左側のページからの販売コンバージョン率が11～15%向上しました。

最大容量の塗料を測定する方法は？

LCPで一般的に考慮される個々の要素の種類には、以下のようなものがあります。

• 前景画像
  • 画像要素（ ）
  • SVGコード内の画像要素（ )
  • 背景画像
• CSSを使用した背景画像 (背景: url('example.png'))
• ビデオ要素
• ポスター画像付きの動画サムネイルまたは動画要素のみ
• テキスト要素
  • テキストブロック段落タグ（ ) リスト ( 、 ）、または見出し（ 、 )

この記事の執筆時点では、そしてこれらの要素はLCPスコアの計算には使用されませんが、将来追加される可能性があります。

要素のサイズはどのように決定されるのですか？  

通常、LCPの場合、ビューポート内で肉眼で見える要素のサイズが報告されます。

サイズ＝幅×高さ 

余白、パディング、境界線はサイズ計算には含まれません。

要素の表示サイズではなく、本来のサイズ（アップロードされた要素の元のサイズ）を区別することを忘れないでください。Google は、表示サイズと本来のサイズのうち小さい方のピクセルサイズを要素のサイズとして計算します。 

最大有効塗料を測定するためのツール

LCPは、ラボツール（シミュレーションされたトランザクションに基づいて測定）またはフィールドツール（実際のユーザートラフィックで測定）のいずれかを使用して測定できます。

1. ラボツール （WebPageTestなどの合成監視ツール）：アルゴリズムに基づいたパフォーマンスシミュレーションを指します。
2. フィールドツール （リアルユーザーモニタリング）：実際のトラフィックに基づいて、稼働中のサイト上で直接実施されます。この測定に使用されるツールには、Google Search Console（新しいコアWebバイタルレポート）とWebバイタルJavaScriptライブラリが含まれます。

以下の手順に従って、最大の要素をすばやく見つけます。 WebPageTest：

1. に行く www.webpagetest.org/webvitals  
2. テストしたいウェブページのURLを入力してください（ このURL （以下の例を参照）。
3. ソフトウェアの制限をクリック テストを開始 最終結果が出るまで数分お待ちください。

選択 フィルムストリップとして表示 テスト全体をフレームごとに表示するには、または ビデオを見る ページ読み込み時のユーザー体験の録画を視聴できます。これら2つの機能はWebPageTest独自の機能であり、他の測定方法との決定的な差別化要因となっています。

WebPageTestによって生成されたアーカイブ済みレポートにアクセスできます こちら.

この例ではLCPを引き起こす最大の要因は、

フィルムストリップ表示では、以下のオプションを使用するとより理解を深めることができます。 

• 最も大きなコンテンツを含む塗料をハイライト表示 
• サムネイルサイズ：大
• サムネイル表示間隔：0.5秒

高度な最大コンテンツペイント測定：Webバイタルライブラリ  

開発者は、WebページのコードにLCP値を組み込むことで、ブラウザのコンソールにログ出力することができます（コードの3行目）。この方法は、Largest Contentful Paint APIを使用して実際のユーザートラフィックを測定します。

new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) { 
  console.log('LCP candidate:', entry.startTime, entry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});

以下のコードは、開発者がコンソールログからLCP測定値を収集し、レポート作成やサードパーティ製ツール、自社開発ツールへの統合に役立てるのに役立ちます。 

import {getLCP} from ‘web-vitals’;
// Measure and log LCP as soon as it's available. getLCP(console.log);

LCPスコアの解釈

Googleは、ウェブサイトの読み込み時間が2.5秒未満であれば「良好」と判断します。以下の表は、読み込み時間の値の範囲とそれぞれの評価をまとめたものです。

最大コンテンツペイントスコアの良い例 

以下のスクリーンショットは、赤い四角で囲まれた、良好なLCPスコアを持つSocialmediaexaminer.comを示しています。アーカイブされたウェブパフォーマンスレポート全文をご確認ください。 こちらWebPageTestツールによって生成されました。

改善できる最大のコンテンツペイントスコアの例

以下のスクリーンショットに表示されている LCP スコアは、公開された記事からのものです。 Forbes.comスコアは4.2秒で、SEOランキングに悪影響を与える値であり、改善が必要です。アーカイブされたウェブパフォーマンスレポート全文をご確認ください。 こちらWebPageTestツールによって生成されました。

「最大コンテンツペイント」スコアが低い原因は何ですか？また、どうすれば改善できますか？

本節では、LCPスコアが低い原因となる様々な問題点について説明し、それらを解決するための手順を示します。

1. サーバー応答が遅い 

ウェブサイトがホストされているサーバーがユーザーのリクエストに応答するのに時間がかかりすぎると、ユーザーエクスペリエンスが低下します。サーバーの応答時間は、Time to First Byte (TTFB) と呼ばれる指標を使用して測定できます。WebPage Test の用語集によると、「TTFB これは、最初のナビゲーション開始から、ベースページの最初のバイトがブラウザによって受信されるまでの時間（リダイレクト後）として測定されます。

TTFBが高いということは、サーバーが最大容量に近づいていることを示しています。Googleは、ウェブページのTTFBを一定に保つことを推奨しています。 TTFBは200ms未満であること.

次のスクリーンショットでは、赤い枠で囲まれた領域（First Byte Time）が表示されており、これは、ある記事が「グレードD」であることを示しています。 bbc.com/newsこれは、サーバーの応答時間に根本的なパフォーマンス上の問題があることを示唆している。

「First Byte」グレードをクリックすると、 詳細を見る （下記にも示されています）測定されたTTFB値と、この場合ウェブパブリッシャーが目標とすべき推奨値が含まれています。

どのようにそれを修正するには？

• サーバーパフォーマンスの向上
  サーバーのパフォーマンスを向上させる最もシンプルな解決策は、ホスティングプランをアップグレードすることです。ホスティングサーバーに過負荷がかかっている場合は、システム速度を低下させるボトルネック（トラフィック過多、ルーティングの遅延、CPUリソースの不足、データベースクエリの遅延、メモリ不足など）を解消して最適化する必要があります。
  サーバーの機能を最適化するには、以下の方法があります。
  • サーバーの数を増やす場合 現在のCPU使用率と予想されるCPU使用率が80%を超えています
  • 圧縮を有効にする サーバー構成を更新することでデータ転送サイズを削減する
  • 大容量ファイルの最適化 例えば、ヒーロー画像などを使用することで、ウェブサイトのサイズを迅速かつ大幅に縮小できます。
• コンテンツ配信ネットワークを有効にする 
  サーバーの応答時間（ひいてはTTFB）を改善するもう1つの方法は、ウェブページコンテンツの中で最も大きな要素（画像など）を、世界中のサーバーに複製するコンテンツ配信ネットワーク（CDN）にホストすることです。この方法では、ページの最も大きな要素はユーザーの地域に合わせたCDNからダウンロードされるため、読み込み時間が短縮されます。コンテンツ配信ネットワーク（CDN）の主な機能は、CDNプロバイダーが管理する広範なサーバーネットワークを通じて、ターゲットユーザーにコンテンツを迅速に配信することです。CDNは、負荷分散や画像圧縮にも役立ちます。
• ウェブサイトのキャッシュを有効にする
  コンテンツをキャッシュする （画像、テキストなど）をキャッシュすることで、ページの読み込み時間とサイトのTTFB（Time To First Byte）を短縮し、毎回ページを再読み込みする必要がなくなります。サーバーレベルでキャッシュ処理を行うか、キャッシュプラグインを使用することで実現できます。
  リクエストごとに変更する必要のない静的なHTMLの場合は、ブラウザのバックグラウンドで実行され、キャッシュされたコンテンツを優先的に配信するサービスワーカーを使用できます。ブラウザのキャッシュ機能を使用すると、ローカルCDNへの通常の往復通信よりも、最大のコンテンツフルペイントを高速に配信できます。
• 早期に第三者との連携を確立する
  ウェブサイトに動画やGoogleフォントなどのサードパーティースクリプトが含まれている場合、プリコネクト機能とプリフェッチ機能を使用することでこれを実現できます。この方法では、ユーザーが既に読み込まれたコンテンツを閲覧している間に、ブラウザがコンテンツを取得します。

属性 rel=”dns-prefetch” または rel=“preconnect” タグをブラウザに対して、あなたのウェブページが別のドメインに接続される予定であり、ユーザーがクリックする前にできるだけ早くこのプロセスを実行したいことを通知します。

<link rel=“preconnect” href=“https://example.com”/>
<link rel=“dns-prefetch” href=“https://example.com”/>

また、以下に示すように、Prefetch DNS は、Google Analytics、Google フォント、さらには CDN など、その他のさまざまな外部アセットにも使用できます。

<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//cdn.domain.com">

リクエスト経路における往復遅延を数千ミリ秒単位で削減することで、読み込み速度を向上させ、ユーザーのレンダリングブロック時間を短縮できます。 

具体的な例をいくつか挙げます。

動的URLの事前接続ヒント：

<link href='https://fonts.gstatic.com’ rel='preconnect’ crossorigin>

JavaScript を使用した事前接続のヒント:

function preconnectTo(url) {
    var hint = document.createElement("link");
        	hint.rel = "preconnect";
        	hint.href = url;
        	document.head.appendChild(hint);
}

2. レンダリングをブロックするCSSとJavaScript

ブラウザは、閲覧者がページを表示するためにレンダリングする前に、ページを構築するために必要な基本要素のみを必要とします。ページがレンダリングされた後に読み込まれるその他の要素やコード（JavaScriptやスタイルシートなど）は、Webページの表示に重要ではないとみなされます。重要でない要素の読み込みと処理は、ページのレンダリング時間を不必要に遅くします。この概念はレンダリングブロッキングと呼ばれ、Webサイトの読み込み遅延の一般的な原因です。ブラウザは、それが重要かどうかを判断する前に、まずダウンロードして処理する必要があるため、このプロセスを効率化するのはWeb開発者の仕事です。 bbc.com/news この記事の前半で紹介した例では、次のスクリーンショットにレンダリングをブロックするリソースが表示されています。

WebPageTestはブラウザのレンダリングプロセスを分析し、ブロックしているファイルを特定します。これにより、ページ読み込み時間を改善するためにこれらのファイルを処理できます。 こちら （「ウォーターフォールビュー」に移動してください）WebPageTestによって生成された詳細なアーカイブレポートには、ページ読み込みの遅延を引き起こしているCSSおよびJS要素が表示されます。

どのようにそれを修正するには？

JSファイルとCSSファイルの読み込みを遅らせることで、LCPスコアを向上させることができます。例えば、ウェブサイトに大きなJSファイルが多数含まれている場合でも、重要度の低いファイルの読み込みを遅らせ、最初に最小限のテキストを含むスライダーを読み込むようにすれば、レンダリングを妨げるCSSとJSの量を簡単に減らすことができます。

スクリプトを整理し、不要なサードパーティースクリプトをすべて削除してください。例えば、読者が共有しやすいようにブログに表示されるおなじみのソーシャルメディアバッジなどは、読み込みを遅延させるのに適した例です。レンダリングのブロックを改善するためのベストプラクティスのチェックリストを以下に示します。

• CSSを圧縮する
• 重要でないCSSを延期する
• インラインクリティカルCSSを遅延させる
• JSファイルをミニファイおよび圧縮する
• 未使用のJS要素を遅延して使用
• 未使用のものを削除するポリフィル

3. リソースの読み込みが遅い

場合によっては、最大のコンテンツペイント要素がユーザーのデバイス、ブラウザ、インターネット接続速度に対して重すぎることがあります。同じページがデスクトップでは高速に読み込まれるのに、遠隔地の古いスマートフォンでは遅くなることがあります。画像は通常、読み込み遅延の大部分を占め、LCPスコアに影響を与えます。たとえば、WebPage Testをこのページで実行します。 フォーブスの記事、そして下のスクリーンショットに示すように、非圧縮画像が読み込みの遅さの原因となっていることがわかります。下のスクリーンショットは、 [コンテンツ]タブ WebPageTestの結果ページにおいて、関連情報を赤い四角で囲んで強調表示します。

に行きます パフォーマンスタブ 詳細については、アーカイブされた WebPageTest (下記リンク) のテスト結果を参照してください。

クリックすることができます こちら 検討対象のForbes記事のLCPの低さに、これらの非圧縮要素が重要な役割を果たしていることの詳細を確認するには、こちらをご覧ください。 

どのようにそれを修正するには？

このような状況における最も簡単な解決策は、高解像度の大きな画像を圧縮・最適化することです。以下に、大きな画像を扱うためのベストプラクティスをいくつか示します。

• 大きな画像をサイトにアップロードする前に圧縮してください。
• サイトにアップロードした画像を圧縮するには、プラグインを使用してください。
• PNGやJPEGではなく、WebP形式で画像コンテンツを提供する
• できれば、適切なサイズの高品質でレスポンシブな画像を使用してください。

4.   遅延読み込みの問題

遅延読み込みはユーザーエクスペリエンスを向上させるためによく用いられますが、場合によっては、これらの技術がLCP（ライフサイクルパフォーマンス）を悪化させ、結果としてユーザーエクスペリエンスを損なう可能性があります。

ネイティブ遅延読み込み

ネイティブの遅延読み込みは2019年以来ブラウザの標準となっており、画像要素にloading="lazy"属性を使用するだけで簡単に有効にできます。 記事 Googleのウェブサイトに掲載されたこのトピックに関する記事によると、WordPressでホストされているウェブサイトの17%がこの機能を使用しているとのことです。ただし、LCPスコアに悪影響を与える可能性もあります。ヒーロー画像（サイズが大きいため最大のコンテンツペイントとして選択された場合）を含むウェブページ上のすべての画像がこの遅延読み込み動作を継承すると、ウェブページのLCPスコアが悪化します。

どのようにそれを修正するには？

ネイティブの遅延読み込み機能 距離を計算する ビューポートの表示部分から画像を除外することで、ファーストビューの画像を高速に読み込むことができます。ただし、このブラウザのネイティブ機能には、ビューポートからの距離に関係なく画像を即座に読み込むモード（「eager」モード）もあります。このモードは、loading="eager"属性を使用することで呼び出すことができます。この問題の簡単な解決策は、ヒーロー画像にlazyではなくeagerタグを付けるか、タグを付けずに通常の画像として読み込むことです。

JavaScriptを使用した遅延読み込み

カスタマイズされたJavaScriptを使用した遅延読み込みでは、ブラウザがまずJavaScriptを読み込んで実行し、その後画像を読み込む必要があります。最初のページ読み込み時に、大きなコンテンツペイントがビューポート内のヒーロー画像である場合、LCPは自然に長くなります。

どのようにそれを修正するには？

解決策は、最初の読み込み時にビューポート内にある画像を遅延読み込みしないことです。 NEデジタル まさにこの問題に直面し、有益な記事を書きました 記事 それについて。下の画像は、WebPageTest を使用して変更前後の読み込み時間を比較した方法を示しています。下の行は 7 秒で読み込まれますが、上の行は待機し、ヒーロー画像 (この場合は最大のコンテンツペイント) を最後の要素として遅延読み込みします。

5. クライアントサイドレンダリングの問題

クライアントサイドレンダリングとは、ウェブページをサーバー側ではなく、ユーザーのブラウザ上で完全に管理することを指します。大量のJavaScriptバンドルを使用したり、JavaScriptロジックが最適化されていない場合、LCP（ローカルコンテンツパフォーマンス）が低下する可能性があります。さらに、SVG、動画、画像などのリソースは、ファーストフォールド（スクロール前）より上にレンダリングされると、LCPに悪影響を与える可能性があります。

どのようにそれを修正するには？

• 重要なJavaScriptファイルを圧縮・最小化することで、JavaScriptのブロッキング時間を短縮します。
• 　サーバー側のレンダリング 可能な限りクライアントサイドレンダリングではなく、別の方法を採用する。
• 使用を検討する加速されたモバイルページ （AMP）を使用してアニメーションや重い要素を排除し、読み込み時間を短縮します。  
• 必要なリソースを事前にロードしてください（この記事の前のセクションを参照してください）。
• ブラウザの優先順位サービス労働者 のアセットのキャッシュ （キャッシュ処理を担当するバックグラウンドプロセス） 

まとめ

LCP（Largest Contentful Paint）は、ウェブサイトのページ読み込み速度を測定するCore Web Vitalsの基本要素の一つです。具体的には、ページの最後の要素がビューポートに表示されるまでの速度を測定します。ページの読み込みに2.5秒以上かかる場合は、LCPスコアの改善を検討する必要があります。改善には、この記事で紹介するオプションを利用できます。ただし、まずはWebPageTestを使用して、LCPスコアが低い根本原因を特定することをお勧めします。

よくあるご質問