Core Web Vitals：Webパフォーマンスを測定・改善する方法
高速なウェブサイトを構築したのに、ユーザーからは遅いという不満が続く。あるいは、Googleのアップデート後にSEO順位が下がったかもしれない。原因はCore Web Vitalsにあるかもしれません。これは実際のユーザー体験を数値化する指標群です。これを無視すると、使いやすさと検索での可視性の両方が損なわれます。このガイドでは、各指標を測定し改善する方法を、今日から実践できる具体的な手順とともに解説します。
Core Web Vitalsとは？
Core Web Vitalsは、Googleがページ体験を評価するために使用する3つの特定の指標です：
- Largest Contentful Paint (LCP)：読み込みパフォーマンスを測定します。最大のコンテンツ要素（画像、動画、テキストブロック）が表示されるまでの時間を追跡します。良好なLCPは2.5秒以下です。
- Interaction to Next Paint (INP)：インタラクティブ性を測定します。すべてのインタラクション（クリック、タップ、キー押下）のレイテンシを記録し、高いパーセンタイルを報告します。良好なINPは200ミリ秒以下です。
- Cumulative Layout Shift (CLS)：視覚的な安定性を測定します。読み込み中の予期しないレイアウトシフトを数値化します。良好なCLSは0.1以下です。
これらの指標はGoogleのページ体験シグナルの一部ですが、ユーザーがサイトをどう感じるかにも直接影響します。LCPが遅いとユーザーはイライラし、INPが高いとページが反応しないように感じられ、CLSは誤クリックを引き起こします。
Core Web Vitalsの測定方法
全体像を把握するには、ラボデータとフィールドデータの両方が必要です。ラボツールは条件をシミュレートし、フィールドデータは実際のユーザーから得られます。
ラボツール
- Lighthouse：Chrome DevToolsに組み込まれており、パフォーマンスを監査し、LCP、CLS、TBT（INPの代理指標）のスコアを提供します。シークレットモードでスロットリングを有効にして実行し、モバイル条件を再現しましょう。
- WebPageTest：複数の場所やデバイスから高度なテストを提供し、フィルムストリップ表示やウォーターフォールチャートも利用できます。
- PageSpeed Insights：ラボデータとフィールドデータ（CrUXから）を1つのレポートにまとめて表示します。
フィールドツール
- Chrome User Experience Report (CrUX)：数百万のサイトの実ユーザー指標の公開データセットです。PageSpeed InsightsまたはCrUX APIからアクセスできます。
- Google Search Console：サイトのCore Web Vitalsの状態をURLごとにグループ化して表示します。
- web-vitals JavaScriptライブラリ：サイトに追加して実ユーザー指標を収集し、アナリティクスに送信できます。
デバッグにはラボツールを、修正の検証にはフィールドデータを使用しましょう。よくある間違いは、実際のユーザー体験を無視してラボスコアだけを最適化することです。
LCPの改善
LCPはしばしば最も影響の大きい修正対象の指標です。最適化の方法は以下の通りです：
- 画像を最適化する：品質を損なわずに画像を圧縮し、WebPやAVIFなどのモダンなフォーマットを使用し、
srcsetでレスポンシブ画像を配信します。Image Compressorのようなツールがファイルサイズの削減に役立ちます。 - 重要なリソースをプリロードする：ヒーロー画像、フォント、主要なCSS/JSファイルには
<link rel="preload">を使用します。 - レンダリングをブロックするリソースを排除する：クリティカルCSSをインライン化し、重要でないJavaScriptを遅延させ、大きなCSSファイルを避けます。
- CDNを使用する：ユーザーに近いエッジロケーションからアセットを配信し、レイテンシを削減します。
- アセットをキャッシュする：静的リソースには長いキャッシュ期間を設定し、ファイル名でキャッシュバスティングを行います。
- サーバー応答時間を最適化する：高速なホスティングを使用し、圧縮（BrotliまたはGzip）を有効にし、データベースクエリを最適化します。
具体的な例として、ヒーロー画像を考えてみましょう。2MBのJPEGを配信する代わりに、200KB以下に圧縮し、WebPに変換してプリロードします。これだけでLCPを数秒短縮できます。
INPの改善
INPは応答性を測定します。INPが高い原因は、多くの場合、メインスレッドをブロックする長いJavaScriptタスクです。
- 長いタスクを分割する：
setTimeoutやrequestIdleCallbackを使用してメインスレッドに制御を戻します。 - イベントハンドラを最適化する：スクロールやリサイズなどの頻繁なイベントをデバウンスまたはスロットルします。ハンドラ内で重い計算を避けます。
- JavaScriptの実行を削減する：コード分割、ツリーシェイキング、重要でないJSの遅延読み込みを行います。
- Web Workersを使用する：負荷の高いタスクをワーカースレッドにオフロードします。
- サードパーティスクリプトを最小化する：不要なアナリティクス、広告、ソーシャルウィジェットを監査して削除します。
INPをテストするには、Chrome DevToolsのPerformanceパネルでページを操作します。長いタスク（赤い三角形）を探して最適化しましょう。
CLSの改善
CLSは視覚的な安定性に関する指標です。予期しないシフトはユーザーを苛立たせ、誤クリックを引き起こします。
- 画像と動画にサイズを設定する：常に
widthとheight属性を含めるか、CSSのaspect-ratioを使用します。 - 広告や埋め込み用のスペースを確保する：固定サイズのプレースホルダーを使用します。
- 既存のコンテンツの上にコンテンツを挿入しない：ユーザーがトリガーするインタラクションを除きます。
- font-display: swapを使用する：ただし、フォントの入れ替えがシフトを引き起こす可能性があることに注意してください。フォントのプリロードや
size-adjustの使用を検討しましょう。 - アニメーションにはCSSトランスフォームを適用する：レイアウトをトリガーするプロパティの代わりに使用します。
Chrome DevToolsのLayout Shift Regions機能を使用して、シフトを可視化しましょう。
ツールとワークフロー
Core Web Vitalsの監視を開発ワークフローに統合しましょう：
- CIでLighthouseを実行し、リグレッションを検出します。
- web-vitalsライブラリを使用してフィールドデータを収集し、アラートを設定します。
- Search Consoleを定期的にチェックして問題を確認します。
- 影響度と工数に基づいて修正の優先順位を付けます。
Core Web Vitalsはパフォーマンスの一部に過ぎないことを忘れないでください。常に全体的なユーザー体験を考慮しましょう。
FAQ
Core Web Vitalsの現在のしきい値は？
良好なしきい値：LCP ≤ 2.5秒、INP ≤ 200ms、CLS ≤ 0.1。改善が必要：LCP ≤ 4秒、INP ≤ 500ms、CLS ≤ 0.25。不良：それ以上の値。
Core Web Vitalsはどのくらいの頻度で測定すべきですか？
フィールドデータを継続的に監視し、重要な変更後にはラボテストを実行します。最低でも月に一度、およびデプロイ後に確認しましょう。
開発者なしでCore Web Vitalsを改善できますか？
画像圧縮やキャッシュなどの一部の修正は、プラグインやCDN設定で行えます。ただし、より深い最適化にはコード変更が必要な場合が多いです。
より良いLCPのために画像を最適化する準備はできましたか？無料のImage Compressorを試して、品質を損なわずにファイルサイズを削減しましょう。