「Largest Contentful Paint (LCP)」を解決！ – PageSpeedInsightsの速度改善

「Largest Contentful Paint（LCP）」を解決！

ウェブサイトの表示速度は、ユーザーの満足度や検索エンジンの評価に大きな影響を与えます。特に、Largest Contentful Paint（LCP）は、ページの読み込み体験を評価するための重要な指標です。

LCPが遅いと、ページの主要な内容が表示されるまでに時間がかかり、ユーザーが離脱しやすくなります。この記事では、PageSpeed InsightsでLCPが悪いと表示された場合に、どこを確認し、どのように改善すればよいかを初心者にもわかりやすく解説します。

LCPとは何か？

Largest Contentful Paint（LCP）とは、ユーザーがページを開いてから、画面内にある最も大きな主要コンテンツが表示されるまでの時間を測定する指標です。

対象になりやすいのは、ファーストビューに表示される大きな画像、メインビジュアル、見出しを含む大きなテキストブロックなどです。

PageSpeed Insightsでは、LCPの目安は以下のように分類されます。

良好：2.5秒以内
要改善：2.5秒超〜4秒以内
遅い：4秒超

なお、Core Web Vitalsでは、単に1回の計測結果だけでなく、実際のユーザー体験をもとにした75パーセンタイルの値が重視されます。つまり、多くのユーザーにとって快適に表示されているかどうかが重要です。

LCPが遅くなる主な原因

LCPが遅くなる原因は1つとは限りません。画像、サーバー、CSS、JavaScript、広告、WordPressテーマやプラグインなど、複数の要因が関係することがあります。

サーバー応答時間が長い

サーバーから最初のHTMLが返ってくるまでの時間が長いと、ページ全体の表示開始が遅くなります。特に、初期HTMLの応答時間であるTTFB（Time to First Byte）が長い場合、LCPにも悪影響が出ます。

LCP対象の画像が重い

ファーストビューに大きな画像がある場合、その画像がLCP要素になることが多くあります。画像サイズが大きすぎる、圧縮されていない、表示サイズより大きな画像を読み込んでいる、といった状態ではLCPが悪化します。

LCP画像を遅延読み込みしている

画像の遅延読み込みは便利ですが、ファーストビューに表示されるメイン画像まで遅延読み込みにしてしまうと、LCPが遅くなることがあります。

スクロールしないと見えない画像には遅延読み込みが有効ですが、最初から画面に表示される画像には注意が必要です。

CSSやJavaScriptが表示を妨げている

CSSやJavaScriptの読み込み・実行が多いと、ブラウザがページを描画するまでに時間がかかります。特に、不要なJavaScript、重いプラグイン、外部スクリプトが多いサイトでは、LCPが悪化しやすくなります。

クライアント側レンダリングが多い

ReactやVue.jsなどを使い、ブラウザ側で多くのHTMLを生成している場合、JavaScriptの読み込みと実行が終わるまで主要コンテンツが表示されないことがあります。その結果、LCPが遅くなることがあります。

LCPを改善するための具体的な解決策

LCPを改善するには、まずPageSpeed Insightsでどの要素がLCPとして判定されているかを確認することが大切です。そのうえで、原因に応じて対策を行います。

PageSpeed InsightsでLCP要素を確認する

PageSpeed Insightsでは、診断結果の中に「Largest Contentful Paint 要素」や「LCPリクエストの検出」といった項目が表示されることがあります。

ここに表示されている画像やテキストが、改善すべき優先対象です。まずは、その要素が画像なのか、テキストなのか、背景画像なのかを確認しましょう。

画像を最適化する

画像がLCP要素になっている場合は、画像の最適化が非常に効果的です。

表示サイズに合った画像を使う：実際の表示サイズより大きすぎる画像を読み込まないようにします。
WebPやAVIFを利用する：JPEGやPNGより軽くできる場合があります。
画像を圧縮する：画質を大きく落とさない範囲でファイルサイズを減らします。
widthとheightを指定する：画像の表示領域をあらかじめ確保し、レイアウトの安定にもつながります。
ファーストビュー画像は遅延読み込みしない：LCP対象の画像にloading="lazy"を指定すると、表示が遅れることがあります。

LCP画像を優先的に読み込む

ファーストビューのメイン画像がLCP要素になっている場合は、その画像を優先的に読み込ませることが有効です。

例えば、HTML側で画像にfetchpriority="high"を指定する方法があります。

<img src="main-image.webp" alt="メイン画像" width="1200" height="600" fetchpriority="high">

また、必要に応じて<link rel="preload">で重要な画像を事前に読み込ませる方法もあります。ただし、使いすぎると逆に他の重要なリソースの読み込みを妨げるため、LCPに関係する重要な画像に限定しましょう。

サーバーの応答時間を短縮する

サーバー応答が遅い場合、どれだけ画像を軽くしてもLCPが改善しにくいことがあります。以下の対策を検討しましょう。

キャッシュを活用する：WordPressの場合はキャッシュ系プラグインやサーバー側キャッシュを利用します。
CDNを利用する：画像やCSS、JavaScriptをユーザーに近いサーバーから配信できます。
サーバープランを見直す：アクセス数やサイト規模に対してサーバー性能が不足している場合は、上位プランを検討します。
PHPやデータベースを更新する：古い環境を使っている場合、処理速度や安全性の面で不利になることがあります。
不要なプラグインを減らす：WordPressでは、プラグインが増えるほど処理が重くなることがあります。

CSSを最適化する

CSSの読み込みが遅いと、ブラウザがページを描画できず、LCPが遅れることがあります。

不要なCSSを削除する：使っていないテーマ機能やプラグインのCSSを減らします。
CSSを圧縮する：余分な空白やコメントを削除し、ファイルサイズを小さくします。
重要なCSSを優先する：ファーストビューに必要なCSSを優先的に読み込ませます。
外部CSSを増やしすぎない：読み込みリクエストが多いと表示が遅くなることがあります。

JavaScriptを最適化する

JavaScriptの処理が重いと、ページの描画が遅れ、LCPにも影響します。

不要なJavaScriptを削除する：使っていない機能やプラグインを見直します。
deferを活用する：HTMLの解析を妨げにくい形でJavaScriptを読み込めます。
外部スクリプトを見直す：広告、SNS埋め込み、アクセス解析、チャットツールなどが重くなることがあります。
重要でない処理を後回しにする：初期表示に不要な処理は、ページ表示後に読み込むようにします。

クライアント側レンダリングを見直す

JavaScriptでページの主要部分を後から生成している場合は、初期表示が遅くなることがあります。

サーバーサイドレンダリング（SSR）を利用する：サーバー側でHTMLを生成し、ブラウザに送信します。
プリレンダリングを利用する：あらかじめ静的HTMLを生成しておき、初期表示を速くします。
重要な本文をHTML内に含める：主要コンテンツがJavaScript実行後にしか表示されない構成は避けます。

WordPressサイトで特に確認したいポイント

WordPressサイトでは、テーマ、プラグイン、画像、サーバー環境がLCPに大きく影響します。

トップ画像やアイキャッチ画像が大きすぎないか確認する。
ファーストビュー画像に遅延読み込みが適用されていないか確認する。
キャッシュ系プラグインを適切に設定する。
不要なプラグインを停止または削除する。
広告やSNS埋め込みをファーストビューに置きすぎない。
テーマが重い場合は、軽量なテーマへの変更も検討する。

用語の解説

TTFB

TTFBとは、ブラウザがリクエストを送ってから、サーバーから最初のデータを受け取るまでの時間です。TTFBが長いと、ページの表示開始そのものが遅れます。

サーバーサイドレンダリング（SSR）

サーバーサイドレンダリングとは、サーバー側でページのHTMLを生成してからブラウザに送信する仕組みです。ブラウザ側でJavaScriptを実行してから表示する方式より、初期表示が速くなる場合があります。

プリレンダリング

プリレンダリングとは、事前にページを静的HTMLとして生成しておく方法です。HTMLをすぐに返せるため、初期表示の改善に役立ちます。

CDN

CDNとは、複数の地域にあるサーバーからコンテンツを配信する仕組みです。ユーザーに近い場所から画像やCSSなどを配信できるため、読み込み時間の短縮につながります。

HTTP/2・HTTP/3

HTTP/2やHTTP/3は、ウェブページの読み込みを効率化する通信方式です。特に、多数の画像やCSS、JavaScriptを読み込むページでは、通信の効率化に役立つことがあります。

最も取り組みやすい解決策

初心者が最初に取り組みやすいのは、LCP要素の確認と画像の最適化です。

PageSpeed InsightsでLCP要素を確認し、それが画像であれば、画像サイズの調整、圧縮、WebP化、ファーストビュー画像の遅延読み込み解除を行いましょう。

次に、キャッシュ設定や不要なプラグインの削除、サーバープランの見直しを行うと、さらに改善しやすくなります。

以下のページでは、画像をWebP形式に変換・圧縮できます。圧縮前後を比較しながら圧縮率を指定できます。

WebP画像圧縮ツールはこちら

まとめ

LCPは、ページ内で最も大きな主要コンテンツが表示されるまでの時間を示す指標です。
良好なLCPの目安は2.5秒以内です。
原因は、サーバー応答の遅さ、画像の重さ、CSS・JavaScriptの読み込み、LCP画像の遅延読み込みなどです。
まずはPageSpeed InsightsでLCP要素が何かを確認し、その要素を優先的に改善することが大切です。
特に、ファーストビューの大きな画像は、圧縮・サイズ調整・WebP化・優先読み込みが効果的です。