Core Web Vitals：Webパフォーマンスを測定・改善する方法
高速なウェブサイトを構築したのに、ユーザーからはまだ遅いという不満が寄せられる。あるいは、素晴らしいコンテンツがあるのにSEOの順位が伸び悩んでいる。その原因はCore Web Vitalsかもしれません。Googleがユーザー体験を測る指標です。このガイドでは、Core Web Vitalsとは何か、その測定方法、そして各指標を改善するための実践的な手順を学びます。
Core Web Vitalsとは？
Core Web Vitalsは、Googleがユーザー体験を数値化するために使用する3つの特定の指標です：
- Largest Contentful Paint (LCP)： 読み込みパフォーマンスを測定します。ページの読み込み開始から2.5秒以内に発生する必要があります。
- Interaction to Next Paint (INP)： 応答性を測定します。ページ訪問の75%で200ミリ秒未満である必要があります。
- Cumulative Layout Shift (CLS)： 視覚的な安定性を測定します。0.1未満である必要があります。
これらの指標はGoogleのページ体験シグナルの一部であり、検索順位に影響を与える可能性があります。さらに重要なのは、これらが実際のユーザー体験を反映していることです。遅いサイトは訪問者をイライラさせ、離脱を招きます。
Core Web Vitalsの測定方法
測定しなければ改善できません。主なツールには、ラボツール（合成テスト）とフィールドツール（リアルユーザーモニタリング）の2種類があります。
ラボツール
- Lighthouse： Chrome DevTools（Auditsタブ）に組み込まれています。スコアと具体的な改善機会を提供します。
- PageSpeed Insights： ラボデータとフィールドデータを組み合わせたウェブツールです。
- WebPageTest： カスタムロケーションやデバイスを使用した高度なテストが可能です。
フィールドツール
- Chrome User Experience Report (CrUX)： Chromeユーザーからの実世界データで、PageSpeed InsightsやBigQueryで利用可能です。
- web-vitalsライブラリ： 独自のアナリティクスで指標を測定するためのJavaScriptライブラリです。
- Search Console： Core Web Vitalsレポートは、CrUXデータに基づくグループパフォーマンスを表示します。
まずPageSpeed Insightsで概要を把握し、その後web-vitalsライブラリを使用して実際のユーザー指標を継続的に追跡しましょう。
LCP（Largest Contentful Paint）の改善
LCPは通常、ファーストビュー内の最大の画像またはテキストブロックです。改善するには：
- 画像を最適化する： 画像を圧縮し、WebPやAVIFなどの最新フォーマットを使用し、
srcsetでレスポンシブ画像を配信します。 - 重要なリソースをプリロードする： ヒーロー画像やフォントには
<link rel="preload">を使用します。 - レンダリングをブロックするリソースを排除する： クリティカルCSSをインライン化し、非クリティカルなCSSとJavaScriptを遅延させます。
- CDNを使用する： ユーザーに近い場所からアセットを配信します。
- キャッシュを有効にする： 静的アセットに長いキャッシュ時間を設定します。
画像の場合、TryQuickToolBoxのImage Compressorのようなツールが、目に見える品質劣化なしにファイルサイズを削減するのに役立ちます。
INP（Interaction to Next Paint）の改善
INPは、ユーザーの操作（クリック、タップ、キー押下）から次の視覚的更新までの時間を測定します。改善するには：
- JavaScriptの実行時間を削減する： 長いタスクを分割し、
requestIdleCallbackやsetTimeoutを使用してメインスレッドに制御を戻します。 - 大きなDOMサイズを避ける： DOMを1,500ノード以下、深さを32レベル以下に保ちます。
- イベントハンドラを最適化する： スクロールやリサイズなどの頻繁なイベントをデバウンスまたはスロットルします。
- Web Workersを使用する： 重い計算をメインスレッドから移動します。
- サードパーティスクリプトを最小化する： これらはしばしばメインスレッドをブロックします。
Chrome DevToolsのPerformanceパネルを使用して、長いタスクを特定し最適化しましょう。
CLS（Cumulative Layout Shift）の改善
CLSは予期しないレイアウトシフトを測定します。削減するには：
- 画像と動画に常にwidthとheight属性を含める： これによりスペースが確保されます。
- 広告や埋め込み用のスペースを確保する： CSSの
aspect-ratioまたは固定寸法を使用します。 - 既存のコンテンツの上にコンテンツを挿入しない： ユーザー操作への応答を除きます。
- font-display: swapを使用する： テキストが非表示になるのを防ぎますが、若干のシフトが発生する可能性があります。重要なテキストには
font-display: optionalを検討してください。 - 動的コンテンツに注意する： ファーストビューの下に読み込むか、トランジションをスムーズにアニメーション化します。
Core Web Vitals指標の比較
| 指標 | 測定内容 | 良好な閾値 | スコアが悪化する主な原因 |
|---|---|---|---|
| LCP | 読み込みパフォーマンス | ≤ 2.5秒 | 遅いサーバー、レンダリングをブロックするリソース、大きな画像 |
| INP | 応答性 | ≤ 200ミリ秒 | 長いタスク、重いJavaScript、大きなDOM |
| CLS | 視覚的な安定性 | ≤ 0.1 | 寸法のない画像、動的コンテンツ、Webフォント |
継続的なモニタリングのためのツールとテクニック
Core Web Vitalsの改善は一度きりのタスクではありません。継続的なモニタリングを設定しましょう：
web-vitalsライブラリを使用して、指標をアナリティクスプラットフォームに送信します。- 指標が閾値を超えた場合のアラートを設定します。
- CI/CDで定期的にLighthouseを実行して、リグレッションを検出します。
- Search ConsoleのCrUXデータを監視して、実際のユーザートレンドを把握します。
簡単な確認には、重要な変更のたびにChrome DevToolsのLighthouseタブまたはPageSpeed Insightsを使用しましょう。
FAQ
Core Web Vitalsとは何で、なぜ重要なのですか？
Core Web Vitalsは、読み込み、インタラクティブ性、視覚的な安定性を測定する3つの指標（LCP、INP、CLS）です。これらは実際のユーザー体験を反映し、Googleがランキングシグナルとして使用するため重要です。
Core Web Vitalsはどのくらいの頻度で測定すべきですか？
主要なコード変更のたびに測定し、実際のユーザー指標を経時的に追跡するために継続的なフィールドモニタリングを設定しましょう。Lighthouseのようなラボツールは簡単な確認に適していますが、フィールドデータは実際のユーザー体験を示します。
開発者なしでCore Web Vitalsを改善できますか？
画像の圧縮など一部の改善はツールで可能ですが、ほとんどはコード変更（width/height属性の追加、JavaScriptの最適化など）が必要です。通常、開発者またはウェブパフォーマンスに詳しい人が必要です。
LCPを改善するために画像を最適化する準備はできましたか？無料のImage Compressorを試して、品質を犠牲にせずにファイルサイズを削減しましょう。