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

高速なウェブサイトを構築したのに、ユーザーは依然として遅いと不満を言い、検索順位も期待通りではありません。問題は何か？それは、正しい指標を測定していないことです。Core Web Vitals（CWV）は、Googleが提唱する実ユーザー体験の指標です：Largest Contentful Paint（LCP）、Interaction to Next Paint（INP）、Cumulative Layout Shift（CLS）。これらを無視すると、パフォーマンスとSEOの両方を逃すことになります。

このガイドでは、CWVを正確に測定し、よくある問題を修正する方法を紹介します。無駄な話は抜きで、実行可能なステップだけを解説します。

Core Web Vitalsとは？

Core Web Vitalsは、ユーザーが読み込み、インタラクティブ性、視覚的安定性をどのように認識するかを定量化する3つの特定の指標です：

• LCPは読み込みパフォーマンスを測定します。最大のコンテンツ要素（画像、動画、テキストブロック）が表示されるまでの時間を示します。目標は2.5秒以下です。
• INPは応答性を測定します。すべてのインタラクション（クリック、タップ、キー押下）のレイテンシを記録し、高いパーセンタイル値を報告します。目標は200ミリ秒以下です。
• CLSは視覚的安定性を測定します。予期しないレイアウトシフトを計算します。目標は0.1以下です。

これらのしきい値は、Chrome User Experience Report（CrUX）の実ユーザーデータに基づいています。これらを満たすことでユーザー満足度が向上し、検索順位の向上にもつながります。

Core Web Vitalsの測定方法

ラボデータとフィールドデータの両方が必要です。ラボツールは条件をシミュレートし、フィールドデータは実際のユーザーを反映します。

ラボツール

• Lighthouse（Chrome DevToolsまたはCI内）は、診断情報を含むスナップショットを提供します。
• PageSpeed Insightsは、URLのラボデータとフィールドデータを組み合わせます。
• Web Vitals Extensionは、閲覧中にChromeコンソールでCWVをログに記録します。

フィールドツール

• Chrome UX Report（CrUX）は、数百万のサイトの集計された実ユーザーデータを表示します。
• web-vitals JavaScriptライブラリを使用すると、自分のユーザーからCWVを収集し、アナリティクスに送信できます。
• Search Consoleは、CrUXに基づいてサイトのCWVステータスを報告します。

まずフィールドデータで問題のあるページを特定し、次にラボツールでデバッグします。

LCPの改善

LCPは、いくつかの的を絞った修正で改善するのが最も簡単な場合が多いです。

1. 画像を最適化する。 モダンなフォーマット（WebP、AVIF）を使用し、目に見える品質劣化なしで圧縮し、明示的なwidth/heightを設定します。Image Compressorのようなツールがファイルサイズの削減に役立ちます。
2. LCP画像をプリロードする。 head内に<link rel="preload" as="image" href="#">を追加します。
3. レンダリングをブロックするリソースを排除する。 クリティカルCSSをインライン化し、非クリティカルなCSS/JSを遅延させ、head内の同期スクリプトを避けます。
4. CDNを使用する。 ユーザーに近い場所からアセットを配信してレイテンシを削減します。
5. テキスト圧縮を有効にする。 HTML、CSS、JSにBrotliまたはgzipを使用します。

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

<link rel="preload" as="image" href="/images/hero.avif" type="image/avif">

INPの改善

INPは、ページがユーザー入力にどれだけ迅速に応答するかを測定します。長いタスクはメインスレッドをブロックし、インタラクションを遅延させます。

1. 長いタスクを分割する。 setTimeoutやrequestIdleCallbackを使用してメインスレッドに譲ります。
2. イベントハンドラを最適化する。 scrollやresizeのような高頻度イベントをデバウンスまたはスロットルします。
3. JavaScriptを削減する。 コード分割、ツリーシェイキング、非クリティカルスクリプトの遅延読み込みを行います。
4. Web Workersを重い計算に使用します。
5. 大きなDOMサイズを避ける。 可能であればDOMを1500ノード以下に保ちます。

メインスレッドに譲る例：

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    await scheduler.yield();
  } else {
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

CLSの改善

レイアウトシフトは、要素が予期せず位置を変えたときに発生します。一般的な原因：寸法のない画像、広告、埋め込み、動的に挿入されたコンテンツです。

1. 画像と動画に常にwidthとheightを設定する。 これによりブラウザがスペースを確保できます。
2. 広告と埋め込み用のスペースを確保する。 CSS aspect-ratioまたは固定コンテナを使用します。
3. ユーザーインタラクションによってトリガーされない限り、既存のコンテンツの上にコンテンツを挿入しない。
4. font-display: swapを使用し、フォントをプリロードして不可視テキストのシフトを避けます。
5. アニメーションに注意する。 レイアウトをトリガーするプロパティの代わりにtransformとopacityを使用します。

監視と継続的改善

パフォーマンスは一度きりの修正ではありません。リグレッションを捕捉するために監視を設定します。

• web-vitalsライブラリを使用してCWVをアナリティクスに送信します：

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon('/analytics', body);
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

• 指標がしきい値を超えたときのアラートを設定します。
• すべてのプルリクエストでCI内のLighthouseを実行します。
• 毎月CrUXデータをレビューしてトレンドを追跡します。

Core Web Vitalsの比較

FAQ

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

LCP：良好≤2.5s、改善が必要≤4.0s、不良>4.0s。INP：良好≤200ms、改善が必要≤500ms、不良>500ms。CLS：良好≤0.1、改善が必要≤0.25、不良>0.25。

Core Web Vitalsはどのくらいの頻度で確認すべき？

アナリティクスでフィールドデータを継続的に監視します。CrUXとSearch Consoleは毎月レビューします。重要なコード変更ごとにラボテスト（Lighthouse）を実行します。

開発者なしでCore Web Vitalsを改善できますか？

画像の圧縮やキャッシュの有効化など一部の修正は、プラグインやホスティング設定で可能です。しかし、より深い最適化（コード分割、JSの削減）には通常開発者の関与が必要です。

より良いLCPのために画像を最適化する準備はできましたか？無料のImage Compressorを試して、品質を損なわずにファイルサイズを削減しましょう。