コアウェブバイタルのLCPとは？　SEOで重要視されている理由や具体的な施策を徹底解説！

LCPはコアウェブバイタルの3つの指標のうちの１つであり、ページの表示速度や読み込み時間を表す指標です。LCPを改善することで、多くの方に安心して閲覧してもらえるサイトが作れるため、サイトを運営している方にとって、改善は必要不可欠なポイントでしょう。

とはいえ、LCPについて深く理解していなかったり、どのように改善していけば良いかがわからなかったりと悩む部分は多いのではないでしょうか。今回は、LCPの概要から測定方法、改善方法などについて紹介します。LCPについて理解を深めたい方は、ぜひ参考にしてみてください。

SEOとは？SEO対策で上位表示する効果的な施策と事例

💡こちらの記事は、当メディアPINTO!内で扱っているSEO対策に関する記事をすべて網羅している、いわば教科書のような記事です。いつでも戻って来れるように、ブックマークしておくことをおすすめします！第１章：SEO対策とは…

LCPとは？

参考：https://web.dev/articles/lcp?hl=ja

LCP（Largest Contentful Paint）は、ウェブページの表示速度や読み込み速度を測定するための指標です。具体的には、ユーザーがページ上で最大のコンテンツ要素である、テキスト、画像、動画などを見るまでにかかる時間を計測します。

LCPは、ユーザーエクスペリエンスを向上させるために重要であり、ページの表示が遅い場合には改善が必要となります。ウェブの運営者はLCPを改善するために、コンテンツの最適化やサーバーのパフォーマンス向上などの手段を検討することが重要です。

LCPはSEOに影響を与える？

LCP（Largest Contentful Paint）はSEOに影響を与えます。なぜなら、ページのコンテンツが遅延なく迅速に表示されることは、ユーザーの満足度を高めるために重要な指標であり、検索エンジンは優れたユーザーエクスペリエンスを提供するサイトを優先的に評価し、ランキングを向上させる傾向があるからです。

Googleはユーザーエクスペリエンスを重視しており、ウェブページの読み込み速度が遅い場合、ランキングに悪影響を及ぼす可能性があるので、極端にLCPのスコアが低い場合には、改善策を取る必要があるでしょう。

LCPを測定する方法

GoogleはLCPについて以下のように説明しています。

レポートに表示されるグループ LCP は、グループ内 URL へのアクセスの 75% が LCP 状態になるまでに要した時間です。

引用：ウェブに関する主な指標レポート – Search Console ヘルプ

そして、このように数値が定義されているため、最高スコアを目指す場合には、ユーザーがクリックしてから、2.5秒以下で表示される状態を目指しましょう。

LCPを測定するのに活用できるツール

次に、LCPを測定する際に役立つツールを紹介します。

Googleサーチコンソール 

引用：Googleサーチコンソール

Googleサーチコンソール は、Googleが公式で提供しているツールです。GoogleがどのようにWebサイトを評価しているのか、そのヒントを与えてくれるため、より良いサイトを提供したいと考えるサイト運営者は必ず導入すべきツールだといえます。

LCPの計測は、ウェブに関する主な指標の機能を活用することで確認可能です。良好・改善が必要・不良の3段階で数値が表示され、問題点を示してくれるため、参考にすると良いでしょう。ただし、具体的な改善策については提示してくれないため、Google公式が提供するツールで改善策を知りたい場合には、後述するPage Speed insiteを活用することをおすすめします。

Web Vital

引用：Web Vital

Web Vitalは、Chromeの拡張機能です。導入することで、開いているページの表示速度を自動で計測してくれます。また、コアウェブバイタルで重要視されているFIDとCLSも計測してくれるため、このツール1つでコアウェブバイタルの最適化が進められているかを判断できます。ダウンロード方法は次のとおりです。

PageSpeed Insights

引用：PageSpeed Insights

PageSpeed Insightsは、Web上でページスピードを測定できるツールです。無料で利用でき、URLを入力するだけでそのページのLCPなどを把握できます。URLを入力すれば良いため、自社サイトだけでなく他社サイトの数値を確認することもできます。ただし、アクセス数が多くないサイトの場合は、うまく数値が表示されないため、他のツールを活用することが大切です。

Lighthouse

引用：Lighthouse

LighthouseはLCPスコアをワンクリックで確認できるChromeの拡張機能です。コマンドラインツールとして活用する方法もありますが、拡張機能として利用する方が使い勝手が良いため、そちらの方法をおすすめします。拡張機能のインストール方法は次のとおりです。

こちらからダウンロードすることで、ワンクリックでLighthouseを利用できます。

LCPが低下する理由

次に、LCPが低下してしまう理由について4つ紹介します。

読み込み時間の増加

読み込み時間が増加するのには、主に3つの理由があります。1つ目は、大きなファイルサイズの画像や動画などの重いコンテンツを使用することです。2つ目は、遅延するサーバー応答やネットワークの遅延が原因です。3つ目は、JavaScriptの処理が時間を要している場合があります。

これらの要因はユーザー体験を悪化させ、検索エンジンのランキングにも影響を与えます。LCPの低下を改善するには、コンテンツの最適化や効率的なサーバー処理、ネットワークの最適化が重要です。

サーバーの応答時間がかかる

通常、ユーザーのブラウザがリクエストを行い、サーバーが反応する形でWebページが表示されます。1人がアクセスするだけであれば問題はありませんが、同時に多数のユーザーがアクセスし続ける場合、サーバーの反応に時間がかかってしまうため、表示速度も遅くなってしまいます。

レンダリングに時間がかかる

Webサイトはレンダリングを経て表示されますが、JavaScriptやCSSによってレンダリングをブロックしてしまうケースがあります。つまり、不要なJavaScriptやCSSがある場合に、処理に時間がかかるため、LCPの低下につながってしまうのです。

LCPの低下を改善する方法

LCPの低下によって、ユーザビリティが下がってしまうことも考えられます。LCPを改善するには、どのようなポイントに着目すれば良いのでしょうか。ここでは、LCPの改善方法を6つ紹介します。

適切なサイズの画像を使用する

LCPの低下を改善する方法として、適切なサイズの画像を使用することが重要です。大きすぎる画像は読み込み時間を増加させ、ページの表示速度に悪影響を及ぼすため、対策が必要です。適切なサイズの画像を選択するには、次のような方法があります。

適切な画像を使用することで、ページの読み込み時間を短縮し、LCPを改善できます。

コードを圧縮する

LCPの低下を改善する方法として、コードを圧縮することが効果的です。不要なスペースや改行を削除したり、長いコードを最適化したりすることで、ファイルサイズを減らし、読み込み時間を短縮できます。コードを圧縮する方法としては次のようなものが挙げられます。

これらの方法により、ウェブページのパフォーマンスが向上し、ユーザーエクスペリエンスが向上します。LCPの改善はSEOにも寄与し、ランキング向上にも役立つでしょう。

Lazy Loadを設定する

LCPの低下を改善する方法として、「Lazy Load」を設定することが効果的です。Lazy Loadは、画像や動画などのコンテンツをページが読み込まれる際に全て一度に読み込むのではなく、ユーザーがスクロールしてそれらのコンテンツが表示される直前まで読み込まない方法のことです。

こちらを設定することで、ページの初期読み込み時間を短縮し、LCPを改善できます。設定したい場合は、次の操作を行いましょう。

テキストを圧縮する

テキストを圧縮することも効果的です。HTML、CSS、JavaScriptなどの形式で記述されているテキストファイルを圧縮することで、ファイルサイズを削減し、読み込み時間を短縮できます。主な方法としては、次のようなものがあります。

サーバーを見直す

サーバーのパフォーマンスが遅いと、ウェブページの読み込み時間が長くなりLCPが悪化します。具体的には、以下のような対策を取るのがおすすめです。

AMPを採用する

LCPの低下を改善する方法として、AMP（Accelerated Mobile Pages）を採用することが有効です。AMPはGoogleが提唱するフレームワークであり、導入することで素早く表示できるサイトを目指せます。

AMPは軽量なHTML、CSS、JavaScriptを使用し、ページの読み込み時間を短縮可能です。また、AMP対応ページは検索結果の上位に表示されやすく、ユーザーエクスペリエンスの向上とSEO対策においては高い効果を発揮します。ただし、AMPは一部の制約があるため、ページデザインや機能を最適化する必要があります。

AMPについては別記事でも紹介しています。

AMP対応とは｜記事タイプ別に徹底解説。SEO対策上の優位性は？

現代のメディアでは「必須の取り組み」とされているSEO対策。SEOの知識は、長期的に安定したユーザーを獲得するために、必要不可欠です。今回は数あるSEO対策の中でも、2016年の2月に導入された「AMP」の対応についてご…

まとめ

今回は、LCPの概要から測定方法、改善方法などについて紹介しました。LCPを改善することで、サイトの表示速度が向上し、サイトの滞在時間やPVを延ばせるなどのメリットがあります。今回紹介した内容も参考に、コアウェブバイタルのLCP改善について考えてみてください。