Core Web Vitals：測定と改善の方法

ユーザーは高速で応答性の高いページを期待しています。GoogleのCore Web Vitals（CWV）はその体験を定量化します：Largest Contentful Paint（LCP）は読み込みを、Interaction to Next Paint（INP）はインタラクティブ性を、Cumulative Layout Shift（CLS）は視覚的安定性を測定します。スコアが悪いとユーザー満足度が低下し、検索順位に影響を与える可能性があります。このガイドでは、CWVを正確に測定する方法と、実践的な手順で一般的な問題を修正する方法を説明します。

Core Web Vitalsとは？

Core Web Vitalsは、実際のユーザー体験を反映する3つの指標です：

• LCP：最大のコンテンツ要素（画像、テキストブロック）がレンダリングされるまでの時間。良好：≤2.5秒。
• INP：ユーザーのインタラクションから次のペイントまでの時間。良好：≤200ms。
• CLS：レイアウトシフトスコアの合計。良好：≤0.1。

これらの閾値はページ読み込みの75パーセンタイルで評価されます。つまり、訪問の75%が目標を満たす必要があります。

Core Web Vitalsの測定方法

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

ラボツール

• Chrome DevToolsのLighthouse：パフォーマンス、アクセシビリティ、SEOの監査を実行します。ラボのCWVスコアと改善の機会を提供します。
• WebPageTest：カスタムネットワーク条件とデバイスエミュレーションを備えた高度なテスト。

フィールドツール

• Chrome UX Report（CrUX）：実ユーザー指標の公開データセット。PageSpeed InsightsまたはBigQuery経由でアクセスできます。
• web-vitals JavaScriptライブラリ：実際のユーザーからCWVを収集し、アナリティクスに送信します。

フィールドデータを使用して実際の問題を特定し、ラボツールでデバッグと修正の検証を行います。

Largest Contentful Paint（LCP）の改善

LCPは多くの場合、ヒーロー画像またはメイン見出しです。これらの要素を最適化します：

1. 画像を最適化：画像を圧縮し、WebPやAVIFなどの最新フォーマットを使用し、srcsetでレスポンシブサイズを提供します。
2. 重要なリソースをプリロード：LCP画像またはフォントに<link rel="preload">を追加します。
3. サーバー応答時間を短縮：キャッシング、CDN、効率的なバックエンドコードを使用します。
4. レンダリングブロックリソースを排除：重要でないCSS/JSを遅延させ、クリティカルCSSをインライン化します。

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

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

また、<img>タグにfetchpriority="high"を設定して重要度を示します。

Interaction to Next Paint（INP）の改善

INPはクリック、タップ、キーボード入力への応答性を測定します。長いタスクはメインスレッドをブロックします。INPを改善するには：

• 長いタスクを分割：setTimeoutまたはrequestIdleCallbackを使用してブラウザに制御を譲ります。
• イベントハンドラを最適化：コストのかかる操作をデバウンスまたはスロットルします。
• JavaScriptを削減：コード分割、ツリーシェイキング、重要でないスクリプトの遅延を行います。
• Web Workersを使用してCPU集中型の作業を行います。

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

async function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

async function handleClick() {
  // 何らかの処理
  await yieldToMain();
  // 続行
}

Cumulative Layout Shift（CLS）の改善

CLSは要素が予期せず移動するときに発生します。一般的な原因：寸法のない画像、広告、埋め込み、Webフォント。

• 画像と動画に幅と高さを設定するか、CSSのaspect-ratioを使用します。
• 動的コンテンツ（広告、埋め込み）のスペースを確保するためにmin-heightを使用します。
• font-display: swapを使用し、フォントをプリロードして、非表示テキストによるシフトを防ぎます。
• ユーザーインタラクションによってトリガーされない限り、既存のコンテンツの上にコンテンツを挿入しないようにします。

例：広告のスペースを確保する：

.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

指標とツールの比較

CWVを改善する実践的なワークフロー

1. PageSpeed InsightsまたはCrUXでフィールドデータを測定し、スコアが悪いページを特定します。
2. それらのページでLighthouseを実行し、具体的な改善機会を取得します。
3. 影響度で修正を優先：多くの場合、LCPとCLSが最も改善しやすいです。
4. 変更を実装し、ラボでテストします。
5. デプロイしてフィールドデータを監視し、改善を確認します。
6. 残りの問題について反復します。

CWVはユーザー中心であることを忘れずに、常に実ユーザーデータで検証してください。

FAQ

Core Web Vitalsとは何ですか？なぜ重要ですか？

Core Web Vitalsは、読み込み、インタラクティブ性、視覚的安定性を定量化する3つの指標（LCP、INP、CLS）です。これらは実際のユーザー体験を反映し、Googleがランキングシグナルとして使用するため重要です。

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

フィールドデータを継続的に監視し、大きな変更後にラボテストを実行します。CrUXデータの月次レビューは良い習慣です。

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

はい。画像最適化、プリロード、レイアウト修正などの多くの改善は、完全な再構築なしで段階的に適用できます。

LCPを高速化するために画像を圧縮する必要がありますか？無料のImage Compressorを試して、品質を損なわずにファイルサイズを削減しましょう。