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

モダンなWebアプリを構築したのに、ユーザーから遅いと苦情が来る。検索順位は下がり、直帰率は上昇している。原因はCore Web Vitalsの低下かもしれません。Core Web VitalsはGoogleが提唱する実世界のユーザー体験を測る指標です。このガイドでは、Core Web Vitalsとは何か、正確に測定する方法、そしてそれぞれを改善するための実践的な手順を学びます。

Core Web Vitalsとは？

Core Web Vitalsは、ユーザー体験の重要な側面を数値化する3つの指標です：

• Largest Contentful Paint (LCP)：最大のコンテンツ要素（画像やテキストブロック）が表示されるまでの時間。良好：≤ 2.5秒。
• Interaction to Next Paint (INP)：応答性を測定—ユーザーの操作（クリック、タップ、キー押下）から次の視覚的更新までの時間。良好：≤ 200ms。
• Cumulative Layout Shift (CLS)：予期しないレイアウトシフトを数値化。良好：≤ 0.1。

これらの指標はGoogleのページエクスペリエンスシグナルの一部であり、SEOとユーザー満足度に直接影響します。

Core Web Vitalsの測定方法

ラボデータとフィールドデータの両方が必要です。ラボデータはデバッグに役立ち、フィールドデータは実際のユーザーを反映します。

ラボツール

• Chrome DevToolsのLighthouse：監査を実行してLCP、CLS、TBT（INPの代理指標）を取得します。
• WebPageTest：フィルムストリップとウォーターフォールチャートによる高度なテスト。
• PageSpeed Insights：ラボデータとフィールドデータを組み合わせます。

フィールドツール

• Chrome UX Report (CrUX)：実ユーザー指標の公開データセット。
• web-vitalsライブラリ：指標をアナリティクスに送信します。

例：web-vitalsライブラリを使用して指標をログに記録する：

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);

LCPの改善

LCPは多くの場合、修正するのが最も効果的な指標です。一般的な原因：遅いサーバー応答、レンダリングをブロックするリソース、最適化されていない画像。

1. 画像を最適化：圧縮し、モダンなフォーマット（WebP/AVIF）を使用し、サイズを設定します。簡単な圧縮には、Image Compressorをお試しください。
2. 重要なリソースをプリロード：ヒーロー画像やフォントに<link rel="preload">を使用します。
3. サーバー応答時間を短縮：キャッシュ、CDN、バックエンドクエリの最適化を使用します。
4. レンダリングをブロックするリソースを排除：クリティカルCSSをインライン化し、非クリティカルなJSを遅延させます。

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

<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

INPの改善

INPは応答性を測定します。長いタスクはメインスレッドをブロックし、視覚的フィードバックを遅らせます。

1. 長いタスクを分割：setTimeoutやscheduler.yieldを使用してメインスレッドに制御を戻します。
2. イベントハンドラを最適化：適切な場所でデバウンスとスロットルを適用し、重い同期処理を避けます。
3. JavaScriptを削減：コード分割、ツリーシェイキング、非クリティカルなスクリプトの遅延読み込みを行います。
4. Web Workerを使用してCPU負荷の高いタスクを処理します。

例：scheduler.yieldで制御を戻す（サポートされている場合）：

async function handleClick() {
  // 何らかの処理
  await scheduler.yield();
  // 制御を戻した後に続行
}

CLSの改善

CLSは視覚的安定性に関するものです。レイアウトシフトは、要素が予期せず位置を変えたときに発生します。

1. 画像や動画にサイズ属性（width/height）を設定します。
2. 広告や埋め込み用のスペースを確保：CSSのaspect-ratioまたは固定サイズを使用します。
3. ユーザー操作によってトリガーされない限り、既存のコンテンツの上にコンテンツを挿入しない。
4. レイアウトをトリガーするプロパティの代わりにtransformアニメーションを使用します。

例：aspect-ratioでスペースを確保する：

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Core Web Vitalsの比較

ツールとワークフロー

パフォーマンス監視をCI/CDパイプラインに統合します。Lighthouse CIを使用してリグレッションを検出します。フィールドデータには、web-vitalsとアナリティクスを組み合わせたダッシュボードを設定します。

画像を最適化する際は、サイトにアップロードする前にImage Compressorで簡単に圧縮できます。

FAQ

Core Web Vitalsとは何ですか？

Core Web Vitalsは、GoogleがWebページのユーザー体験を測定するために使用する3つの指標—LCP、INP、CLS—です。

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

フィールドではアナリティクスを通じて継続的に、ラボではLighthouse CIを使用して各デプロイ時に測定し、リグレッションを検出します。

サイトを再設計せずにCore Web Vitalsを改善できますか？

はい。画像の最適化、プリロード、サイズ設定など、多くの改善は完全な再設計なしに段階的に行えます。

まずLighthouseで現在のスコアを測定し、最も影響の大きい指標に取り組みましょう。小さく一貫した最適化が、ユーザー体験とSEOに大きな向上をもたらします。