WordPress専門の改善サービス|お見積もり対応 / 月額契約なし|全国対応

WordPressのLCPを改善するための実践チェックリスト

WordPressのLCPを改善するための実践チェックリストのイメージ

LCP(Largest Contentful Paint)は、Googleが定めるCore Web Vitalsの中核指標の1つで、ページの主要コンテンツが表示完了するまでの時間を測定するものです。本記事では、WordPressサイトでLCPを改善するための実践的なチェックリストを整理いたします。

この記事でわかること

  • LCPとは何か、Googleが推奨する基準値
  • LCPが悪化する主な原因5つ
  • WordPressサイトで効果が出やすい改善手順10個
  • 計測ツールの使い方と効果測定
  • 改善後の運用維持のポイント

目次

  1. LCPとは何か
  2. Googleが推奨する基準値
  3. LCPが悪化する主な原因
  4. 改善チェックリスト(10項目)
  5. 計測ツールの使い方
  6. 改善後の運用維持
  7. 関連事例としての学び
  8. まとめ

LCPとは何か

LCP(Largest Contentful Paint)は、ページを開いてから、画面内で最も大きなコンテンツ要素(多くの場合、ヒーロー画像やメインのテキストブロック)が描画完了するまでの時間です。ユーザーが「ページが読み込めた」と体感するタイミングを近似する指標として位置づけられております。

従来の「ページ読み込み時間」は、ページ全体の読み込み完了までを計測していましたが、現代のウェブページは外部スクリプトや画像が多く、すべての読み込みを待つと体感とずれが大きくなります。LCPは「ユーザーが実際に体感する表示完了タイミング」をより正確に捉えるよう設計されています。

Googleが推奨する基準値

Googleは、LCPの推奨基準を次のように定めています。

評価 LCP値
Good(良好) 2.5秒以下
Needs Improvement(要改善) 2.5秒〜4.0秒
Poor(不良) 4.0秒超

Search Consoleの「Core Web Vitals」レポートでも、この基準で判定されます。「不良」と判定されたページは、検索順位への悪影響が出る可能性があるため、改善対象として優先度を上げるべきでございます。

LCPが悪化する主な原因

① 大きな画像の読み込み遅延

ヒーロー画像(ページ最上部の大きな画像)が、解像度が高すぎる・圧縮されていない・遅延読み込みされていないなどの理由で読み込みに時間がかかると、LCPがそのまま悪化いたします。

② サーバー応答時間の遅さ

WordPressがHTMLを生成して返すまでの時間(TTFB: Time to First Byte)が遅いと、その分だけLCPも遅くなります。プラグインの肥大化、データベースクエリの非効率、サーバーリソース不足などが原因です。

③ レンダリングをブロックするリソース

CSSやJavaScriptが<head>内で同期的に読み込まれると、それらの読み込み完了まで描画が止まります。これがLCPを悪化させる主因の1つです。

④ Webフォントの読み込み

Google Fonts等の外部フォントを使っている場合、フォントファイルのダウンロード完了までテキストの表示が遅延する場合がございます。

⑤ 外部スクリプトの負荷

広告タグ、解析タグ、SNSウィジェット等の外部スクリプトが多数読み込まれると、それらの初期化処理がメインスレッドを占有し、LCPに影響いたします。

改善チェックリスト(10項目)

① 画像の最適化

すべての画像を次世代フォーマット(WebP、AVIF)に変換し、適切な解像度にリサイズします。EWWW Image Optimizer、ShortPixel、Imagify等のプラグインで自動化可能でございます。

② ヒーロー画像の優先読み込み

ファーストビューに表示される大きな画像には、fetchpriority="high"属性を付与し、優先的に読み込ませます。逆に、ファーストビュー外の画像にはloading="lazy"で遅延読み込みを適用します。

<img src="hero.webp" fetchpriority="high" alt="...">
<img src="content.webp" loading="lazy" alt="...">

③ ページキャッシュの導入

WP Fastest Cache、W3 Total Cache、LiteSpeed Cache等のキャッシュプラグインを導入し、WordPressのHTMLを毎回生成せず、静的HTMLを返す構成にします。TTFBが劇的に改善いたします。

④ サーバーレベルのキャッシュ・チューニング

サーバー側で OPcache(PHPコードキャッシュ)、Object Cache(Redis、Memcached)等が有効化されているかを確認します。エックスサーバー・ConoHa WING等は標準で有効化されていることが多いです。

⑤ 不要なプラグインの整理

長期間使われていないプラグイン、目的が重複するプラグインを整理することで、サイト全体の処理負荷が下がります。

⑥ CSS・JavaScriptの最適化

CSSは<head>に最小限のみ、JavaScriptはdeferまたはasync属性で非同期化、不要なファイルの結合・圧縮を行います。Autoptimize、WP Rocket等のプラグインで自動化可能です。

⑦ Critical CSSの抽出

ファーストビューに必要な最小限のCSS(Critical CSS)を抽出し、HTMLにインライン埋め込みすることで、レンダリングブロックを最小化できます。専用プラグインや手動抽出ツールで実現可能でございます。

⑧ Webフォントの最適化

Webフォントを使う場合は、font-display: swapを指定して、フォント読み込み中もシステムフォントで先行表示させます。可能であれば、システムフォントのみで構成する選択肢も有効です。

@font-face {
    font-family: 'CustomFont';
    src: url('/fonts/custom.woff2') format('woff2');
    font-display: swap;
}

⑨ 外部スクリプトの遅延読み込み

SNSウィジェット、コメント機能、広告タグ等は、ファーストビューに必須でなければ、画面スクロール時に遅延読み込みする実装に変更します。WP Rocketには「Delay JavaScript Execution」機能が標準搭載されており、簡単に適用できます。

⑩ CDN活用

Cloudflareなどの無料CDNを利用することで、世界中のエッジサーバーから静的リソースが配信され、特に画像読み込みが高速化いたします。

計測ツールの使い方

PageSpeed Insights

Google公式の計測ツール(https://pagespeed.web.dev/)でURLを入力すると、LCPを含むCore Web Vitalsの実測値と改善提案が表示されます。「実際のユーザー体験」と「ラボデータ」の両方が確認できます。

Search Console

「Core Web Vitals」レポートで、サイト全体のLCPの状況をURL単位で把握できます。実際のユーザーから収集されたデータ(CrUX)に基づくため、最も信頼性が高いソースです。

Chrome開発者ツール

F12で開発者ツールを開き、「Lighthouse」タブから直接計測が可能です。改善前後で測定を繰り返し、効果を確認できます。

改善後の運用維持

LCPの改善は1回行えば終わりではございません。以下の運用ポイントを抑えることで、長期的に良好な状態を維持できます。

  • 新規記事を公開する際、ヒーロー画像のサイズと最適化を確認
  • 新規プラグインを追加する際、Core Web Vitalsへの影響を計測
  • 月次でSearch ConsoleのCore Web Vitalsレポートを確認
  • WordPress本体・プラグインのアップデート後、主要ページの計測を再実施
  • サーバーリソース(CPU・メモリ)の利用状況を定期的に確認

関連事例としての学び

弊社が支援しているクライアントサイトで、LCPが平均6秒を超え「不良」判定となっていたケースがございました。主な原因として、次の3点が複合していることが分かりました。

  1. トップページのヒーロー画像が3MBの未圧縮JPEGだった
  2. キャッシュプラグインが未導入で、TTFBが1.5秒を超えていた
  3. 外部解析タグが5種類同期読み込みされ、レンダリングをブロックしていた

改善施策として、画像をWebP化(420KB)、WP Fastest Cacheの導入、外部タグの遅延読み込み化、の3点を順次実施いたしました。結果、3週間後にはLCPが平均2.0秒まで改善し、Core Web Vitalsの判定も「良好」に切り替わりました。

本事例から得られる教訓は、「LCP改善は単一の施策ではなく、複数の改善を組み合わせて効果が出る」ということでございます。1つの施策で劇的に変わるケースもありますが、多くの場合は3〜5項目を組み合わせることで「不良」から「良好」への壁を超えられます。

まとめ

LCPの改善は、検索順位への直接的な影響と、ユーザー体験の双方を高める効果がございます。本記事でご紹介した10項目のチェックリストを優先度順に整理いたしますと、次の通りです。

  1. 最優先:ヒーロー画像の最適化(WebP化、適切なサイズ)
  2. 高優先:ページキャッシュプラグインの導入
  3. 高優先:CSS・JavaScriptの非同期化
  4. 中優先:外部スクリプトの遅延読み込み
  5. 中優先:不要プラグインの整理
  6. 中優先:Webフォントの最適化
  7. 低優先:CDNの活用

すべてを一気に実施する必要はございません。まず最優先のヒーロー画像最適化とキャッシュプラグイン導入だけでも、多くのサイトで「不良」から「要改善」、または「良好」への改善が見込めます。

計測しながら段階的に改善していくことが、確実かつ効率的なアプローチでございます。本格的な改善が必要な場合は、現状のページ表示速度の診断から、改善優先順位のご提案までを含めてご相談いただけます。

このようなお困りごとはありませんか?

WordPressのトラブル・改善・保守は、専門エンジニアが対応します。
調査(一律20,000円・税込)から承ります。費用感だけのご相談も歓迎です。

無料相談はこちら

この記事をシェアする

Contact Us お問い合わせ 無理な営業はいたしません。
まずは現状診断のみでも、お気軽にご相談ください。
WordPressの悩みを無料相談
お問い合わせ対応チームのイラスト
PAGE TOP