Web Vitals は『ユーザー体験』と『SEO』の両輪
Core Web Vitals は Google が定義する Web パフォーマンス指標で、検索順位にも影響します。本記事では編集部の視点で、スコア改善の実務を公開情報をもとに整理します。Chrome DevTools 実践 もご参考に。
3つの主要指標
(1) LCP (Largest Contentful Paint)：最大要素の表示時間。2.5秒以内が良好。(2) INP (Interaction to Next Paint)：操作応答時間。200ms 以内。(3) CLS (Cumulative Layout Shift)：レイアウト変動。0.1 以下。(4) FCP/TTFB：補助指標。(5) 2024年 INP が FID を置換(公開情報をもとに)。モバイルでの測定が SEO に直結します。
LCP 改善の手順
(1) LCP 要素の特定：Lighthouse で確認。(2) 画像最適化：WebP/AVIF・適切な解像度。(3) priority hint：fetchpriority="high"。(4) Preload：critical asset。(5) Server レスポンス短縮：TTFB 改善。CDN/Edge 実践 も合わせて。
INP 改善の手順
(1) 長いタスクの分割：50ms 以内に。(2) requestIdleCallback：低優先度処理。(3) React Concurrent Mode：useTransition。(4) Event handler の軽量化。(5) 3rd party scripts：遅延読込。
CLS 改善の手順
(1) 画像/iframe に width/height明示。(2) Font の事前読込：FOIT/FOUT 回避。(3) Skeleton UI：プレースホルダ。(4) 動的に挿入される要素の予約スペース。(5) 広告枠のサイズ固定。Tailwind CSS 実践 もご参考に。
計測ツール
(1) Lighthouse：開発時の計測。(2) Chrome DevTools Performance：詳細解析。(3) PageSpeed Insights：実 URL でフィールドデータ。(4) Search Console：Core Web Vitals レポート。(5) RUM：実ユーザーデータ(Web Vitals API)。CI に組み込んで継続監視するのが現代の標準。
SSR/SSG/CSR と Web Vitals
(1) SSG：LCP が最良。(2) SSR + Streaming：LCP 良好+TTI も。(3) CSR：LCP が遅れがち。(4) RSC：JS バンドル削減で INP 改善。(5) Edge SSR：レイテンシ最短。Next.js App Router もご参考に。
失敗しがちなパターン
(1) 巨大な画像の読込：LCP 悪化。(2) 3rd party の同期読込：INP 悪化。(3) 動的UI挿入：CLS 悪化。(4) Lab 計測のみで満足：Field と差。(5) 初期最適化のみ：継続改善なし。対策は、(1)next/image 等、(2)defer/async、(3)サイズ予約、(4)RUM併用、(5)CI 監視、です。