Core Web Vitals完全攻略

Core Web Vitals完全攻略

はじめに

Core Web Vitals（CWV）は、Googleがページのユーザー体験を測定するための指標群です。2021年からランキング要因に組み込まれ、SEOにおいて無視できない重要指標となっています。この章では、3つの主要指標の理解から、実践的な最適化手法まで体系的に学びます。

3つの主要指標

Core Web Vitalsは以下の3指標で構成されます。

• ◆LCP（Largest Contentful Paint）: ページ内で最も大きなコンテンツ要素が表示されるまでの時間。2.5秒以内が良好
• ◆INP（Interaction to Next Paint）: ユーザーの操作（クリック、タップ、キー入力）から画面が更新されるまでの時間。200ms以内が良好
• ◆CLS（Cumulative Layout Shift）: ページ読み込み中に要素が予期せず移動する量の累積値。0.1以下が良好

LCPの最適化

最大コンテンツの表示速度を改善する具体的な手法です。

• ◆画像最適化: LCP要素がヒーロー画像の場合、WebP/AVIF形式に変換し、適切なサイズで配信
• ◆プリロード: <link rel="preload">でLCP画像を早期読み込み。fetchpriority="high"の指定
• ◆サーバーレスポンス時間: TTFB（Time to First Byte）を500ms以内に。CDN利用が効果的
• ◆レンダリングブロック排除: 不要なCSS/JSの読み込みを遅延させ、クリティカルCSSをインライン化
• ◆フォント最適化: font-display: swapでテキストの即時表示。プリロードでフォントファイルを早期取得

INPの最適化

インタラクションの応答速度を改善する手法です。

• ◆メインスレッドの負荷軽減: 重いJavaScript処理をWeb WorkerやrequestIdleCallbackに逃がす
• ◆Long Taskの分割: 50ms以上かかるタスクを小さなチャンクに分割し、ブラウザに描画の機会を与える
• ◆イベントハンドラの最適化: 不要なイベントリスナーの削除、デバウンス/スロットルの適用
• ◆サードパーティスクリプト: 分析ツールや広告タグの影響を計測し、遅延読み込みを検討

CLSの最適化

レイアウトシフトを防ぐための実践的な対策です。

• ◆画像のサイズ指定: width/height属性またはaspect-ratioでスペースを事前確保
• ◆広告スロット: 広告枠のサイズを事前に確保し、読み込み時のレイアウト崩れを防止
• ◆Webフォント: font-display: optionalまたはsize-adjustでフォント切り替え時のシフトを軽減
• ◆動的コンテンツ: ユーザー操作なしに上部にコンテンツを挿入しない。下部への追加は問題なし

計測と監視

CWVを継続的にモニタリングする仕組みを構築します。

• ◆Google Search Console: CWVレポートでフィールドデータ（実ユーザーデータ）を確認
• ◆PageSpeed Insights: URLごとの詳細な改善提案を取得
• ◆Chrome UX Report（CrUX）: BigQueryでCWVデータを大規模に分析
• ◆Web Vitals JavaScript: 自社サイトにweb-vitalsライブラリを導入し、リアルタイム計測

🏋️実践ワーク

以下の課題に取り組みましょう。

• ◆自社サイトの主要ページをPageSpeed Insightsで計測し、問題点を特定してみましょう
• ◆LCPの改善として、ヒーロー画像のWebP変換とプリロード設定を行ってみましょう
• ◆Search ConsoleのCWVレポートで「改善が必要」なURLをリストアップしてみましょう

📝まとめ

Core Web Vitalsは、ユーザー体験とSEOの両方に影響する重要指標です。LCP、INP、CLSの各指標を理解し、画像最適化、JS処理の改善、レイアウト安定化を実施することで、検索順位とユーザー満足度の両方を向上させることができます。次の章では、クロールバジェットの管理について学びます。