LCPの問題とは：スコアの確認方法、改善方法を解説します

こんにちは、Webサイト分析ツール「アナトミー」開発チームの宇都宮です。

Googleのサーチコンソール内のCore Web Vitalsレポートでは、ユーザーエクスペリエンスの測定状況を確認することができます。問題があると、低速であり改善が必要とされるページが指摘されることがあります。当記事では、Core Web Vitals の中の指標の一つ、LCP（Largest Contentful Paint）に着目して、指標の概要と確認方法、改善方法を実際のページを計測した結果を例にしながら解説していきます。

LCP（Largest Contentful Paint）とは

LCPは Largest Contentful Paint の略語で、ページのメインコンテンツが読み込まれる（ユーザーに認識される）までの速度を測定したスコアです。通常、LCPはビューポートに表示される最も大きな画像またはテキスト ブロックがレンダリングされるまでの時間を表します。LCPが優れていると判定されるためには、2.5秒以下 にする必要があります。また、サイトのページビューの 75% 以上が「良好」のしきい値を満たしていれば、そのサイトはその指標のパフォーマンスが「良好」に分類されます。これはアクセスするデバイスやネット接続環境によって差が出るため、75％というしきい値が設定されていると考えられます。

LCP の確認方法

では、実際に LCP の値を確認してみましょう。LCP はGoogleが提供する計測ツール「PageSpeed Insights」で計測することができます。ツールにアクセスして計測対象のURLを入力するだけでLCPの値を確認することができます。

試しに弊社が運営しているレンタルサイクル事業 RIDEAWAY の ホームページを測定してみましょう。PageSpeed Insightsを開き、画面上部のテキストボックスにURLを入れ計測ボタンをクリックします。数十秒で結果が表示されます。

実際のユーザーの環境で評価した結果を見ると、2.5秒！ 2.5秒以内であればLCPが優れていると判定されるため、ギリギリでした。

測定結果をスクロールしていくと、詳細な測定結果を確認できます。この測定結果では19.8秒と表示されました。これは意図して低速なモバイル回線をエミュレーションして計測したため、実際のユーザーの環境で測定した結果より悪い数値が表示されています。

次に関連する監査を表示 のリンクでLCPを選択し、「最大コンテンツの描画」要素を開いてみましょう。ここでは、PageSpeed Insightsがページ上のどの要素を LCP（最も大きな要素）と認識しているか確認することができます。このページでは、ファーストビューの背景に表示されているスライダーの画像がLCPとして認識されていました。ページを開いたときに最初に目に入るコンテンツなので違和感はないですね。

LCP の改善方法

LCP改善の最初のステップは、コンテンツのどの部分がLCPと認識されているか特定することです。通常はファーストビュー内の画像かテキストが表示されますのが、画像かテキストかによって必要な対処が変わってきます。前述のPageSpeed Insightsを使って最大コンテンツがどこか確認してみましょう。

画像サイズの調整

最大コンテンツが画像の場合は、まずは画像サイズが適切かどうか、削減する余地がないか検討してみましょう。モバイル向けのサイトにも関わらず、素材そのままの異常にサイズが大きい画像が使われていることがあります。そういったケースに該当する場合は、まずはサイズを調整してみましょう。

画像圧縮ツールの活用、画像形式の変更

画質を極力損なわずに（人間の目で見て判別できない程度）に保ちながら、ファイルサイズを削減するツールの利用を試してみるのも一案でしょう。また、WebPという画像形式に変換する手もあります。WebPはJPEGやPNG形式の画像と比べて、画質を損なわずにファイルサイズを軽量化できるGoogle社が開発した画像形式です。

リソースに与えられる優先度を最適化する

画像を配置するための img要素に fetchpriority 属性を指定することで、リソースの読み込み優先度を上げることができます。HTML上の記述方法の調整として試すことができます。

<img fetchpriority="high" src="/path/to/hero-image.webp">

fetchpriority はまだ一部のブラウザではサポートされていません。実装する際はブラウザのサポート状況も確認が必要です。下記サイトでは主要ブラウザのサポート状況を確認することができます。

https://caniuse.com/mdn-html_elements_img_fetchpriority

ウェブフォントの読み込みタイミングを見直す

LCPがテキストで、システムフォントではなくウェブフォントを利用している場合は、ウェブフォントの読み込みに時間がかかっている可能性もあります。ウェブフォントのサイズや読み込みタイミングは適切かも見直してみるべきポイントになります。

要素のレンダリングを遅延させる原因を排除する

LCP要素より前に記述されている CSS や JSコードが LCP要素のレンダリングをブロックするというのもよくある例です。このような記述がないかHTMLソース全体を見直してみても良いでしょう。

まとめ

サーチコンソールで表示される LCPの問題について解説してきました。LCPの改善はユーザーが認識し易い要素の表示速度に関わるので、ユーザーエクスペリエンスの向上にもつながります。この記事で紹介したスコアの確認方法や改善方法が参考になれば幸いです。

弊社ではサーチコンソールとGA4データを1つにまとめて分析ができる「SEO分析ツール アナトミー」 を提供しております。運用しているサイトのSEOチェックを行うのに必要な機能が揃ったダッシュボードプランは全て無料でずっとご利用いただけます。是非、アナトミーに無料登録してサイトのSEOチェックをしてみてください。