Core Web Vitals：Webパフォーマンスの測定と改善
Core Web Vitalsが重要な理由
高速なサイトを構築したのに、ユーザーからは遅いという苦情が寄せられる。あるいはGoogle Search ConsoleからCore Web Vitalsの低下を警告されているかもしれない。これらの指標はユーザー体験と検索順位に直接影響します。無視すれば訪問者とトラフィックを失うことになります。このガイドでは、Core Web Vitalsとは何か、その測定方法、そして各指標を改善するための実践的な手順を学びます。
Core Web Vitalsとは？
Core Web Vitalsは、GoogleがWeb上のユーザー体験を定量化するために定義した指標群です。これらは読み込み、インタラクティブ性、視覚的安定性に焦点を当てています：
- Largest Contentful Paint (LCP)：読み込みパフォーマンスを測定します。最大のコンテンツ要素（画像、テキストブロック）が表示されるまでの時間を示します。目標はLCP 2.5秒以下です。
- First Input Delay (FID)：インタラクティブ性を測定します。ユーザーが最初に操作（クリック、タップ）してからブラウザが応答するまでの時間です。目標はFID 100ミリ秒以下です。
- Cumulative Layout Shift (CLS)：視覚的安定性を測定します。ページ読み込み中の予期しないレイアウトシフトを定量化します。目標はCLS 0.1以下です。
これらの指標はGoogleのページエクスペリエンスシグナルの一部であり、検索順位に影響します。また、単なるラボテストではなく、実際のユーザー体験を反映しています。
Core Web Vitalsの測定方法
Core Web Vitalsはラボ（合成テスト）またはフィールド（実際のユーザーモニタリング）で測定できます。どちらのアプローチも価値があります。
ラボツール
- Lighthouse：Chrome DevToolsに組み込まれており、パフォーマンスを監査し、LCP、FID（TBTとして）、CLSのスコアを提供します。拡張機能の影響を避けるため、シークレットモードで実行してください。
- WebPageTest：詳細なウォーターフォールチャートとフィルムストリップを提供します。異なる場所やデバイスからテストできます。
- PageSpeed Insights：ラボデータとフィールドデータを組み合わせます。実際のパフォーマンスに関するCrUX（Chrome User Experience Report）データを表示します。
フィールドツール
- Chrome User Experience Report (CrUX)：数百万のサイトの実際のユーザーデータを集計して提供します。PageSpeed InsightsまたはCrUX API経由でアクセスできます。
- Google Search Console：「Core Web Vitals」レポートで、サイトのフィールドデータをURLごとにグループ化して表示します。
- Web Vitals JavaScriptライブラリ：
web-vitalsを使用して実際のユーザーから指標を収集し、アナリティクスに送信します。
デバッグにはラボツールから始め、実際の改善を確認するためにフィールドデータで検証してください。
Largest Contentful Paint (LCP)の改善
LCPはしばしば最も困難な指標です。改善するには、クリティカルレンダリングパスに焦点を当てます。
- 画像を最適化：画像を圧縮し、WebPやAVIFなどの最新フォーマットを使用し、
srcsetでレスポンシブ画像を配信します。 - LCPリソースをプリロード：LCP要素が画像やフォントの場合、
<link rel="preload">を追加して早期に読み込みを開始します。 - レンダリングブロックリソースを排除：重要でないCSSとJavaScriptを遅延させます。クリティカルCSSをインライン化します。
- CDNを使用：ユーザーに近い場所からアセットを配信してレイテンシを削減します。
- アセットをキャッシュ：静的リソースに
Cache-Controlヘッダーで長いキャッシュ寿命を設定します。
例えば、ヒーロー画像をプリロードします：
<link rel="preload" as="image" href="/hero.webp">
また、サーバーが迅速に応答することを確認してください。Nginx Log Analyzerなどのツールを使用して遅いリクエストを特定し、サーバーパフォーマンスを最適化します。
First Input Delay (FID)の改善
FIDは応答性を測定します。長いJavaScriptタスクはメインスレッドをブロックし、インタラクションを遅延させます。
- 長いタスクを分割：
setTimeoutやrequestIdleCallbackを使用して、大きなJavaScriptを小さなチャンクに分割します。 - JavaScriptを縮小・圧縮：ミニフィケーションとgzip/brotli圧縮でファイルサイズを削減します。
- 重要でないJavaScriptを遅延：
asyncまたはdefer属性を使用します。 - 未使用コードを削除：ツリーシェイキングとコード分割を使用します。
- サードパーティスクリプトを最適化：非同期で読み込み、セルフホスティングを検討します。
DevToolsのパフォーマンスパネルを使用して長いタスクを特定します。
Cumulative Layout Shift (CLS)の改善
CLSは要素が予期せずシフトするときに発生します。一般的な原因：寸法のない画像、広告、埋め込み、Webフォント。
- サイズ属性を設定：画像と動画には常に
widthとheightを含めます。 - 広告と埋め込み用のスペースを確保：CSSの
aspect-ratioまたは固定サイズのコンテナを使用します。 - 既存コンテンツの上にコンテンツを挿入しない：ユーザーインタラクションによる場合を除きます。
font-display: swapを使用：ただしフォントの切り替えがシフトを引き起こす可能性があることに注意してください。font-display: optionalやフォントのプリロードを検討してください。transformアニメーションを適用：レイアウトをトリガーするプロパティの代わりに使用します。
DevToolsのLayout Instability APIでテストします。
Core Web Vitalsのしきい値の比較
| 指標 | 良好 | 改善が必要 | 不良 |
|---|---|---|---|
| LCP | ≤ 2.5s | 2.5s – 4.0s | > 4.0s |
| FID | ≤ 100ms | 100ms – 300ms | > 300ms |
| CLS | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
これらのしきい値はGoogleの推奨に基づいています。
継続的改善のための実践的ワークフロー
Core Web Vitalsの改善は一度きりの作業ではありません。次のワークフローに従ってください：
- 測定：ラボツールとフィールドツールを使用してベースラインを確立します。
- 特定：LighthouseとCrUXを使用して最大の改善機会を見つけます。
- 最適化：LCP、FID、CLSの修正を実装します。
- 監視：web-vitalsライブラリで実際のユーザーモニタリングを設定し、変更を追跡します。
- 反復：定期的に監査し、改善します。
パフォーマンスバジェットをCI/CDパイプラインに統合して、リグレッションを防ぎます。
FAQ
Core Web Vitalsとは何ですか？なぜ重要ですか？
Core Web Vitalsはユーザー体験を定量化する指標（LCP、FID、CLS）です。検索順位に影響し、ユーザーがサイトの速度と安定性をどう感じるかに直接影響するため重要です。
Core Web Vitalsはどのくらいの頻度で測定すべきですか？
大きな変更後と、フィールドデータを通じて継続的に測定します。開発中はラボ指標を確認し、リグレッションを捉えるために月次でフィールドデータを監視することを目指してください。
サイトを再設計せずにCore Web Vitalsを改善できますか？
はい。画像の最適化、プリロード、サイズ属性の設定など、多くの改善は完全な再設計なしで適用できます。低労力で高効果の修正から始めましょう。
サーバーパフォーマンスを分析する準備はできましたか？Nginx Log Analyzerを使用して遅いリクエストを特定し、バックエンドを最適化しましょう。これは間接的にLCPと全体的なユーザー体験を改善します。