Core Web Vitals：ウェブパフォーマンスを測定・改善する方法
高速なウェブサイトを構築したのに、ユーザーからは読み込みが遅い、操作がカクカクするといった不満がまだ寄せられていませんか？ 検索エンジンもCore Web Vitalsのスコアが低いために順位を下げている可能性があります。これらの指標 — Largest Contentful Paint（LCP）、First Input Delay（FID）、Cumulative Layout Shift（CLS）— は、ユーザー体験とSEOに直接影響します。このガイドでは、これらの指標を測定し改善するための実践的な手順を紹介します。
Core Web Vitalsとは？
Core Web Vitalsは、ユーザー体験の重要な側面（読み込み、インタラクティブ性、視覚的安定性）を定量化するためにGoogleが定義した指標のセットです。具体的には以下の3つです：
- Largest Contentful Paint（LCP）： 読み込みパフォーマンスを測定します。ページの表示開始から2.5秒以内に発生する必要があります。
- First Input Delay（FID）： インタラクティブ性を測定します。100ミリ秒未満である必要があります。
- Cumulative Layout Shift（CLS）： 視覚的安定性を測定します。0.1未満である必要があります。
これらの指標はGoogleのページエクスペリエンスシグナルの一部であり、検索順位に影響を与える可能性があります。
Core Web Vitalsの測定方法
Core Web Vitalsは、ラボ環境（合成テスト）またはフィールド環境（実ユーザーモニタリング）で測定できます。どちらにもそれぞれの役割があります。
ラボツール
- Lighthouse： Chrome DevToolsに組み込まれており、パフォーマンスを監査し、LCP、CLS、Total Blocking Time（TBT、FIDの代理指標）のスコアを提供します。
- PageSpeed Insights： ラボデータとChrome User Experience Report（CrUX）からのフィールドデータを組み合わせます。
- WebPageTest： カスタムの場所やデバイスを使用した高度なテストを提供します。
フィールドツール
- Chrome User Experience Report（CrUX）： 数百万のサイトの実際のユーザーデータを集計して提供します。
- web-vitalsライブラリ： 実際のユーザーから指標をキャプチャし、アナリティクスに送信するためのJavaScriptライブラリです。
- Search Console： CrUXデータに基づいて、サイトのCore Web Vitalsの状態を表示します。
デバッグにはラボツールから始め、実際のパフォーマンスを確認するためにフィールドデータで検証しましょう。
Largest Contentful Paint（LCP）の改善
LCPは、最大のコンテンツ要素（多くの場合、ヒーロー画像や見出し）が表示されるまでの時間を測定します。LCPを改善するには：
- 画像を最適化する： 画像を圧縮し、WebPやAVIFなどのモダンなフォーマットを使用し、
srcsetでレスポンシブ画像を配信します。 - 重要なリソースをプリロードする： 主要な画像、フォント、スタイルシートには
<link rel="preload">を使用します。 - サーバー応答時間を短縮する： CDNを使用し、キャッシュを有効にし、バックエンドのパフォーマンスを最適化します。
- レンダリングをブロックするリソースを排除する： クリティカルCSSをインライン化し、非クリティカルなJavaScriptを遅延させ、大きなCSSファイルを避けます。
- コンテンツデリバリーネットワーク（CDN）を使用する： ユーザーに近い場所からアセットを配信します。
画像の最適化には、品質を落とさずにファイルサイズを削減できるImage Compressorをお試しください。
First Input Delay（FID）の改善
FIDは、ユーザーが最初にページを操作してからブラウザが応答できるまでの時間を測定します。FIDを改善するには：
- JavaScriptの実行を最小限にする： 長いタスクを分割し、コード分割を使用し、非クリティカルなスクリプトを遅延させます。
- サードパーティスクリプトを最適化する： 非同期で読み込むか、クリティカルなコンテンツの後まで遅延させます。
- Web Workerを使用する： 重い計算をワーカースレッドにオフロードします。
- メインスレッドの作業を減らす： 大きな同期スクリプトや過剰なDOMサイズを避けます。
LighthouseのTBT指標などのツールは、長いタスクを特定するのに役立ちます。
Cumulative Layout Shift（CLS）の改善
CLSは、ページ読み込み中の予期しないレイアウトシフトを測定します。CLSを改善するには：
- 画像や動画に常にwidthとheight属性を含める： これによりスペースが確保され、シフトを防ぎます。
- 広告や埋め込み要素のスペースを確保する： CSSの
aspect-ratioまたは固定サイズを使用します。 - 既存のコンテンツの上にコンテンツを挿入しない： ユーザーの操作に応じた場合を除きます。
- アニメーションにはCSS transformsを使用する： レイアウトをトリガーするプロパティの代わりに使用します。
- フォントをプリロードする：
font-display: swapを使用し、プリロードして不可視テキストによるシフトを避けます。
Core Web Vitalsのしきい値の比較
| 指標 | 良好 | 改善が必要 | 不良 |
|---|---|---|---|
| LCP | ≤ 2.5秒 | 2.5秒 – 4.0秒 | > 4.0秒 |
| FID | ≤ 100ミリ秒 | 100ミリ秒 – 300ミリ秒 | > 300ミリ秒 |
| CLS | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
実践的な最適化ワークフロー
Core Web Vitalsを改善するには、次の段階的なアプローチに従ってください：
- 測定する： Lighthouseを実行し、Search Consoleでフィールドデータを確認します。
- 問題を特定する： 最もスコアが悪い指標に焦点を当てます。
- 修正を適用する： LCP、FID、CLSに対して上記のヒントを使用します。
- 再度テストする： 監査を再実行して改善を確認します。
- 監視する： web-vitalsライブラリを使用して、実際のユーザー指標を経時的に追跡します。
パフォーマンスは継続的な取り組みであることを忘れないでください。機能を追加する際は、定期的にサイトを監査しましょう。
よくある質問
Core Web Vitalsとは何ですか？
Core Web Vitalsは、LCP、FID、CLSという3つの指標で、読み込み、インタラクティブ性、視覚的安定性を測定します。Googleがランキングシグナルとして使用しています。
Core Web Vitalsはどのくらいの頻度で確認すべきですか？
大きな変更後と、少なくとも月に1回は確認しましょう。ラボデータとフィールドデータの両方を使用して、リグレッションを検出します。
開発者なしでCore Web Vitalsを改善できますか？
画像の圧縮や画像への寸法の追加など、一部の修正はコンテンツ編集者でも行えます。その他は開発者の助けが必要な場合があります。
より良いLCPのために画像を最適化する準備はできましたか？ 無料のImage Compressorを試して、ファイルサイズを削減し、サイトを高速化しましょう。