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

コンテンツライティングチェックシート【30項目】
今すぐ無料ダウンロード
コンテンツライティングチェックシート【30項目】
今すぐ無料ダウンロード

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

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

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 ヘルプ

 

良好

改善が必要

低速

LCP

2.5 秒以下

4 秒以下

4 秒を超える

そして、このように数値が定義されているため、最高スコアを目指す場合には、ユーザーがクリックしてから、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つでコアウェブバイタルの最適化が進められているかを判断できます。ダウンロード方法は次のとおりです。

  1. Chromeウェブストアで「Web Vital」を検索・追加する
  2. 「拡張機能を追加」をクリックする
  3. サイトを表示する
  4. Chrome右上にあるWeb Vitalアイコンをクリックする

PageSpeed Insights

引用:PageSpeed Insights

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

Lighthouse

引用:Lighthouse

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

  1. Chromeウェブストアで「Lighthouse」を検索・追加する
  2. 「拡張機能を追加」をクリックする
  3. サイトを表示する
  4. Chrome右上にあるLighthouseアイコンをクリックする

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

LCPが低下する理由

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

読み込み時間の増加

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

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

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

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

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

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

LCPの低下を改善する方法

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

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

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

  1. 画像の最適な解像度を選択し、必要以上に高解像度の画像を使わないようにする。
  2. 画像を圧縮してファイルサイズを減らす。
  3. モバイルデバイス用に適切なサイズの画像を用意する(レスポンシブデザインを活用)
  4. 画像の遅延読み込み(lazy loading)を実装して、画面に表示される直前まで読み込みを遅らせる。

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

コードを圧縮する

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

  1. CSSとJavaScriptの圧縮:ツールを使用してコードを圧縮し、不要な文字を削除する。
  2. 使用していないコードの削除を行う: Flying Scripts by WP Speed Mattersが便利です。

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

Lazy Loadを設定する

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

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

  1. Lazy Loadのscriptタグを配置する
  2. imgタグにclass=”lazyload”とdata-src属性を記述する
  3. lazyload()関数を呼び出す

テキストを圧縮する

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

Gzip圧縮:ウェブサーバーでGzip圧縮を有効にし、テキストファイルを圧縮する。

ミニファイ:CSSやJavaScriptファイルの不要なスペースや改行を削除してファイルサイズを縮小する。

サーバーを見直す

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

  1. サーバーのスペックをアップグレードする。
  2. キャッシュを最適化して、再アクセス時のロードを高速化する。
  3. CDN(コンテンツデリバリーネットワーク)を利用して、コンテンツを近いサーバーから提供する。

AMPを採用する

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

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

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

まとめ

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

成果に直結する、オウンドメディア立ち上げサービス