Core Web Vitals：Webパフォーマンスの測定と改善

Web2026-11-01TryQuickToolBox

ユーザーは高速でスムーズな体験を期待しています。GoogleのCore Web Vitals（CWV）はその体験を数値化します：Largest Contentful Paint（LCP）、First Input Delay（FID）、Cumulative Layout Shift（CLS）です。スコアが悪いとSEOとコンバージョンに悪影響を及ぼします。このガイドでは、各指標を測定し改善するための実践的な手順を紹介します。

Core Web Vitalsとは？

Core Web Vitalsは、Googleがランキングシグナルとして使用する3つのユーザー中心の指標です：

LCP：最大のコンテンツ要素（画像、テキストブロック）が表示されるまでの時間。良好：≤2.5秒。
FID：最初のユーザーインタラクション（クリック、タップ）からブラウザの応答までの時間。良好：≤100ミリ秒。
CLS：視覚的安定性—ページレイアウトが予期せずどれだけシフトするか。良好：≤0.1。

これらの指標は、単なるラボ環境ではなく実際のユーザー体験を反映しています。改善することで、サイトがより速く安定して感じられます。

Core Web Vitalsの測定方法

ラボデータとフィールドデータの両方が必要です。ラボツールはデバッグに役立ち、フィールドデータ（リアルユーザーモニタリング）は実際のパフォーマンスを示します。

ラボツール

Lighthouse（Chrome DevTools内）：パフォーマンス、アクセシビリティ、SEOの監査を実行します。LCP、CLS、TBT（FIDの代理指標）を報告します。
WebPageTest：フィルムストリップとウォーターフォールチャートによる高度なテスト。
Chrome DevTools Performanceパネル：ランタイムパフォーマンスを記録・分析します。

フィールドツール

Chrome User Experience Report（CrUX）：数百万のサイトの実ユーザー指標の公開データセット。
Google Search Console：Core Web Vitalsレポートで注意が必要なURLグループを表示します。
web-vitals JavaScriptライブラリ：実ユーザー指標を収集し、アナリティクスに送信します。

フィールドデータを使用して問題のあるページを特定し、ラボツールで診断・修正します。

Largest Contentful Paint（LCP）の改善

LCPは多くの場合、ヒーロー画像やメイン見出しです。高速化するには：

画像を最適化：圧縮し、モダンなフォーマット（WebP、AVIF）を使用し、レスポンシブサイズで配信します。Image Compressorのようなツールは、品質を損なわずにファイルサイズを削減するのに役立ちます。
重要なリソースをプリロード：ヒーロー画像、フォント、主要なCSSに<link rel="preload">を使用します。
サーバー応答時間を短縮：キャッシュ、CDNを使用し、バックエンドクエリを最適化します。
レンダーブロッキングリソースを排除：重要でないJSとCSSを遅延させ、クリティカルCSSをインライン化します。
CDNを使用：ユーザーに近い場所からアセットを配信します。

例：LCP画像をプリロードする：

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

First Input Delay（FID）の改善

FIDは応答性を測定します。遅延が長いということは、メインスレッドがビジー状態であることを意味します。改善するには：

長いタスクを分割：setTimeoutやrequestIdleCallbackを使用してメインスレッドに譲ります。
JavaScriptを最適化：コード分割、ツリーシェイキング、重要でないスクリプトの遅延読み込みを行います。
サードパーティの影響を軽減：アナリティクスや広告を非同期で、またはインタラクション後に読み込みます。
Web Workersを活用：重い計算に使用します。

また、2024年3月にFIDを置き換えるInteraction to Next Paint（INP）も考慮してください。INPはページのライフサイクル全体を通じた全体的な応答性を測定します。同じ最適化が適用されます。

Cumulative Layout Shift（CLS）の改善

CLSは要素が予期せず移動するときに発生します。一般的な原因：寸法のない画像、広告、フォント、動的コンテンツ。修正方法：

画像と動画には常に幅と高さを設定するか、CSSのaspect-ratioを使用します。
広告と埋め込み用のスペースを確保：固定サイズのプレースホルダー要素を使用します。
既存のコンテンツの上にコンテンツを挿入しない（ユーザーインタラクションへの応答の場合を除く）。
font-display: swapを使用し、フォントをプリロードして、不可視テキスト（FOIT）とレイアウトシフトを回避します。
レイアウトをトリガーするプロパティではなくtransformでアニメーションします。

例：レスポンシブ画像のアスペクト比を設定する：

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

ツールとワークフロー

パフォーマンスを開発ワークフローに統合します：

CIでLighthouseを実行してリグレッションを検出します。
web-vitalsライブラリを使用してフィールドデータをアナリティクスに送信します。
CrUXとSearch Consoleを監視して実ユーザーのトレンドを把握します。
影響度に基づいて修正を優先します：多くの場合、LCPとCLSが最大の改善をもたらします。

簡単な画像最適化には、Image Compressorを試して、LCPに重要な画像を削減してください。

FAQ

Core Web Vitalsの現在のしきい値は？

LCP：良好≤2.5秒、改善が必要≤4秒、不良>4秒。FID：良好≤100ミリ秒、改善が必要≤300ミリ秒、不良>300ミリ秒。CLS：良好≤0.1、改善が必要≤0.25、不良>0.25。

Core Web Vitalsはどのくらいの頻度で測定すべきですか？

RUMを介してフィールドデータを継続的に監視します。重要なコード変更ごと、および少なくとも月に一度ラボ監査を実行してリグレッションを検出します。

Core Web Vitalsの改善は本当にSEOに影響しますか？

はい、Googleはページエクスペリエンス（CWVを含む）をランキングシグナルとして使用しています。コンテンツが依然として主要ですが、良好なCWVは優位性をもたらし、ユーザー満足度を向上させます。