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

Core Web Vitalsが重要な理由

高速なウェブサイトを構築したのに、ユーザーからは読み込みの遅さやぎこちない操作についての不満が依然として寄せられるかもしれません。また、Core Web Vitals（CWV）のスコアが低いと、検索エンジンでのランキングが下がる可能性もあります。CWVは、Googleがユーザー体験を定量化するために使用する一連の指標であり、Largest Contentful Paint（LCP）、First Input Delay（FID）、Cumulative Layout Shift（CLS）が含まれます。2021年、Googleはこれらの指標をランキング要因にしたため、無視するとSEOとユーザー維持率に悪影響を及ぼす可能性があります。

このガイドでは、各指標の測定方法、一般的な問題の特定方法、実践的な修正方法の適用方法を説明します。すべてのエッジケースを掘り下げるのではなく、今日から実行できる実用的な手順に焦点を当てます。

3つのCore Web Vitalsを理解する

最適化する前に、各指標が何を測定し、そのしきい値がどのくらいかを知っておきましょう。

注：FIDは2024年3月にInteraction to Next Paint（INP）に置き換えられる予定ですが、最適化の原則は同様です。ここではまだ広く参照されているFIDに焦点を当てます。

Core Web Vitalsの測定方法

ラボデータとフィールドデータの両方が必要です。ラボデータ（合成的）はデバッグに役立ち、フィールドデータ（実際のユーザー）は実際のパフォーマンスを示します。

ラボツール

• Chrome DevToolsのLighthouse：パフォーマンス、アクセシビリティ、SEOの監査を実行します。LCP、CLS、TBT（FIDの代理指標）を報告します。
• WebPageTest：フィルムストリップとウォーターフォールチャートを使用した高度なテスト。
• PageSpeed Insights：ラボデータとフィールドデータ（利用可能な場合）を組み合わせます。

フィールドツール

• Chrome User Experience Report（CrUX）：実際のユーザー指標の公開データセット。PageSpeed InsightsまたはBigQuery経由でアクセスできます。
• web-vitals JavaScriptライブラリ：アナリティクスで実際のユーザー指標を収集します。
• Search ConsoleのCore Web Vitalsレポート：問題のあるURLグループを表示します。

まずPageSpeed Insightsで概要を把握し、次にLighthouseで詳細な診断を行いましょう。

Largest Contentful Paint（LCP）の改善

LCPは、サーバー応答の遅さ、レンダリングをブロックするリソース、最適化されていない画像によって悪化することがよくあります。次の手順に従ってください：

1. サーバー応答時間を最適化する：キャッシュ、CDN、効率的なバックエンドコードを使用します。Time to First Byte（TTFB）を0.8秒未満に抑えることを目指します。
2. レンダリングをブロックするリソースを排除する：クリティカルCSSをインライン化し、非クリティカルなCSSとJavaScriptを遅延させます。スクリプトにはasyncまたはdeferを使用します。
3. 画像を最適化する：画像を圧縮し、最新のフォーマット（WebP、AVIF）を使用し、srcsetでレスポンシブ画像を実装します。LCP画像の場合は、<link rel="preload">でプリロードします。
4. CDNを使用する：エッジロケーションから静的アセットを配信します。
5. アセットをキャッシュする：静的リソースに長いキャッシュ寿命を設定します。

例：LCP画像をプリロードし、レイアウトシフトを避けるために明示的な寸法を設定します。

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">
<img src="/hero.webp" srcset="/hero-480.webp 480w, /hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero" width="800" height="600">

First Input Delay（FID）の改善

FIDは応答性を測定します。長いJavaScriptタスクはメインスレッドをブロックし、インタラクションを遅延させます。FIDを改善するには：

• 長いタスクを分割する：setTimeoutやrequestIdleCallbackを使用してメインスレッドに制御を譲ります。
• メインスレッドの作業を最小化する：JavaScriptの実行時間を減らし、大きなバンドルを避け、コード分割を使用します。
• イベントハンドラを最適化する：高コストなハンドラをデバウンスまたはスロットルします。
• Web WorkersをCPU集約的なタスクに使用する。
• 大きなサードパーティスクリプトを避ける：不要なスクリプトを監査して削除します。

Lighthouseなどのツールは長いタスクを指摘します。Chrome DevToolsのPerformanceパネルを使用して特定します。

Cumulative Layout Shift（CLS）の改善

CLSは視覚的安定性を測定します。レイアウトシフトは、要素が予期せず位置を変えたときに発生します。一般的な原因と修正方法：

• 寸法のない画像：常にwidthとheight属性を設定するか、CSSのaspect-ratioを使用します。
• 広告、埋め込み、iframe：プレースホルダーでスペースを確保するか、固定寸法を設定します。
• 動的コンテンツ：ユーザー操作への応答でない限り、既存のコンテンツの上にコンテンツを挿入しないようにします。
• Webフォント：font-display: swapを使用し、フォントをプリロードして、不可視テキスト（FOIT）やレイアウトシフトを避けます。
• アニメーション：アニメーションにはCSSのtransformとopacityを優先します。これらはレイアウトをトリガーしないためです。

DevToolsのLayout Instability APIでテストするか、web-vitalsライブラリを使用してフィールドでCLSを記録します。

継続的なモニタリングのための実践的なワークフロー

最適化は一度きりのタスクではありません。モニタリングを設定しましょう：

1. web-vitalsライブラリでサイトを計測し、指標をアナリティクスプラットフォームに送信します。
2. 指標がしきい値を超えた場合のアラートを設定します。
3. CI/CDで定期的にLighthouseを実行して、リグレッションを検出します。
4. Search Consoleを使用してフィールドデータの傾向を監視します。

ランキングに重要なのはフィールドデータであることを忘れないでください。ラボデータはデバッグに役立ちますが、常に実際のユーザーで検証してください。

よくある質問

Core Web Vitalsの現在のしきい値は？

2023年時点のしきい値は次のとおりです：LCPは良好≤2.5秒、改善が必要2.5秒～4.0秒、不良>4.0秒；FIDは良好≤100ms、改善が必要100ms～300ms、不良>300ms；CLSは良好≤0.1、改善が必要0.1～0.25、不良>0.25。FIDは2024年にINPに置き換えられる予定であることに注意してください。

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

アナリティクスを介してフィールドデータを継続的に監視し、ラボテスト（例：Lighthouse）を各デプロイ時または少なくとも週に一度実行してください。大きな変更を行った場合は、新しい監査をトリガーする必要があります。

開発者なしでCore Web Vitalsを改善できますか？

画像の圧縮やキャッシュの有効化など、一部の修正はプラグインやホスティング設定で行えます。ただし、より深い最適化（コード分割、クリティカルCSSなど）には通常、開発作業が必要です。

LCPを改善するために画像を最適化する準備はできましたか？品質を損なわずにファイルサイズを削減する無料のImage Compressorをお試しください。