「ページの表示が遅い」「読み込みに時間がかかる」というユーザーの声に頭を抱えていませんか？
ある大手通信企業ではLCPが31%改善したことで、売上が8%も増加しました。
参照：Vodafone: LCP を 31% 改善し、売上を 8% 増加｜web.dev
LCPとは、ページの読み込み時間のパフォーマンスを測定する重要な指標。ユーザー体験に直結するだけでなく、SEOにも大きな影響を与えます。しかし、LCPについてよくわからない、どうやって改善すればいいのかわからないと困っているマーケターの方も多いのではないでしょうか。
本記事では、LCPの基本知識から、低下する原因、具体的な改善方法まで、詳しく解説していきます。
サイトの表示速度に不安を感じているなら、ぜひこの記事を参考にして、今すぐLCP改善に取り組んでみましょう。
目次
LCPとは
LCPとは、ユーザーがWebページにアクセスしてからメインコンテンツが表示されるまでの時間を測る指標で、ページの表示速度を示します。LCPは、コアウェブバイタルの一部で、LCPの改善は、Webサイトやランディングページにおいて、CX（顧客体験）の向上に重要な役割を果たします。
この章では、LCPのスコア指標とブロック判定について解説をします。
LCPのスコア指標
LCPは、スコア毎に以下の3つにランク分けされます。ランクに応じて、改善の必要性が分かります。
- 2.5秒未満⇒良好
- 4.0秒以内⇒要改善
- 4.0秒以上⇒不十分
理想的なLCPの時間は2.5秒未満であり、4秒を超えるとユーザー体験が低いとみなされます。SEOにも影響を及ぼすため、LCPの数値が低い場合は迅速に改善しましょう。
LCPのブロック判定
LCPは、Webページ上のソースコードの複数のブロック要素から、特定の1つを識別して測定します。
識別において対象となるのは、以下の要素です。
- テキスト
- 画像 <img>要素内の要素、または<svg>要素内の<image>要素
- 動画 <video>要素
- 背景 url（） 関数を介して読み込まれた背景画像が含まれている要素
div タグで囲まれたブロック内のテキストや画像など内容が豊富で、読み込みに時間がかかるブロック要素がLCPとして特定され指標の対象となります。
コアウェブバイタルとは
コアウェブバイタルとは、Webサイトのユーザー体験を測定する次の3つの指標です。
- LCP（Largest Contentful Paint）
- INP（Interaction to Next Paint）
- CLS（Cumulative Layout Shift）
この中で核となるのが、コアウェブバイタルと呼ばれる上記の3つの指標です。
3つの指標は、ユーザーフレンドリーなサイト構築に不可欠で、より良いユーザ体験のために重視されています。
LCPは、ページの読み込み速度や表示までの時間を指す指標です。
Googleは読み込みが速いページを優先して表示する基準としてLCPを導入しました。LCPの理想的な読み込み時間は2.5秒以内であり、4秒を超えると不十分と評価されます。ページに動画や画像が多く含まれていると、視覚的に魅力的である反面、ページの動作が遅くなり、LCPの低下へつながります。
INPは、ユーザーがページで何かしらの操作を行った際にブラウザがどれくらい早く反応するかを測る指標です。たとえば、ページ内のタブをクリックしたり、テキストを入力するなどの最初のアクションからページが反応するまでを測定します。INPは、100ミリ秒未満であれば、優れたユーザー体験とみなされます。なお、スクロールやズームはINPの計測対象外です。
CLSは、ページの視覚的安定性を測る指標で、レイアウトのズレを数値化します。
たとえば、操作中に突然表示されるバナー広告によってユーザーが誤ってクリックする現象などが該当します。
こうしたレイアウトのズレはユーザー体験を著しく低下させ、SEOにもマイナスの影響を与えるのです。CLSのスコアは、生じたレイアウトのズレの範囲と移動距離に基づき算出され、0.1未満が良好で、0.25を超えると不十分と評価されます。
LCPの改善が重要な理由
LCPの改善が重要な理由は、以下の2つです。
- SEOに影響する
- ユーザー体験に影響する
それぞれについて解説します。
SEOに影響する
LCPの指標が低下すると、SEOにマイナスの影響を与える可能性があります。
Googleは2021年6月より、Webページのユーザー体験を評価する重要な基準としてコアウェブバイタルを検索ランキングの要素に採用しました。
コアウェブバイタルには3つの主要な指標があり、その中でページの表示速度を評価するのがLCPです。SEOはコンテンツの質などさまざまな要因に影響されますが、SEO効果を最大化するには、LCPの改善も必要です。
LCPの数値が悪い場合は、速やかに改善策を検討しましょう。
ユーザー体験に影響する
LCPは、サイト上のユーザー体験にとって重要な指標です。
WebサイトをLCPを意識して最適化することは、顧客体験の向上につながるのです。
LCPは、主要コンテンツが表示されるまでの時間を測定します。
そのため、LCPの指標がよいほど、ユーザーは迅速にページにアクセスでき、サイトの使いやすさが向上します。
WebサイトをLCPを意識して最適化することは、顧客体験の向上につながるのです。
LCP低下の原因
LCP低下の主な原因は以下の4つです。
- 画像ファイルサイズが大きい
- 画像を多用している
- JavaScriptとCSSを多用する
- ユーザ側のレンダリング速度が遅い
- サーバーのスペックが低い
それぞれ解説します。
画像ファイルサイズが大きい
あるファッションECサイトでは、トップページのメインビジュアルに5MB以上の大きな画像を使っていました。その結果、LCPが大幅に低下し、直帰率が10%近く上昇してしまったのです。
こうした事態を招く原因の1つが、スマホで撮影した高解像度の写真や、圧縮していないスクリーンショットをそのままサイトに載せてしまうことです。
特に注意が必要なのが、ファーストビュー（画面に最初に表示される部分）に配置されたメインコンテンツの画像サイズです。LCPはこの領域の表示速度を重視するため、大きすぎる画像は致命的です。
実際、あるサイトではファーストビューの画像を5MBから500KBに圧縮したところ、LCPが1.5秒も改善したという事例もあります。巨大な画像ファイルは、LCPだけでなく、サイト全体のパフォーマンスにも悪影響を及ぼします。適切なサイズに最適化することが何より大切だといえるでしょう。
画像を多用している
画像を多用すると、ページの読み込み時間が長くなり、結果的にLCPのスコア悪化につながります。
先ほど紹介した画像ファイルサイズの大きさと同じように、圧縮した画像だからといって多用してしまえば、おのずとサイト自体のデータ量が増大してしまいます。
一方、画像を一切使わずにテキストのみのコンテンツを提供すると、内容が単調になり利用者の読みやすさやサイトの使い勝手が低下する恐れがあります。ユーザビリティの向上とSEOのバランスをとりながらも、LCPの低下を防ぐためには、画像を多用せずに適切な量を利用することが重要です。
JavaScriptやCSSを多用する
JavaScriptやCSSの多用は、ブラウザやサーバーに負荷をかけ、ページの読み込み速度を落とします。
Webページをユーザーに表示するためには、ブラウザとサーバーによるレンダリングが必須です。レンダリングにより、プログラミング言語で書かれたテキストファイルを、人が理解できる形に変換し、JavaScriptやCSSが実行され、サイトのデザインやアニメーションが適用されるのです。
レンダリングのプロセスにおいて、一般的にファイルは同期的に処理され、ある処理が完了するまで次の処理が待機します。これがレンダリングの遅延を引き起こし、LCPの値を悪化させる要因になります。そのため、JavaScriptやCSSが多いほど、レンダリングによる遅延が発生し、LCP低下につながります。
デザイン性が高いWebサイトは、はた目にはかっこいいですが、ユーザーの利便性もきちんと考慮した上で設計することがポイントです。
ユーザ側のレンダリング速度が遅い
クライアント側でレンダリングを行う場合は、ページの読み込み速度が遅くなる傾向にあり、LCPが低下します。レンダリングというプロセスは、Webページにおける画像や動画などのコンテンツを表示する作業を指します。
通常、多くのWebサイトではサーバー側で処理が行われていますが、JavaScriptフレームワークを活用することで、ユーザーのブラウザでレンダリングを実行することも可能です。こうした場合、JavaScriptの実行に影響を受けて、ページの読み込み速度が遅くなる傾向にあります。
サーバーのスペックが低い
LCP のスコアは、サーバーからの応答時間が遅れると低下する傾向にあります。これは、サーバーの性能が訪問者の数に対応できていない場合や、サーバーのオペレーティングシステム（OS）やミドルウェアが古いことが主な原因です。
Webサイトは、訪問者のブラウザからのリクエストに応える形で、サーバーが適切なファイルを送信することによって表示されます。サーバーの処理速度が遅いと、応答時間の遅延がページの表示速度の低下を招くことになります。結果としてLCPが低下するのです。
そのため、必要に応じてサーバーのバージョンや規模を確認し、容量を見直しましょう。
LCPの5つの改善方法
LCPの改善方法として、以下の5つが挙げられます。
- 画像を圧縮する
- 不要な画像を削除する
- JavaScriptとCSSの見直しをする
- ユーザー側のレンダリングを減らす
- サーバーのスペックを上げる
なお、LCPを改善する際には以下の2つのポイントに注意しましょう。
1点目は、改善策を実施する前には、必ずバックアップを取ることです。
改善を施すにあたり、コードの変更や調整が伴うため、事前にローカル環境などにバックアップを取っておくことで、何か問題が発生した際に元の状態に戻せるようにしておく必要があります。
2点目は、WordPressのプラグインの使用は必要最小限に抑えることです。
LCPの改善策として多くの場合、WordPressプラグインが有効です。しかしプラグインを過多に導入することは、サイトのパフォーマンス低下、セキュリティリスクの増加、更新や機能追加時の手間といったデメリットを招きかねません。
WordPressでプラグインを導入する際には、どの改善策がもっとも効果的かを慎重に選定し、必要なものだけを選び、導入することが大切です。これにより、サイトの安全性と効率性を確保しつつ、LCPの改善を目指せます。
それぞれの改善方法を解説します。
画像を圧縮する
LCP改善方法のひとつは、画像圧縮ツールを活用して、ファイルサイズを最小化することです。
ファイルの圧縮は、非可逆圧縮または可逆圧縮のいずれかを適用して、Googleによって開発されたWebPなどの次世代画像フォーマットを使用して最適化しましょう。
Webpフォーマットは、高い圧縮効率を持ち、Webサイトの画像表示を速めます。初めは対応ブラウザの少なさが課題とされていましたが、Google Chrome、Safari、Firefoxといった主要なブラウザがWebpフォーマットに対応しているため、広く利用されています。
画像の圧縮は、特に画像品質に重点を置くギャラリーページなどの例外を除き、Webコンテンツにおける画像ファイルサイズを500KB程度に保てます。必要に応じてWordPressなどのCMSで利用できる画像圧縮プラグインを活用しましょう。また、CMSへの入稿前に画像を軽量化することも重要です。
不要な画像を削除する
ページから不必要な画像を削除することにより、サーバーの負担を軽減し、LCPのパフォーマンスの向上が期待できます。画像は視覚的魅力を高めるため重要ですが、使用する画像は必要最小限に抑え、サイトの効率性と表示速度のバランスを考慮することが推奨されます。
JavaScriptやCSSの見直しを行う
JavaScriptとCSSを見直す方法として以下の3つを解説します。
- 未使用のJavaScriptの削減とCSSの削減
- JavaScriptとCSSの圧縮
- レンダリングを妨げるリソースの排除
まず、未使用のJavaScriptの削減とCSSの削減は、サイトの読み込み速度を向上させる重要な手法です。
Webサイトがサーバーからレスポンスを受け取った後、HTML、CSS、JavaScriptを使ってコンテンツのレンダリング（表示）が行われます。
こうした技術はサイトのデザインに欠かせないものですが、使用していないJavaScriptやCSSはページの読み込み時間を長くします。未使用のコードは削除して読み込みを迅速化しましょう。
未使用のJavaScriptを削除するには、Flying Scripts by WP Speed MattersというWordPressプラグインの利用が1つの方法です。
一方、未使用のCSSを削除するには、UnCSS Onlineを使って、不要なCSSを特定し、削除後のコードに変換することが効果的です。
こうした手段を用いることで、サイトのパフォーマンスを改善し、ユーザー体験を向上できます。
ほかにも、JavaScriptとCSSの圧縮もサイトの表示時間の短縮化に有効です。
通常、コード内にはスペース、インデント、コメントなど、人間がコードを読みやすくするために加えられた文字が含まれています。これらは、ブラウザがWebページを処理する際には必要ないため、削除が可能です。
最後に、レンダリングを妨げるリソースの排除です。
レンダリング遅延の原因となるJavaScriptやCSSを軽量化するのです。特定のCSSやJavaScriptをHTML文書内に直接挿入し、ページの読み込みやレンダリングをスムーズにします。
ユーザー側のレンダリングを減らす
ユーザー側のレンダリング遅延への対処方法は、優先度の低いJavaScriptの実行を遅らせて、より重要なコンテンツの読み込みを先行させることです。また、サーバー側のレンダリングの利用により、レンダリングがユーザーのブラウザ環境に依存しないため、一貫した表示速度の向上が期待できます。
他にも、JavaScriptコードの最小化や非同期化を行うことで、読み込み時間の短縮が図れます。
ただし、サーバーサイドレンダリングを採用する場合は、サーバーの性能が低いと逆効果になる可能性があるため、サーバーのスペックにも注意が必要です。
サーバーのスペックを上げる
サーバーのスペックを上げて、応答時間を短縮する簡単な方法は、現在利用中のレンタルサーバーをより高速でハイスペックなレンタルサーバーへと切り替えることです。
また、サーバーからの応答時間低下は、サーバーの性能が訪問者の数に対応できていない場合や、サーバーのオペレーティングシステム（OS）やミドルウェアが古いことに起因することがあります。こうした状況では、サーバーのハードウェアを強化するか、OSやミドルウェアを更新することが迅速な解決策となり得ます。
CDN（コンテンツ配信ネットワーク）の利用もサーバーの応答時間短縮の1つの方法です。
CDNを使用すると、WebサイトのコンテンツをCDNの世界各地に配置されたネットワークを通じて配信することが可能になります。
訪問者は自身にもっとも近いCDNのサーバーからコンテンツをダウンロードできるため、Webサイトの読み込み時間が大幅に短縮されます。CDNが利用されていない場合、Webサイトの訪問者はページのコンテンツを直接ホスティングや自社サーバーから取得しなければなりません。
訪問者がサーバーに近い地域にいれば、問題となりませんが、訪問者が世界各地に分散している場合、サーバーと訪問者の間に物理的距離が存在することで、サイトの読み込み速度が遅くなることがあります。
また、キャッシュの利用によってもサーバーの応答時間が向上します。
キャッシュは、サーバーが訪問者のブラウザに完成したHTMLドキュメントを配信する前に必要な処理を減らします。
無料で使えるLCP計測ツール｜拡張機能・ブラウザ
LCPを計測する主なツールは以下の4つです。
- Lighthouse
- PageSpeed Insights
- Web Vitals Extension
- Google Search Console
それぞれのツールについて、確認方法を解説します。
Lighthouse
Lighthouseは、LCPを含むコアウェブバイタルの指標を検証できるGoogle Chromeの拡張機能です。
インストール後、特定のページを開くだけで、自動的にサイトのパフォーマンスを分析してくれます。
Lighthouseは、サイトのパフォーマンスを以下の5つのカテゴリーに分けて評価します。
- パフォーマンス
- プログレッシブWebアプリ
- アクセシビリティ
- ベストプラクティス
- SEO
これらのカテゴリーの中で、LCPに直接関連するのはパフォーマンスです。
Lighthouseは結果を緑（良好）、黄色（改善が必要）、赤（不良）の三色で表示し、Google Search Consoleと異なり、具体的な改善点を提供してくれるため、サイトの最適化に非常に役立ちます。
PageSpeed Insights
PageSpeed Insightsは、Googleが提供しているページパフォーマンス計測ツールです。
ブラウザ上で直接調べれるため、機能追加やアプリなどは必要ありません。
特筆するべき点は、PageSpeed InsightsはLCP評価を2通りの方法で行っている点です。
1つ目は、実際のユーザー体験に基づいた評価であり、実際にユーザーが訪問した際の環境を基にした数値です。訪問者が少ない場合、数値が表示されないことがあります。
2つ目は、シミュレーション環境での評価で、仮想のブラウザ環境でフロントエンドの体験を模倣して得られた数値です。
Page Speed InsightsでLCP を測定するには、まず該当するWebページのURLを入力し、分析ボタンをクリックすることで可能です。
LCP評価をもとに、具体的な改善方法も、パフォーマンス診断セクションにあるLCP項目をクリックすることで確認できます。また、改善が必要ないと判断された項目も一覧で閲覧できます。
Web Vitals Extension
Web Vitals Extensionは、Google Chromeへの追加により利用できる拡張機能で、簡単な設定でコアウェブバイタルデータ（LCP、FID、CLS）の自動計測が可能です。特別な操作は不要で、閲覧中のページのパフォーマンスデータをバックグラウンドで自動的に収集してくれます。
計測されたデータは、Chromeのツールバーにあるアイコンをクリックすることで、いつでも手軽に確認可能です。
Web Vitals Extensionは即時性とアクセシビリティに優れており、現在アクセスしているWebサイトのパフォーマンス指標を迅速に把握したい場合に、非常に便利です。
Google Search Console
Google Search Consoleは、Webサイトのパフォーマンス分析や訪問者の行動を調査できるツールです。LCPの確認手順は以下の通りです。
- Google Search Consoleを開く
- サイドメニューから、Webに関する主な指標を選択
- モバイルとPCでそれぞれの指標を確認
- 問題がある場合は、レポートを開くをクリックして詳細を確認
Google Search Consoleでは問題が検出された場合の警告は表示されますが、LCPの具体的な数値を直接確認することはできません。
まとめ：LCPを改善しユーザー体験向上を図りましょう
LCPは、ページ上でもっとも大きな画像やテキストブロックが完全に表示されるまでの時間を測る指標で、ページのメインコンテンツがどれだけ迅速に読み込まれるかを評価します。LCPのパフォーマンスを向上させることで、訪問者に対してメインコンテンツを速やかに提示し、ページの見やすさを印象づけれるでしょう。
また、LCPはコアウェブバイタルの一部であり、検索結果のランキングにも影響を及ぼします。
PageSpeed Insightsで提供される多くの指標の中でも特に重視されるべきであり、Webサイトのパフォーマンス改善にあたっては優先的に取り組むべき項目です。ぜひ、サイトのLCPを測定し、課題点を明確にして、LCPの改善に取り組みましょう。
ギャプライズでは、Webサイトのスピード改善はもちろん、企業に合わせたツールの紹介、導入、運用までさまざまなサポートを提供しています。ぜひお気軽にお問い合わせください。
