Core Web Vitals：測定と改善でウェブパフォーマンスを向上
高速なウェブサイトを構築したのに、ユーザーからは読み込みが遅い、操作がカクつくという不満がまだ寄せられていませんか？ あるいは、SEOのランキングが下がり、ページエクスペリエンスが原因ではないかと疑っているかもしれません。Core Web Vitalsは、Googleがユーザーエクスペリエンスを数値化するための指標であり、検索ランキングに直接影響します。このガイドでは、Core Web Vitalsを測定し、実践的で実行可能なステップで改善する方法を説明します。
Core Web Vitalsとは何か？
Core Web Vitalsは、Googleがウェブページのユーザーエクスペリエンスを評価するために使用する3つの指標のセットです：
- Largest Contentful Paint (LCP)：読み込みパフォーマンスを測定します。最大のコンテンツ要素（画像、動画、テキストブロックなど）が表示されるまでの時間を示します。良好なLCPは2.5秒以下です。
- First Input Delay (FID)：インタラクティブ性を測定します。ユーザーが最初にページと対話（リンクのクリックなど）してから、ブラウザが応答できるまでの時間を記録します。良好なFIDは100ミリ秒以下です。
- Cumulative Layout Shift (CLS)：視覚的な安定性を測定します。ページ読み込み中の予期しないレイアウトシフトを数値化します。良好なCLSは0.1以下です。
これらの指標はGoogleのページエクスペリエンスシグナルの一部であるため、最適化することでユーザー満足度と検索ランキングの両方を向上させることができます。
Core Web Vitalsの測定方法
改善する前に、測定する必要があります。主なツールには2つのタイプがあります：ラボツール（合成テスト）とフィールドツール（実ユーザーモニタリング）です。
ラボツール
ラボツールは、制御された環境でページの読み込みをシミュレートします。デバッグやデプロイ前の変更テストに最適です。
- Lighthouse：Chrome DevToolsに組み込まれており、パフォーマンス、アクセシビリティ、SEOを監査します。スコアと具体的な改善機会を提供します。
- WebPageTest：複数の場所やデバイスからテストでき、高度な指標とフィルムストリップを提供します。
フィールドツール
フィールドツールは実際のユーザーからデータを収集し、さまざまなデバイスやネットワークでのパフォーマンスの真の姿を提供します。
- Chrome User Experience Report (CrUX)：Chromeからの実ユーザー指標の公開データセットです。PageSpeed InsightsやBigQueryでCrUXデータを表示できます。
- Google Search Console：CrUXデータに基づいてページのパフォーマンスを示すCore Web Vitalsレポートを提供します。
- Web Vitals JavaScriptライブラリ：サイトに計測を組み込み、Core Web Vitalsデータを分析プラットフォームに送信できます。
まず、Search ConsoleまたはPageSpeed InsightsでサイトのCore Web Vitalsを確認してください。次に、Lighthouseを使用して特定のページをデバッグします。
Largest Contentful Paint (LCP)の改善
LCPは多くの場合、最適化する上で最も影響の大きい指標です。改善方法は次のとおりです：
1. 画像の最適化
- 品質を損なわずに画像を圧縮します。Image Compressorなどのツールを使用してファイルサイズを削減します。
- JPEGやPNGよりも優れた圧縮を提供するWebPやAVIFなどの最新フォーマットを使用します。
srcsetとsizes属性を使用してレスポンシブ画像を実装し、適切なサイズの画像を配信します。- フォールド以下の画像は遅延読み込みしますが、LCP画像の遅延読み込みは避けてください。
2. レンダリングをブロックするリソースの排除
- CSSとJavaScriptを最小化します。
- 重要でないJavaScriptは
deferまたはasync属性で遅延させます。 - クリティカルCSSをインライン化し、残りは非同期で読み込みます。
3. サーバー応答時間の改善
- コンテンツ配信ネットワーク（CDN）を使用して、ユーザーに近い場所からアセットを配信します。
- 静的アセットとAPIレスポンスのキャッシュを有効にします。
- データベースクエリとサーバーサイドコードを最適化します。
4. 重要なリソースのプリロード
フォント、主要な画像、後から発見されるスクリプトなどの重要なアセットには<link rel="preload">を使用します。
First Input Delay (FID)の改善
FIDは応答性を測定します。FIDが高いということは、メインスレッドがビジー状態で、ユーザー入力に迅速に応答できないことを意味します。
1. 長いタスクの分割
長いJavaScriptタスクはメインスレッドをブロックします。setTimeoutやrequestIdleCallbackを使用して、より小さなタスクに分割します。
2. JavaScript実行の最適化
- 未使用のJavaScriptを削除します（ツリーシェイキング）。
- コード分割を行い、初期読み込み時に必要なコードのみを読み込みます。
- 重い計算にはWeb Workersを使用します。
3. 大規模なサードパーティスクリプトの回避
アナリティクスや広告などのサードパーティスクリプトはメインスレッドをブロックする可能性があります。非同期で読み込み、タグマネージャーを使用して実行タイミングを制御することを検討してください。
4. JavaScriptの起動時間の短縮
ページ読み込み時に解析および実行する必要があるJavaScriptの量を最小限に抑えます。サーバーサイドレンダリングや静的サイト生成が役立ちます。
Cumulative Layout Shift (CLS)の改善
CLSは視覚的な安定性を測定します。レイアウトシフトは、要素が予期せず位置を変えたときに発生します。
1. メディアに常にサイズ属性を含める
画像や動画には、widthとheight属性を設定するか、CSSのaspect-ratioを使用してスペースを確保します。
2. 広告や埋め込み用のスペースを確保する
広告やiframeなどの動的コンテンツがある場合は、プレースホルダーや固定サイズでスペースを確保します。
3. 既存のコンテンツの上にコンテンツを挿入しない
既存のコンテンツを押し下げる動的に挿入されたコンテンツ（バナー、通知など）はシフトを引き起こします。オーバーレイを使用するか、スペースを確保してください。
4. font-display: swapの使用
カスタムフォントはFOIT（Flash of Invisible Text）やFOUT（Flash of Unstyled Text）を引き起こす可能性があります。font-display: swapを使用して、フォールバックテキストをすぐに表示します。
Core Web Vitals指標の比較
| 指標 | 測定内容 | 良好な閾値 | 一般的な原因 |
|---|---|---|---|
| LCP | 読み込みパフォーマンス | ≤ 2.5秒 | 遅いサーバー、大きな画像、レンダリングをブロックするリソース |
| FID | インタラクティブ性 | ≤ 100ミリ秒 | 長いJavaScriptタスク、重いサードパーティスクリプト |
| CLS | 視覚的な安定性 | ≤ 0.1 | サイズ属性のない画像、動的コンテンツの挿入 |
実践例：LCP用の画像最適化
LCP要素がヒーロー画像であるとします。最適化する方法は次のとおりです：
<!-- Before: Unoptimized -->
<img src="#" alt="Hero">
<!-- After: Optimized -->
<img src="#" alt="Hero" width="1200" height="600" loading="eager" fetchpriority="high">
Image Compressorを使用して画像をWebPに変換および圧縮します。fetchpriority="high"を設定して、ブラウザに早期読み込みを指示します。レイアウトシフトを防ぐために寸法を指定します。
Core Web Vitalsの経時的な監視
最適化は一度きりのタスクではありません。継続的な監視を設定します：
web-vitalsライブラリを使用して指標をアナリティクスに送信します。- Search Consoleでリグレッションのアラートを設定します。
- CI/CDパイプラインでLighthouseを使用して定期的に監査します。
FAQ
Core Web Vitalsとは何ですか？なぜ重要ですか？
Core Web Vitalsは、読み込み、インタラクティブ性、視覚的な安定性を測定する3つの指標（LCP、FID、CLS）です。実際のユーザーエクスペリエンスを反映し、Googleがランキングシグナルとして使用するため重要です。
Core Web Vitalsはどのくらいの頻度で確認すべきですか？
主要なデプロイ後に確認し、フィールドデータを継続的に監視します。Search Consoleは月次レポートを提供しますが、web-vitalsライブラリを使用してリアルタイムで追跡できます。
開発者なしでCore Web Vitalsを改善できますか？
画像の圧縮やCDNの使用など、一部の改善はプラグインやツールで行えます。ただし、より深い最適化にはコード変更が必要なことがよくあります。まずは画像圧縮とキャッシュから始めましょう。
LCPを改善する準備はできましたか？ 無料のImage Compressorで画像を圧縮して、品質を損なわずにファイルサイズを削減しましょう。