LCPを改善する方法｜画像・フォント・サーバー応答速度の最適化
サイト表示速度とCore Web VitalsLCPを改善する方法として画像・フォント・サーバー応答速度の最適化を解説します。priority設定・WebP変換・CDN導入・SSG移行など優先順位別の施策をまとめています。
はじめに
LCP（Largest Contentful Paint）はCore Web Vitalsの中でも最も重要な指標で、多くのWebサイトでスコアが「要改善」または「不良」になっています。LCPが2.5秒を超えると訪問者の直帰率が上がり、SEOのスコアにも悪影響を与える。
本記事では、LCPが遅い原因を体系的に整理し、それぞれの具体的な改善方法を解説します。
LCPが遅い主な原因と対策の全体像
LCPは「ページの最大コンテンツ要素が表示されるまでの時間」ですが、その改善は4つの領域に分類できます。
サーバー応答時間（TTFB）の改善
レンダリングブロックの解消
LCP要素（画像）の最適化
リソースの優先度設定
改善1：サーバー応答時間（TTFB）の短縮
TTFB（Time to First Byte）はブラウザがサーバーへリクエストを送信してから最初のバイトを受け取るまでの時間です。LCPのすべてのプロセスはTTFBの後に始まるため、TTFBが長いとLCPも必ず長くなります。
目標値：600ミリ秒以下（理想は200ミリ秒以下）
対策1-1：CDNの活用
CDN（Content Delivery Network）はユーザーに地理的に近いサーバーからコンテンツを配信することで、物理的な距離による遅延を削減します。
日本のユーザーが東京に設置されたVercelのエッジノードからコンテンツを受け取る場合と、アメリカのサーバーから受け取る場合では、ネットワーク遅延が大きく異なります。Vercelは世界100か所以上のエッジネットワークを持ち、日本ユーザーへの最適な配信を自動で行います。
対策1-2：静的生成（SSG/ISR）の活用
WordPressのような動的CMSは、アクセスのたびにPHPがデータベースを参照してHTMLを生成するため、TTFBが長くなりやすくなります。
Next.jsの静的生成（SSG）またはISR（Incremental Static Regeneration）を使うと、ビルド時にHTMLを事前生成してCDNから配信できるため、TTFBを100ミリ秒以下にできます。
対策1-3：サーバーキャッシュの設定
動的なサーバー処理が必要な場合でも、適切なキャッシュ設定でTTFBを改善できます。
HTMLのサーバーサイドキャッシュ（生成済みHTMLをキャッシュして再利用）
データベースクエリのキャッシュ（Redis等）
Vercelのエッジキャッシュ設定
改善2：レンダリングブロックの解消
HTMLを描画する前にブラウザがCSSやJavaScriptを読み込む必要がある場合、これがLCPを遅らせます。
対策2-1：CSSのインライン化と非同期読み込み
ファーストビューに必要なCSSだけをHTMLにインライン化し、残りのCSSを非同期で読み込みます。
Next.jsはデフォルトでコンポーネントに関連するCSSのみを必要なページに自動的に含める（CSS Modules・Tailwind CSSの場合）ため、この問題が起きにくい構造になっています。
対策2-2：JavaScriptの読み込みの最適化
<script> タグに defer または async 属性を追加することで、JavaScriptの実行がHTMLの描画をブロックしないようにします。
Next.jsでは next/script コンポーネントを使うことで、スクリプトの読み込みタイミング（beforeInteractive・afterInteractive・lazyOnload）を適切に制御できます。
改善3：LCP要素（画像）の最適化
多くのサイトでLCPの原因はヒーロー画像等の大きな画像です。画像の最適化はLCP改善で最も効果が大きい施策の一つです。
対策3-1：画像フォーマットをWebPに変換する
WebP（Google開発の画像フォーマット）はJPEGと同等以上の品質を保ちながら、ファイルサイズをJPEGより25〜34%削減できます。
Next.jsのnext/imageコンポーネントは、ブラウザがWebPに対応している場合に自動的にWebP形式で配信するため、手動での変換が不要です。
対策3-2：画像サイズを表示サイズに合わせる
2,000×1,500ピクセルの画像を、実際には800×600ピクセルで表示している場合、不必要に大きなファイルをダウンロードしていることになります。
next/imageはsrcsetを自動生成して、デバイスの画面サイズに最適な解像度の画像を配信する（レスポンシブ画像）。
対策3-3：LCP画像に `priority` を設定する
next/imageでは priority プロパティを設定することで、その画像をページ内で最優先で読み込むよう指示できます。
priority を設定すると、この画像に fetchpriority="high" と preload のリンクタグが自動的に追加されます。
対策3-4：画像の事前読み込み（Preload）
next/imageの priority を使わずにカスタム実装する場合、<link rel="preload"> タグをHTMLの <head> に追加することでLCP画像を優先的に読み込めます。
改善4：ファーストビューの遅延読み込みを無効にする
「遅延読み込み（Lazy Loading）」はスクロールして画面に入ったときに画像を読み込む最適化技術ですが、ファーストビュー（最初の画面）の画像に設定すると逆効果になります。
ファーストビューの画像には loading="eager" または priority プロパティを設定し、スクロールしないと見えない画像には loading="lazy" を設定します。
LCP改善の実施順序
LCPの改善施策を実施する際の優先順位を示す。
最優先（即効性高）
LCP画像への priority プロパティの設定（Next.js）
画像のWebP変換・サイズ最適化
ファーストビュー画像の遅延読み込み無効化
高優先（効果大）
CDNの導入・静的生成（SSG/ISR）への移行
レンダリングブロックするCSS・JavaScriptの特定と解消
中優先（根本的な改善）
サーバー応答速度（TTFB）の改善
技術スタックの見直し（WordPress→Next.js+Vercel等）
改善効果の目安
適切な最適化を実施した場合の改善効果の目安を示します。
施策 | LCP改善の目安 |
LCP画像へのpriority設定 | 0.3〜0.8秒短縮 |
画像のWebP変換 | 0.2〜0.5秒短縮 |
CDN導入（Vercel等） | 0.5〜1.5秒短縮 |
SSG/ISRへの移行（WordPressから） | 1〜3秒短縮 |
レンダリングブロック解消 | 0.3〜1.0秒短縮 |
複数の施策を組み合わせると、LCP 4〜5秒台のサイトが1〜2秒台になることも現実的に達成できます。
まとめ
LCPの改善は「LCP画像へのpriority設定と画像最適化（即効性あり）」から始め、「CDN・静的生成による根本的なアーキテクチャ改善（中長期）」へと段階的に進めることが効果的です。
Next.jsのnext/imageは、WebP変換・レスポンシブ画像・priority設定・遅延読み込みをすべて自動化するため、LCP改善において非常に強力なツールです。
次の記事では、LCPと並んでパフォーマンスに大きく影響する「画像最適化」の完全ガイドを解説します。
エージェント型Web・AIアプリ
開発のご相談
chot inc.ではエージェント型Webの設計・構築・
運用を
一貫してサポートしています。