Core Web Vitals：測定と改善でWebパフォーマンス向上
あなたのウェブサイトは読み込まれても、ユーザーはすぐに離脱してしまいます。遅いインタラクションは訪問者をイライラさせ、検索エンジンもそれを見逃しません。Core Web Vitalsは、Googleが実世界のユーザー体験を測定するための指標です：Largest Contentful Paint（LCP）、Interaction to Next Paint（INP）、Cumulative Layout Shift（CLS）です。このガイドでは、それらを正確に測定し、実践的なコードレベルのテクニックで改善する方法を紹介します。
Core Web Vitalsとは？
Core Web Vitalsは、ユーザー体験の重要な側面を定量化する指標のセットです：
- LCPは読み込みパフォーマンスを測定します。最大のコンテンツ要素（画像、テキストブロック、動画）が表示されるまでの時間を示します。目標は2.5秒以下です。
- INPはインタラクティブ性を測定します。すべてのインタラクション（クリック、タップ、キー入力）のレイテンシを追跡し、最悪のものを報告します。目標は200ミリ秒以下です。
- CLSは視覚的な安定性を測定します。読み込み中の予期しないレイアウトシフトをスコア化します。目標は0.1以下です。
これらの指標はGoogleのページエクスペリエンスシグナルの一部ですが、それ以上に、実際のユーザーのフラストレーションを反映しています。改善することはSEOとコンバージョン率の両方に利益をもたらします。
Core Web Vitalsの測定方法
ラボデータとフィールドデータの両方が必要です。ラボツールは条件をシミュレートし、フィールドデータは実際のユーザーから得られます。
ラボツール
- Lighthouse（Chrome DevToolsまたはCI内）は、改善の機会を含むスナップショットを提供します。
- PageSpeed Insightsは、Chrome User Experience Report（CrUX）からのラボデータとフィールドデータを組み合わせます。
- WebPageTestは高度なスクリプティングとフィルムストリップビューを提供します。
フィールドツール
- Chrome UX Report（CrUX）は、あなたのオリジンに対する実際のユーザーデータの集計を表示します。
- web-vitalsライブラリを使用すると、実際のユーザーから指標を収集し、アナリティクスに送信できます。
- Search Consoleは、サイトのCore Web Vitalsステータスを報告します。
まず、主要ページのPageSpeed Insightsを確認しましょう。次に、web-vitalsライブラリを使用してリアルユーザーモニタリングを設定し、経時的なパフォーマンスを追跡します。
LCPの改善
LCPはしばしば最も影響の大きい修正対象の指標です。最大の要素は通常、ヒーロー画像または大きなテキストブロックです。
1. クリティカルパスの最適化
- キャッシュ、CDN、効率的なバックエンドコードでサーバー応答時間（TTFB）を短縮します。
- レンダリングブロッキングリソースを排除します：クリティカルCSSをインライン化し、非クリティカルなCSSとJavaScriptを遅延させます。
- LCP画像をプリロードします：
<link rel="preload" as="image" href="#">。
2. 画像の最適化
- WebPやAVIFなどのモダンなフォーマットを使用します。
srcsetとsizesでレスポンシブ画像を提供します。- 目に見える品質劣化なしで画像を圧縮します。簡単な圧縮には、Image Compressorをお試しください。
3. サーバー応答の改善
- CDNを使用して静的アセットをグローバルにキャッシュします。
- Brotliまたはgzip圧縮を有効にします。
- データベースクエリを最適化し、サーバーサイドキャッシュを使用します。
例：LCP画像のプリロードとfetchpriority：
<link rel="preload" as="image" href="#" fetchpriority="high">
<img src="#" alt="Hero" width="1200" height="600" fetchpriority="high">
INPの改善
INPは、ページがユーザー入力にどれだけ迅速に応答するかを測定します。INPが高いと、インタラクションがもたつくことを意味します。
1. 長いタスクを分割する
setTimeout、requestIdleCallback、またはscheduler.yieldを使用してメインスレッドに譲ります。- 長時間実行されるJavaScript関数を避け、小さなチャンクに分割します。
2. イベントハンドラの最適化
- 頻繁なイベント（scroll、resize、input）をデバウンスまたはスロットルします。
- タッチとホイールイベントにはパッシブイベントリスナーを使用します。
- ハンドラ内のDOM更新を最小限にします。
3. JavaScript実行の削減
- コード分割し、非クリティカルなJavaScriptを遅延読み込みします。
- 未使用の依存関係とポリフィルを削除します。
- 重い計算にはWeb Workersを使用します。
例：長いタスクでメインスレッドに譲る：
async function processLargeArray(items) {
for (let i = 0; i < items.length; i++) {
// Process item
if (i % 50 === 0) {
await new Promise(resolve => setTimeout(resolve, 0));
}
}
}
CLSの改善
CLSは予期しないレイアウトシフトを測定します。一般的な原因：寸法のない画像、広告、埋め込み、動的に挿入されるコンテンツです。
1. 常に寸法を設定する
- 画像と動画に
widthとheight属性を含めます。 - レスポンシブコンテナにはCSSの
aspect-ratioを使用します。
2. 動的コンテンツのスペースを確保する
- 広告と埋め込みにはプレースホルダーまたはスケルトンスクリーンを使用します。
- ユーザーインタラクションへの応答でない限り、既存のコンテンツの上にコンテンツを挿入しないようにします。
3. フォント読み込みの最適化
font-display: swapを使用して不可視テキストを避けますが、潜在的なレイアウトシフトに注意してください。- 主要なフォントをプリロードしてスワップ遅延を減らします。
例：aspect-ratioでスペースを確保する：
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
ツールとワークフロー
パフォーマンスチェックを開発ワークフローに統合しましょう：
- CI（例：GitHub Actions）でLighthouseを実行し、リグレッションを検出します。
- web-vitalsライブラリを使用してフィールドデータをアナリティクスに送信します。
- CrUXとSearch Consoleを監視して実際のユーザートレンドを確認します。
- 実際のデバイス、特にミッドレンジの携帯電話でテストします。
覚えておきましょう：パフォーマンスは機能です。他の品質指標と同様に扱いましょう。
FAQ
Core Web Vitalsの現在のしきい値は？
LCP：良好≤2.5秒、改善が必要≤4.0秒。INP：良好≤200ms、改善が必要≤500ms。CLS：良好≤0.1、改善が必要≤0.25。これらのしきい値は実際のユーザーデータに基づいています。
Core Web Vitalsはどのくらいの頻度で測定すべきですか？
CrUXや独自のRUMなどのツールを通じてフィールドデータを継続的に監視します。重要なコード変更ごと、および主要ページについては少なくとも月に一度ラボテストを実行します。
開発者なしでCore Web Vitalsを改善できますか？
画像圧縮やキャッシュなど一部の修正は、プラグインやCDN設定で行えます。ただし、より深い最適化（コード分割、クリティカルCSS）には通常、開発者の関与が必要です。
より良いLCPのために画像を最適化する準備はできましたか？無料のImage Compressorを試して、品質を損なわずにファイルサイズを削減しましょう。