LCPは、ページ内で最も大きいコンテンツの読み込みにかかった時間を示す指標です。Webサイトのユーザー体験を数値化したCore Web Vitalsの要素として、SEOにおいても重要な値です。
しかし、定義や重要な理由がわからない方も多いのではないでしょうか。
この記事では、LCPがSEOに重要な理由や低下の要因、改善方法を解説していきます。Webサイトのユーザー体験を向上させたいと考えている方は、ぜひ参考にしてください。
＜SEO対策について詳しく知りたい方はこちら＞SEO対策とは？SEO対策のメリット・デメリットと対策方法を詳しく解説
目次
LCPとは？
LCPは、ユーザー体験を数値化した指標であるCore Web Vitalsの1つです。Largest Contentful Paintの略で、ページ内で最も大きいコンテンツの読み込み時間を表します。
LCPは、2.5秒以内に収めるのが理想とされており、4秒を超えるとユーザー体験の質が低いと判定されます。
SEOにも悪影響を与えるため、LCPが低下している場合は早急な改善が必要です。
Core Web Vitalsとは？
Core Web Vitalsは、以下3つの要素で構成されるWebサイトのユーザー体験を数値化した指標です。
| LCP（Largest Contentful Paint ） | 読み込み時間 |
| FID（First Input Delay） ※2024年3月から「INP」に変更 |
インタラクティブ性 |
| CLS（Cumulative Layout Shift ） | 視覚的安全性 |
Googleは、優れたユーザー体験を提供しているWebサイトを上位に表示します。そのため、文章の内容だけでなくデザインや読み込み速度、操作性なども考慮したサイト設計が求められます。
しかしユーザー体験は抽象的な概念であるため、闇雲に施策を打っても効果は出ません。
そこでCore Web Vitalsに沿ってサイトを改善していけば、確実にユーザー体験の向上が可能です。SEOにおいて必須項目であるため、必ず抑えておきましょう。
LCPの改善がSEOに重要な理由
Core Web Vitalsは、2021年6月に実装されたページエクスペリエンスアップデートにより、SEO評価の1つに加えられました。
つまり、LCPはSEOに直接影響を与えます。また、読み込みに時間がかかるページはユーザーにストレスを与えます。間接的にもSEOに悪影響を与えるため、数値が悪い場合は早急に改善を図りましょう。
LCPが低下する原因
LCPが低下する原因は、以下の5つです。
- 画像のファイルサイズが大きすぎる
- 画像を多用している
- JavaScriptを多用している
- ユーザー側のレンダリング速度が遅い
- サーバーのスペックが低い
それぞれ詳しく解説していきます。
画像のファイルサイズが大きすぎる
画像のファイルサイズが大きいとサーバーに負荷がかかるため、表示速度が遅くなります。
特にメインビジュアルなど、ファーストビューに設置している画像のサイズが大きいと、LCPの低下に直結します。コンテンツ内の画像を全て見直し、1MB以上など極端に大きなサイズのものがないか確認しましょう。
画像を多用している
画像を多用している場合、ページの読み込みに時間がかかることから、LCPが低下する恐れがあります。
しかし、テキストだけのコンテンツは単調で読みづらいため、ユーザビリティが下がります。そのため、適度な画像の使用はSEOにも重要な要素です。
JavaScriptやCSSを多用している
Webページの表示には、ブラウザやサーバーでのレンダリングが必要です。
レンダリングは、Webサイトを構成するプログラミング言語で作られたテキストファイルを、人間用に変換する処理のことです。レンダリングによってJavaScriptやCSSの実行・解析が行われ、Webサイトの装飾やアニメーションが表示されています。
そのためJavaScriptやCSSを多用していると、サーバーやブラウザに負荷がかかります。コンテンツの読み込み速度が低下するため、不要な記述や処理がないか見直しましょう。
ユーザー側のレンダリング速度が遅い
多くのWebサイトは、ユーザー側のブラウザでJavaScriptを使ったレンダリングが行われます。
そのため、容量が大きなJavaScriptを使っていると実行に時間がかかり、読み込み速度の低下につながります。
サーバーのスペックが低い
Webサイトは、ユーザー側のブラウザからの要求に応じて、必要なファイルをサーバーが返すことで表示されます。
そのため、処理速度が遅いサーバーを使っていると応答に時間がかかり、ページの表示速度も低下します。
LCPの改善方法
LCPを改善する方法は以下の5つです。
- サーバーのスペックを上げる
- JavaScriptやCSSの見直しを行う
- 画像を圧縮する
- 不要な画像を削除する
- ユーザー側のレンダリングを減らす
それぞれ詳しく解説していきます。
サーバーのスペックを上げる
サーバーのスペックを上げれば、Webサイト全体の表示速度が早くなるため、LCPの改善も見込めます。
また、レンタルサーバーを利用している場合は、プランを変更するだけで向上できます
JavaScriptやCSSの見直しを行う
JavaScriptやCSSが多いと、レンダリングに時間がかかります。記述を見直し、以下のような対応を行いましょう。
- 不要な処理の削除
- 重要度の低い装飾の削除
- 冗長な記述の簡略化
- より動作が軽い代替記述に置き換え
- スペースや改行の削除
スペースや改行はユーザーの可読性を上げるための処理であり、コンピューターには不要です。Web上のツールなどを使えば簡単にファイルを圧縮できるため、お試しください。
画像を圧縮する
ギャラリーページなど、画像のクオリティにこだわりたい場合を除き、Webコンテンツの画像サイズは500KB程度で十分です。
また、サイズが大きな画像を多用していると、サーバーに負担がかかり、サイト自体の表示速度も低下する恐れがあります。Web上の画像圧縮ツールなどを用いて、できるだけ小さくしましょう。
不要な画像を削除する
ページ内の不要な画像を削除することで、サーバーの動作が軽くなり、LCPも改善することがあります。
画像があると視認性が上がるため、全て削除するのはおすすめしませんが、必要最低限になるように調整してみましょう。
ユーザー側のレンダリングを減らす
ユーザー側のレンダリングに時間がかかっている場合、以下2つの方法が有効です。
- 重要度が低いJavaScriptの処理を後回しにする
- サーバーサイドレンダリングを使う
重要度が低いJavaScriptを後回しにすれば、コンテンツの表示に必要な処理が優先的に実行されるため、LCPの改善が見込めます。
またサーバーサイドレンダリングを使えば、レンダリング処理がユーザーの閲覧環境に左右されなくなります。
ただし、自社サイトのサーバーのスペックが低い場合、逆効果になることもあるため注意しましょう。
LCPの確認方法
LCPは、Googleが提供している以下2つのツールで確認できます。
- PageSpeed Insights
- Googleサーチコンソール
どちらも無料で使えるため、必ず活用しましょう。
それぞれの使い方を詳しく解説していきます。
PageSpeed Insights
PageSpeed Insightsはページの表示速度を測定するツールです。以下の流れで、LCPを含む6つの指標と改善点が確認できます。
- PageSpeed Insightsを開く
- 検索窓にURLを入力し「分析」をクリック
- 表示された指標やスコアを確認
PageSpeed Insightsでは、問題点はもちろん、よりよくするためのポイントも確認できるため、定期的に活用しましょう。
Googleサーチコンソール
Googleサーチコンソールは、Webサイトのパフォーマンスやアクセスする前のユーザーの動きを分析できるツールです。以下の流れで、LCPを確認できます。
- Googleサーチコンソールを開く
- サイドメニューの「ウェブに関する主な指標」をクリック
- 「モバイル」と「PC」のそれぞれの指標を確認
- 問題があれば「レポートを開く」をクリック
- LCPに関する記載があるか確認
Googleサーチコンソールでは、問題があった場合に警告のみが表示され、LCPの具体的な数値などは確認できません。
そのため、現状把握や具体的な改善ポイントの確認には、PageSpeed Insightsを活用するのがおすすめです。
まとめ：LCPを改善すればSEOに有利になる
2021年6月以降、LCPは順位決定の基準の1つに加えられています。そのため、改善を図れば直接的にSEOに良い影響を与えてくれます。
定期的にページを見直し、PageSpeed Insightsを使って表示に2.5秒以上かかっているコンテンツがないか確認しましょう。
この記事を参考に、ユーザーが快適に閲覧できるWebサイトになるよう、改善してみてください。
弊社のSEOサービス「ランクエスト」では、お客様ごとに専任のコンサルタントがつき、戦略立案からコンテンツ制作、効果測定まで、すべて対応いたします。SEO対策にお悩みの方は、お気軽にご相談ください。
株式会社eclore Web Director / Marketing Director
デザイン専門学校を卒業後、2012年に入社。Web領域を中心に、コーポレートや採用サイト、メディアサイトなどのデザイン、コーディング業務に従事。また、リスティングを中心とした広告運用も担当。SEO・広告の観点で優位性のあるWeb制作を得意としています。Web制作数 年間100以上 / 広告運用額 年間2億円以上。
