LCPは、ユーザーに優れたユーザーエクスペリエンス（以下UX）を実現するための核になる、コアウェブバイタルの３指標の一つです。今回は、コアウェブバイタルの概要とLCP、測定ツールと確認方法、LCPの低下要因と改善方法について紹介します。

イノーバでは、「サイトからお問い合わせやコンバージョンを創出したい」とお考えの方へ、BtoB企業専門のWEB サイト制作サービスを提供しています。よろしければご覧ください。

※（5/14更新）今月予定されていた、コアウェブバイタルを含むページエクスペリエンスアップデートの延期がGoogleより発表されました。詳細は以下の記事よりご覧ください

⇒Googleがぺージエクスペリエンスアップデート延期発表！今後の予定・変更点は？

コアウェブバイタル（Core Web Vitals）の概要

コアウェブバイタル（Core Web Vitals）は、2021年5月からグーグルの検索ランキング要因に新しく組み込まれる予定の3つの指標です。コアウェブバイタルは、ウェブバイタル（Web Vitals）の中でも核（Core）となる重要な指針、「LCP」「FID」「CLS」をさします。

画像引用元：Web Vitals の概要: サイトの健全性を示す重要指標

ウェブバイタル（Web Vitals）とは、
“ウェブで優れたユーザーエクスペリエンスを実現するために重要だと思われる品質シグナルの統合ガイドを提供する取り組みです。”
引用元：Web Vitals の概要: サイトの健全性を示す重要指標

この3つの指標は、グーグルがUXで核になると考えるユーザーの重要なニーズ「読み込み時間（LCP）」「インタラクティブ性（FID）」「ページコンテンツの視覚的な安定性（CLS）」に対応しています。    

LCPとは

コアウェブバイタルの３指標の中で、ユーザーの「読み込み時間」のニーズに対応するのがLCPです。LCPはLargest Contentful Paintの略で、「最大コンテンツの描画」の意味があります。

LCPは、サイトページ内でメインとなる最も大きな動画や画像、コンテンツブロックが表示されるまでの待機時間を表します。ユーザーにURLが読み込まれていることが伝わるという点で、重要となる指標です。

“Largest Contentful Paint は、ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。”

引用元：Web Vitals の概要: サイトの健全性を示す重要指標

LCPは、ページ読み込みから、2.5秒未満が「良好」、4秒以下は「改善が必要」、4秒を超えると「不良」と判断されます。

測定ツールと使い方

グーグルは、コアウェブバイタルの測定ツールを各種提供しています。それぞれのツールでのLCPの確認方法を紹介します。

Search Console

画像引用元：Core Web Vitals report Search Console checks site speed

ホームページ全体のコアバイタルの３指標傾向と問題があるURL が分かります。

３指標は「良好: Good」「改善が必要: Need Improvement」「不良: Poor」の３段階で判定表示されます。

分析したいホームページをSearch Consoleに登録し、左サイドメニューバー「拡張: Enhancements」の中にある「ウェブに関する主な指標: Core Web Vitals」を選択します。表示されるのは、実際のユーザーから取得したフールドデータで分析されたレポートです。

レポートの詳細で「不良: Poor」にLCPがないか確認し、問題があれば、そのページURLを調べます。「改善が必要: Need Improvement」のURLは改善の余地がありますが「不良: Poor」より重要度は下がるため、「不良: Poor」のURLを全て修正してから、「改善が必要: Need Improvement」の問題に対処するのがオススメです。

具体的な問題箇所は提示されないので、詳しい問題点と改善策は、次に紹介するPageSpeed Insightsで問題が検出されたページの共通点を分析して確認します。

PageSpeed Insights

PageSpeed Insightsにアクセスし、調査したいホームページのURLを入力して、分析をクリックします。

表示されるLCP（Largest Contentful Paint）の数値が、グーグルが設定する目標数値内かを確認します。
データは、ラボデータとフィールドデータで確認できます。フィールドデータは実際のユーザーから取得したデータ、ラボデータは特定の環境で取得したテストデータです。さらにその下にあるLCPに関係する問題点と改善提案を参照します。

Light House

Light Houseには、Chrome拡張機能やコマンドラインツールとして実行する方法があります。（※画像はChrome機能拡張での操作画面です。）

Performanceの下にある、Largest Contentful Paintを参照し、LCPが目標数値内かを確認します。

Web Vitals (Google Chrome拡張機能)

機能拡張を有効化し、Chromeブラウザで計測したいサイトのページを開いて測定すると、結果が表示されます。LCPが目標数値内かを確認します。

LCPの低下要因

表示速度は、データ生成・データ転送・受け取ったデータの描画の３つのフェーズから成り立ちます。LCPの一般的な低下要因には次のようなものがあげられます。

●  サーバー応答時間が長い

●  JavaScriptやCSSのレンダリングブロック

●  リソースの読み込み時間が遅い

●  クライアント側のレンダリングが遅い

LCPの改善方法

サーバー応答時間の改善

サーバーの応答時間の改善には、サーバー応答速度を測る指標のTTFB (Time to First Bite)が参考になります。TTFBは、サーバーからブラウザに最初の１バイトが到着するまでの時間です。厳密にはサーバーの応答時間ではありませんが、近い数値として参照します。
TTFBは、グーグルが提供するPageSpeed InsightやChrome Dev Toolなどで確認できます。

PageSpeed Insightでは、サーバー応答時間短縮への警告は、リクエストに対して最初のレスポンスが600ミリ秒以上かかる時に発生します。サーバーの応答時間の改善では、以下のような施策をおこないます。

●  サーバーを最適化

●  ユーザーから地理的に近いCDNを活用する

●  キャッシュの活用

●  サードパーティの接続時間を早める

JavaScriptやCSSからのレンダリングブロックの削除

JavaScriptやCSSは、レンダリングブロックの一因になります。改善では以下のような施策を行います。

●  コード内のスペースやコメント削除によるJavaScriptやCSSの最少化

●  不要なJavaScriptやCSSファイルの削除

●  初期の読み込みで不要なものは非同期で読み込む

●  JavaScriptの調整

リソースの読み込み速度の改善

多くの場合、読み込み速度に影響を与えるのが画像です。
PageSpeed Insightsでサイトを測定した際に、「改善できる項目」で「次世代フォーマットでの画像の配信」と表示されることがあります。

次世代フォーマットとは、JPEG2000、JPEG XR、WebPなどの画像フォーマットのことです。
グーグルでは、これらの画像フォーマットを推奨しています。しかし、これらのフォーマットは全てのブラウザでサポートされているわけではないので注意が必要です。対策には、画像の圧縮やレスポンシブ画像の使用などがあげられます。

他にも、読み込み速度にはJavaScriptやCSS以外のリソースも影響を与えます。改善では以下のような施策を行います。

●  画像の最適化と圧縮

●  不要な画像を減らす

●  重要なリソースをプリロード

●  テキストファイルの圧縮

●  Adaptive servingを活用する

●  Service Workerを使ったキャッシュ利用

クライアント側のレンダリング速度の改善

クライアント側のレンダリング速度の改善には、以下のような施策をおこないます。

●  JavaScriptの最小化

●  JavaScriptの非同期化

●  サーバーサイドレンダリングを使用する

まとめ

表示速度の遅いWebサイトページは、ユーザーを苛立たせ離脱させてしまいます。せっかく時間をかけて、魅力のあるコンテンツページをつくっても、ユーザーが中身を見ることなく離脱してしまえば意味がありません。各種ツールを活用しながらLCPを改善することで、UXの向上が期待できます。LCPだけチェックしていればよいわけではなく、その他の指標も監視・改善していく必要がもちろんありますが、近くSEOのランキング要因に組み込まれる指標となるため、ツールの使い方などには早くから慣れておきましょう。

弊社では、見込み客の獲得・商談の創出を可能にする、BtoB企業専門のWEB サイト制作サービスを提供しております。ホームページ制作やリニューアル、分析に興味がございましたらご一読ください。