Core Web Vitals：SEO向上のための測定と改善
なぜCore Web Vitalsがあなたのウェブサイトにとって重要なのか
高速で機能豊富なウェブサイトを構築したのに、ユーザーはまだ遅いと不満を言い、検索順位も下落しています。犯人はCore Web Vitalsかもしれません。これはGoogleが実際のユーザー体験を定量化するために定めた指標です。2021年以降、これらの指標は確認されたランキング要因であり、直帰率やコンバージョンに直接影響します。無視すれば、トラフィックと収益を失うことになります。
このガイドでは、各指標の意味、正確な測定方法、そして今日から実装できる段階的な改善策を学びます。
Core Web Vitalsとは？
Core Web Vitalsは、読み込み、インタラクティブ性、視覚的安定性を捉える3つの特定の指標です：
- Largest Contentful Paint (LCP)：読み込みパフォーマンスを測定します。最大のコンテンツ要素（画像、テキストブロック、動画）が表示されるまでの時間を示します。良好なLCPは2.5秒以下です。
- Interaction to Next Paint (INP)：応答性を測定します。すべてのインタラクション（クリック、タップ、キー押下）のレイテンシを記録し、単一の値を報告します。良好なINPは200ミリ秒以下です。INPは2024年3月にFirst Input Delay (FID)を置き換えました。
- Cumulative Layout Shift (CLS)：視覚的安定性を測定します。ページ読み込み中の予期しないレイアウトシフトを定量化します。良好なCLSは0.1以下です。
これらの指標はフィールドベースであり、ラボテストではなく実際のユーザーデータから得られます。そのため、Chrome User Experience Report (CrUX)やPageSpeed Insightsなどのツールがこれらを使用します。
Core Web Vitalsの測定方法
完全な全体像を得るには、ラボデータとフィールドデータの両方が必要です。ラボツールはデバッグに役立ち、フィールドデータは実際のユーザー体験を示します。
フィールドツール（実際のユーザーデータ）
- PageSpeed Insights：URLを入力すると、ラボデータとフィールドデータの両方が表示されます。フィールドセクションはCrUXから取得します。
- Search Console：Core Web Vitalsレポートは、URLをステータス（Poor、Needs Improvement、Good）別にグループ化します。
- Chrome UX Report (CrUX)：BigQueryまたはCrUX API経由で生データにアクセスできます。
- web-vitals JavaScriptライブラリ：この軽量スクリプトをサイトに追加して、実際のユーザーから指標を収集し、アナリティクスに送信します。
ラボツール（合成テスト）
- Lighthouse：Chrome DevToolsに組み込まれています。実行してラボスコアと改善の機会を取得します。
- WebPageTest：フィルムストリップ、ウォーターフォールチャート、カスタムスロットリングを備えた高度なテスト。
- Chrome DevTools Performanceパネル：ランタイムパフォーマンスを記録・分析します。
すぐに始めるには、PageSpeed Insightsを使用してください。ラボデータとフィールドデータを1つのレポートにまとめます。
ステップバイステップ：LCPの改善
LCPは、以下の手順で改善するのが最も簡単なことが多いです：
- 画像を最適化する：品質を損なわずに画像を圧縮します。WebPやAVIFなどのモダンなフォーマットを使用します。Image Compressorなどのツールが役立ちます。
- LCP要素をプリロードする：ヒーロー画像やフォントに
<link rel="preload">を追加します。 - サーバー応答時間を短縮する：CDNを使用し、キャッシュを有効にし、バックエンドコードを最適化します。Nginxの場合は、Nginx Log Analyzerでログを確認して遅いリクエストを特定します。
- レンダリングをブロックするリソースを排除する：クリティカルCSSをインライン化し、非クリティカルなJavaScriptを遅延させ、
asyncまたはdefer属性を使用します。 - CDNを使用する：ユーザーに近い場所からアセットを配信します。
ステップバイステップ：INPの改善
INPは応答性を測定します。高いINPは、多くの場合、長いJavaScriptタスクから生じます。
- 長いタスクを分割する：
setTimeoutやrequestIdleCallbackを使用してメインスレッドに譲ります。 - イベントハンドラを最適化する：高コストな操作をデバウンスまたはスロットルします。
- JavaScriptを削減する：未使用コードを削除し、コード分割し、非クリティカルなスクリプトを遅延読み込みします。
- Web Workersを使用する：重い計算をメインスレッドから移動します。
- 大きなDOMサイズを避ける：可能な限りDOMを1,500ノード以下に保ちます。
ステップバイステップ：CLSの改善
CLSは視覚的安定性に関するものです。以下の戦術で予期しないシフトを防ぎます：
- 画像と動画にサイズ属性を設定する：常に
widthとheightを含めます。 - 広告と埋め込み用のスペースを確保する：CSSの
aspect-ratioまたは固定コンテナを使用します。 - 既存のコンテンツの上にコンテンツを挿入しない：どうしても必要な場合は、プレースホルダーを使用するか、シフトをアニメーション化します。
- font-display: swapを使用する：フォント読み込み中の不可視テキストを防ぎます（ただし、わずかなシフトが発生する可能性があります。クリティカルフォントには
font-display: optionalを検討してください）。 - フォントをプリロードする：遅れて読み込まれるフォントによるレイアウトシフトを減らします。
Core Web Vitals指標の比較
| 指標 | 測定内容 | 良好なしきい値 | 主な修正方法 |
|---|---|---|---|
| LCP | 読み込みパフォーマンス | ≤ 2.5秒 | 画像の最適化、プリロード、CDN |
| INP | 応答性 | ≤ 200ミリ秒 | 長いタスクの分割、JSの削減 |
| CLS | 視覚的安定性 | ≤ 0.1 | サイズの設定、スペースの確保 |
モニタリングと継続的改善
パフォーマンスは一度きりの修正ではありません。リアルユーザーモニタリング（RUM）を設定して、Core Web Vitalsを経時的に追跡します。web-vitalsライブラリを使用して、指標をアナリティクスプラットフォームに送信します。劣化に対するアラートを設定します。CI/CDパイプラインで定期的にLighthouseを監査し、問題が本番環境に到達する前にキャッチします。
FAQ
Core Web Vitalsの現在のしきい値は？
LCPでは、良好は≤2.5秒、改善が必要は≤4.0秒、不良は>4.0秒です。INPでは、良好は≤200ミリ秒、改善が必要は≤500ミリ秒、不良は>500ミリ秒です。CLSでは、良好は≤0.1、改善が必要は≤0.25、不良は>0.25です。
Core Web Vitalsはどのくらいの頻度で測定すべきですか？
実際のユーザーデータで継続的に監視します。重要なコード変更後と少なくとも月に一度はラボテストを実行します。Search Consoleのフィールドデータは毎日更新されますが、28日間のローリングウィンドウを反映します。
開発者なしでCore Web Vitalsを改善できますか？
画像圧縮やキャッシュなどの一部の修正は、プラグインやツールで実行できます。ただし、JavaScriptの削減やサーバーチューニングなどのより深い最適化には、多くの場合開発者の関与が必要です。
サイトを高速化する準備はできましたか？まず、無料のImage Compressorで画像を圧縮して、LCPを迅速に改善しましょう。