Core Web VitalsがSEOに直結する理由
Googleは2021年からCore Web Vitalsをランキング要因として採用しています。Core Web Vitalsは「LCP（Largest Contentful Paint：最大コンテンツ描画）」「INP（Interaction to Next Paint：操作への応答性）」「CLS（Cumulative Layout Shift：レイアウトの安定性）」の3指標です。LCPが2.5秒超・INPが200ms超・CLSが0.1超のサイトは検索順位が下がる可能性があり、競合サイトとの差別化要因になります。PageSpeed InsightsとSearch Consoleで定期的にスコアを確認しましょう。
Webパフォーマンスはビジネス指標にも直結しています。Amazonの調査では「ページ読み込みが1秒遅くなると売上が1%減少する」という結果が知られており、Googleの調査でも「モバイルサイトの読み込みが3秒を超えると53%のユーザーが離脱する」というデータがあります。Core Web Vitalsの改善はSEOだけでなく、コンバージョン率・直帰率・ユーザー満足度すべてに影響するため、エンジニアとしても積極的に取り組む価値があります。
- LCP（良い基準）：2.5秒以下が「Good」、4秒超が「Poor」、その間が「Needs Improvement」
- INP（良い基準）：200ms以下が「Good」、500ms超が「Poor」
- CLS（良い基準）：0.1以下が「Good」、0.25超が「Poor」
LCP改善：ページの読み込みを高速化する
LCPを改善する最も効果的な施策は「①画像の最適化（WebP/AVIF変換・適切なサイズ指定・lazyloading）」「②サーバーレスポンスの高速化（CDN導入・キャッシュ設定）」「③レンダーブロッキングリソースの削除（不要なCSSのインライン化・JSの非同期化）」「④プリロードの活用（でヒーロー画像を先読み）」です。Next.jsではnext/imageコンポーネントがWebP変換・サイズ最適化・lazyloadingを自動で処理するため、大幅なLCP改善が見込めます。
LCP改善の優先順位として、まず「最大コンテンツ要素（ヒーロー画像・h1テキストなど）」が何かをPageSpeed Insightsで確認し、その要素の読み込みを最優先で最適化します。ヒーロー画像にfetchpriority="high"属性を追加するだけでLCPが0.5〜1秒改善するケースもあります。サーバーのTTFB（Time To First Byte）が遅い場合はCDNの導入・データベースクエリの最適化・サーバーサイドキャッシュが有効です。
画像最適化の実践テクニック
画像はWebページの転送量の60〜70%を占めることが多く、最適化の効果が最も大きい領域です。具体的な対策は「①WebPまたはAVIF形式に変換（JPEGより30〜50%ファイルサイズ削減）」「②width・height属性を必ず指定してCLSを防ぐ」「③viewportに合わせたsrcsetでレスポンシブ画像配信」「④ファーストビュー外の画像にloading=lazy」「⑤重要な画像にfetchpriority=highを設定」です。Squooshで手動最適化、Cloudinaryで自動最適化配信がおすすめです。
実際の最適化効果として、1MBのJPEG画像をWebPに変換すると250〜400KB程度に削減（60〜75%削減）、さらにAVIFに変換すると150〜300KB程度（80〜85%削減）になります。Cloudinaryを使えば「元画像をアップロードするだけで自動的にWebP/AVIFで配信」する仕組みを構築でき、開発コストをかけずに大幅な画像最適化が実現します。
JavaScriptバンドルサイズを削減する
JavaScriptのサイズ肥大化はINP悪化の主要因です。削減戦略は「①コード分割（dynamic importで必要時だけ読み込む）」「②Tree-shaking（使用していないコードを除去）」「③不要ライブラリの削除（bundle-analyzerで確認）」「④外部スクリプトの遅延読み込み（strategy=lazyonload）」です。Next.jsのnext/scriptのstrategy設定を適切に行うことで、サードパーティスクリプト（GA・広告・チャットツール）の読み込みによるパフォーマンス低下を最小化できます。
- Bundle Analyzerの活用：next build後に@next/bundle-analyzerでバンドルサイズを可視化し、大きいライブラリを特定
- 動的インポート：heavy libraryはdynamic importでページ遷移時に遅延読み込みする
- 代替ライブラリ：moment.js（330KB）→day.js（2KB）、lodash（72KB）→個別インポートなど軽量代替が多数ある
CLS改善：レイアウトのズレをなくす
CLSはページ読み込み中に要素が突然ズレることで生じるUX低下の指標です。主な原因と対策は「①サイズ未指定の画像→width/height必須」「②Webフォントの読み込みによるテキストズレ→font-display:swapまたはnext/fontで最適化」「③動的に追加されるコンテンツ（広告・バナー）→あらかじめスペース確保」「④アニメーション→transform/opacityプロパティのみ使用（top/leftの変更は避ける）」です。
CDNとキャッシュ戦略で継続的に高速化
CDN（Content Delivery Network）はユーザーに地理的に近いサーバーからコンテンツを配信することで、応答速度を改善します。VercelはグローバルCDNを自動で適用するため、Next.jsアプリはデプロイするだけで高速配信が実現します。キャッシュ戦略は「静的アセット（JS/CSS/画像）は1年間キャッシュ（Cache-Control: max-age=31536000, immutable）」「HTMLは短期またはno-cache」が基本です。Cloudflareを導入するとさらに細かいキャッシュ制御とセキュリティ機能を追加できます。
パフォーマンス改善は一度行えば終わりではなく、継続的な監視が必要です。Google Search Console・PageSpeed Insights・SpeedCurveなどのツールで定期的にCore Web Vitalsを計測し、新機能のリリースでスコアが低下していないかを確認するワークフローを確立しましょう。GitHub ActionsでLighthouseをCI/CDに組み込むと、PRのたびにパフォーマンス指標が自動計測され、スコアの低下を事前に検出できます。