Core Web Vitals：Webパフォーマンスの測定と改善
高速でモダンなウェブサイトを構築したのに、ユーザーからは遅いという不満が続き、SEO順位も下落している。原因はCore Web Vitals（CWV）— Googleのユーザー体験指標かもしれません。このガイドでは、LCP、INP、CLSを測定し、実践的で実行可能なステップで改善する方法を学びます。
Core Web Vitalsとは？
Core Web Vitalsは、実際のユーザー体験を定量化する3つの指標です：
- Largest Contentful Paint (LCP): メインコンテンツがどれだけ速く読み込まれるか。目標：≤ 2.5秒。
- Interaction to Next Paint (INP): ページがユーザー入力にどれだけ応答するか。目標：≤ 200ミリ秒。
- Cumulative Layout Shift (CLS): レイアウトが予期せずどれだけずれるか。目標：≤ 0.1。
これらの指標はGoogleのページ体験シグナルの一部であり、SEOとユーザー満足度に直接影響します。
Core Web Vitalsの測定方法
測定は2つのカテゴリに分かれます：フィールドデータ（リアルユーザーモニタリング）とラボデータ（合成テスト）。どちらも価値があります。
フィールドツール（リアルユーザーデータ）
- Chrome User Experience Report (CrUX): リアルユーザー指標の公開データセット。PageSpeed InsightsまたはCrUX API経由でアクセス。
- Google Search Console: Core Web Vitalsレポートでサイトのグループレベルのパフォーマンスを表示。
- web-vitalsライブラリ: 独自のアナリティクスで指標を取得するための小さなJavaScriptライブラリ。
ラボツール（合成テスト）
- Lighthouse: Chrome DevToolsに組み込まれ、パフォーマンスを監査し改善の機会を提供。
- PageSpeed Insights: 単一URLのラボデータとフィールドデータを組み合わせ。
- WebPageTest: カスタムネットワーク条件とデバイスエミュレーションを備えた高度なテスト。
フィールドデータで実際のユーザー体験を理解し、ラボデータでデバッグと反復を行います。
LCPの改善：メインコンテンツをより速く読み込む
LCPはしばしば最も影響の大きい指標です。最適化する方法は次のとおりです：
- 画像を最適化： 画像を圧縮し、モダンなフォーマット（WebP、AVIF）を使用し、
srcsetでレスポンシブサイズを配信します。Image Compressorのようなツールは、目に見える品質劣化なしでファイルサイズを削減するのに役立ちます。 - 重要なリソースをプリロード： ヒーロー画像、フォント、主要なCSSに
<link rel="preload">を使用します。 - サーバー応答時間を短縮： CDNを使用し、キャッシュを有効にし、バックエンドクエリを最適化します。
- レンダリングブロックリソースを排除： クリティカルCSSをインライン化し、非クリティカルなJavaScriptを遅延させ、CSSを非同期で読み込みます。
- コンテンツデリバリネットワーク（CDN）を使用： ユーザーに近い場所からアセットを配信します。
INPの改善：インタラクションを瞬時に感じさせる
INPは、ユーザー入力（クリック、タップ、キー押下）から次の視覚的更新までの時間を測定します。改善するには：
- 長いタスクを分割：
setTimeoutやrequestIdleCallbackを使用してメインスレッドに制御を譲ります。 - イベントハンドラを最適化： スクロールやリサイズなどの連続イベントをデバウンスまたはスロットルします。
- JavaScript実行時間を削減： コード分割、ツリーシェイキング、非クリティカルなスクリプトの遅延読み込みを行います。
- Web Workersを使用： 重い計算をバックグラウンドスレッドにオフロードします。
- サードパーティスクリプトを最小化： 不要なアナリティクス、広告、ウィジェットを監査して削除します。
CLSの改善：レイアウトを安定させる
CLSは要素が予期せず移動したときに発生します。防ぐには：
- 画像と動画に常にwidthとheightを設定： これによりスペースが確保され、リフローを防ぎます。
- 広告と埋め込み用のスペースを確保： CSSの
aspect-ratioまたは固定サイズのコンテナを使用します。 - 既存のコンテンツの上にコンテンツを挿入しない： ユーザー操作への応答を除いて。
font-display: swapを使用： フォント読み込み中もテキストを表示し続けますが、若干のずれが生じる可能性があることに注意し、重要なテキストにはfont-display: optionalを検討してください。- フォントをプリロード： 遅れて読み込まれるフォントによるレイアウトシフトの可能性を減らします。
Core Web Vitals指標の比較
| 指標 | 測定内容 | 良好な目標値 | スコアが悪くなる一般的な原因 |
|---|---|---|---|
| LCP | 読み込みパフォーマンス | ≤ 2.5秒 | 遅いサーバー、レンダリングブロックリソース、大きな画像 |
| INP | 応答性 | ≤ 200ミリ秒 | 長いタスク、重いJavaScript、非効率なイベントハンドラ |
| CLS | 視覚的安定性 | ≤ 0.1 | 寸法のない画像、動的コンテンツの挿入、Webフォント |
継続的改善のためのツールとワークフロー
CWVの最適化は一度きりのタスクではありません。これらのプラクティスをワークフローに統合しましょう：
- リアルユーザーモニタリングを設定：
web-vitalsライブラリを使用して指標をアナリティクスプラットフォームに送信します。 - CIでLighthouseを実行： Lighthouse CIを使用してデプロイ前にリグレッションを検出します。
- Search Consoleで監視： Core Web Vitalsレポートを定期的に確認します。
- 実機でテスト： エミュレータは便利ですが、実機が真のパフォーマンスを明らかにします。
- 反復と測定： 一度に1つの変更を行い、その影響を測定します。
Core Web Vitalsの改善にはアセットの最適化が伴うことが多いことを覚えておきましょう。画像については、アップロード前にImage Compressorを使用してファイルサイズを削減することを検討してください。
FAQ
Core Web Vitalsとは何で、なぜ重要ですか？
Core Web Vitalsは、読み込み、インタラクティビティ、視覚的安定性を測定する3つの指標（LCP、INP、CLS）です。実際のユーザー体験を反映し、Googleがランキングシグナルとして使用するため重要です。
Core Web Vitalsはどのくらいの頻度で測定すべきですか？
継続的に。リアルユーザーモニタリングを設定して継続的なデータを取得し、開発中およびリリース前にラボテスト（例：Lighthouse）を実行してリグレッションを検出します。
開発者なしでCore Web Vitalsを改善できますか？
画像の圧縮やプラグインによるキャッシュ有効化など、一部の改善は非開発者でも可能です。ただし、より深い最適化（例：JavaScriptの削減、クリティカルレンダリングパスの最適化）には開発者の関与が必要なことが多いです。
より良いLCPのために画像を最適化する準備はできましたか？無料のImage Compressorを試して、品質を損なわずにファイルサイズを削減しましょう。