LCPの測定方法と改善のヒント！

Web担当者であれば、LCPについて知っておく必要があります。

LCPってなんでしたっけ？

Webページの表示速度や読み込み時間を示すGoogleの指標だよ！

LCPとは、「Largest Contentful Paint」の頭文字をとったもので、SEOにおいて重要な指標の1つです。

Google Page Speed Insightの結果で表示され、どのような指標なのかわからない方も多いのではないでしょうか？

この記事では、「LCPはSEOと関係あるの？」「改善する方法がわからない」とお悩みの方へ、LCPの概要や測定方法から、低下の原因や改善方法まで、わかりやすく解説します。

サイト運営の現状課題
把握できてますか？

課題がわからないまま
施策を進めていませんか？
「簡易チェックシート」で
現状の課題を整理して
今後の対策を明確にしましょう！
（初心者の方でもすぐに見直せます！）

• サイト運営の全体像を俯瞰して確認できる
• 現状の課題がどこにあるか明確になる
• 今後やるべき施策の優先順位がつけやすい
• 初心者でも分かりやすい項目設定
• PDF形式だからいつでも手元で確認可能！

まずは現状把握から始めましょう！

課題を整理することで、
施策の効果を最大化する
ことにつながります！

無料配布中

無料ダウンロードは
こちらから

LCPとは

LCPとは、「Largest Contentful Paint」の頭文字をとったもので、日本語では「最大視覚コンテンツの表示時間」という意味です。

Webサイト内のすべてのコンテンツの表示にかかる速度ではなく、最も大きなコンテンツの表示速度や読み込み時間を指します。

LCPはSEOに大きく関係する、ユーザーエクスペリエンスの改善指標である、「コアウェブバイタル（Core Web Vital）」の１つです。

2021年にランキング要因に加えられた、Webサイトの健全性を示す「ウェブバイタル（WebVital）」の指標の中でも、特に重要な3つをコアウェブバイタルと呼んでいます。

LCPに加え、インタラクティブ性を示す「FID（First Input Delay）」と、視覚要素の安定性を示す「CLS（Cumulative Layout Shift）」がコアウェブバイタルです。

関連記事

コアウェブバイタルの概要とページ改善方法を詳しく解説！

こんな悩みを感じたことはありませんか？ コアウェブバイタル（Core Web Vitals）とは、Googleがユーザー体験を数値で評価するために導入した指標です。Webサイトの表示速度や操作性、視覚の安定性などが評価の…

LCPはさまざまな計測ツールを用いて判定し、2.5秒以内なら「Good（良好）」、4.0秒以内なら「Needs（改善が必要）」、4.0秒超なら「Poor（不良）」の、3段階のステータスで評価することで、改善の必要性を確認します。

LCPの数値が悪いと、ユーザーエクスペリエンスの悪いWebサイトだと、Googleが判断します。

マイナスの評価を受けてしまうと、検索順位に悪影響を与えてしまうため、改善に向けた取り組みが欠かせません。

LCPを測定する方法

LCPはどうやって測定するんですか？

LCPの測定にはツールを利用するのが一般的だよ！

こちらでは、主なツールを5つ紹介します。

tool 1
Lumar

世界的な有名企業も導入している「Lumar」は、高品質・高機能なテクニカルSEOツールです。LCPやCLSなどの現状分析ができます。

有料ツールとなっており、「ベーシックプラン」「エンタープライズ」の2つのプランが用意されています。

tool 2
PageSpeed Insights

無料ツールの「PageSpeed Insights」では、PCとモバイルのWebページの読み込み速度の計測が可能です。

使い方も簡単で、URLを入力するだけで、すぐに結果が表示されます。

例えば、「GMO順位チェッカー」で測定してみると、デスクトップの場合LCPは1.6秒で、結果は「合格」と表示されました。

LCP以外にも、「改善できる項目」や「診断」が表示されるため、改善すべき点が一目瞭然です。

tool 3
Googleサーチコンソール

自サイトがGoogleからどのように評価されているのかを分析できる「Googleサーチコンソール」でも、LCPの測定が可能です。

無料で利用可能なGoogle公式ツールで、コンテンツの表示速度や平均順位などが確認できます。

具体的な改善方法は提示されないため、PageSpeed Insightsなど他のツールを併用するのがおすすめです。

tool 4
Web Vitals

「Web Vitals」はGoogle Chromeの拡張機能です。

Webページを開くだけで、LCP・FID・CLSのコアウェブバイタルを自動で計測してくれます。chromeウェブストアで入手可能です。

tool 5
Lighthouse

「Lighthouse」もGoogle Chromeの拡張機能で、Webページのパフォーマンスを評価するツールです。

LCPに関わる要素として、Performanceの数値をチェックできます。

Googleサーチコンソールとは異なり、改善点の詳細を教えてくれます。chromeウェブストアでインストールするだけで、無料で利用可能です。

機能の差はもちろん、無料・有料の差もあるから、自社にあったツールを利用しよう！

LCP低下の原因

LCP低下の原因は主に4つ挙げられます。

cause 1
サーバーの反応が遅い

まず考えられるのが、サーバーの応答速度が遅く、反応に時間がかかることです。

サーバーからコンテンツを受信する時間が長ければ長いほど、内容を読み込んで画面に表示するまでに時間がかかってしまいます。

サーバーに負荷がかかるとその分応答速度が遅延してしまうため、スペックに問題ないかチェックが必要です。

cause 2
JavaScriptとCSSによるレンダリングブロックが多い

2つめの原因として挙げられるのが、JavaScriptとCSSによるレンダリングブロックが多いことです。

Webサイトを表示させる仕組みは、サーバーからレスポンスを受けて処理し、内容を読み込んで画面に表示（レンダリング）されます。

JavaScriptやCSSなどは、処理に時間がかかってしまう「レンダリングブロック」が生じてしまうため、LCPが低下してしまいます。

無駄なJavaScriptとCSSが多いと、レンダリングブロックも多くなるため、LCPの低下の原因となります。

cause 3
リソースの読み込み時間が長い

画像や動画、HTMLやCSSなどリソースの読み込み時間の長さも原因の1つです。

<img>や<video>、要素内の<svg><image></image></svg>などのリソースが多すぎるとLCPの低下を招くため、画像・動画の圧縮やコードの分割といった改善が必要です。

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

4つめの原因として挙げられるのが、クライアント側のブラウザの負荷が大きくなった場合に生じる、レンダリングの遅延です。

ブラウザは、JavaScriptエンジンでレンダリングしています。

そのため、大きいサイズのJavaScriptが多くなると、処理に時間がかかるため、LCPの低下を招いてしまいます。

LCPの改善方法

LCPが低下する原因が把握できたら、具体的な改善方法も確認しておこう！

こちらでは、比較的取り組みやすい、7つの方法を解説します。

METHOD 1
適切なサイズに画像を圧縮する

まず取り組みたいのが、画像の最適化と圧縮です。画像のサイズが大きすぎると、読み込みに時間がかかってしまいます。

スマートフォンで撮影した写真などはサイズが非常に大きいため、圧縮してから利用しましょう。

また、WordPressを使っている場合は、画像の最適化や圧縮を行ってくれる、プラグインの導入がおすすめです。

METHOD 2
次世代フォーマットを活用する

画像や動画の読み込み速度を速くするには、次世代フォーマットの活用が有効です。

一般的に、「JPG」や「GIF」「PNG」などの画像フォーマットが用いられていますが、「JPEG 2000」や「JPEG XR」「WebP」など次世代フォーマットを活用すれば、より速く表示できます。

METHOD 3
不要なJavaScriptとCSSを削減する

JavaScriptとCSSは処理に時間がかかるため、不要な部分を削除することで、読み込み速度を速くできます。

削除するには、JavaScriptは「Flying Scripts by WP Speed Matters」などのWordPressのプラグイン、CSSは「UnCSS Online」などのWebサービスの活用をおすすめします。

METHOD 4
JavaScriptとCSSを最小化する

JavaScriptとCSSのコードの圧縮も欠かせません。

コードには、スペースやコメントが含まれていますが、これはあくまでも人が内容を理解するために記述しているものです。

ブラウザには必要ないため、削除できる箇所は削除していきましょう。

METHOD 5
Lazy Loadを実装する

「Lazy Load」とは、必要に応じて画像を時間差で読み込んで表示させ、画面表示の高速化を図る「遅延ロード」を行う、JavaScriptのライブラリです。

Webページの画像をすべて読み込むには時間がかかるため、画面の外の画像を読み込まないことによって、より速く画面を表示させます。

Lazy Loadを実装すれば、遅延ロードの処理を簡単に行えます。

METHOD 6
画像をCDNで配信する

画像をCDN配信することでも、LCPの改善が可能です。

CDNとは「Content Delivery Network」の頭文字をとったもので、画像や動画などのコンテンツを、高速かつ効率的に配信するサービスです。

画像をCDNで配信すれば、より早く表示できるため、データのダウンロードの安定化や、表示速度の向上につなげられます。

METHOD 7
サーバーの応答速度を速くする

LCPを改善するには、サーバーの応答速度を速くすることも効果的です。

さまざまな方法がありますが、最も手っ取り早いのが、サーバーのスペックアップです。

サーバーが古かったり、スペックが不足していたりする場合は、乗り換えを前向きに検討しましょう。

改善時に注意したい2つのポイント

LCPを改善するうえで注意したい、2つのポイントを解説します。

point 1
改善する前に必ずバックアップする

最も注意しなければならないのが、事前のバックアップです。

特にコードを上書きする際などは注意が必要だよ！

バックアップがとれていないと、トラブルがあった場合にもとに戻すことができません。そのため、別の場所でバックアップを管理するようにしましょう。

point 2
WordPressのプラグインを入れすぎない

WordPressのプラグインは、さまざまな機能を追加できる非常に便利なものですが、入れすぎると更新などの作業に、余計な手間と時間がかかります。

また、プラグインによってはセキュリティが不十分なものもあり、情報が漏えいする恐れもあるため、追加する際には本当に必要なものだけを厳選しましょう。

まとめ

どんなに良質なコンテンツでも、スムーズにWebサイトが表示されなければ、ユーザーが離脱する可能性が高まりますので、LCPの改善が欠かせません。

コアウェブバイタルの中でもLCPは、ツールやプラグインを活用することで、改善しやすい特徴があります。

現在では、無料で利用できるツールやプラグインも多くありますので、Webサイトの改善にぜひ活用してみてください。

ただし、プラグインを入れすぎると、情報漏えいなどのセキュリティのリスクが高まったり、Webサイトの更新や機能を追加する際に手間と時間がかかったりしますので、闇雲にプラグインを入れるのではなく、必要に応じて厳選して入れましょう。