SEO Technical: Core Web Vitals

Core Web Vitals (CWV)—Google のユーザー体験指標—の最適化ガイド。検索ランキングに影響します。CWV はモバイルおよびデスクトップの確認済みランキング要因です。

呼び出し時: 初回使用時、役に立つ場合は、このスキルがカバーする内容と重要性に関する 1～2 文で始めてから、メイン出力を提供します。2 回目以降またはユーザーがスキップを要求した場合は、メイン出力に直接進みます。

スコープ (Technical SEO)

• LCP (Largest Contentful Paint): ロード性能。最大コンテンツ要素のレンダリング時間
• INP (Interaction to Next Paint): レスポンシブ性。2024 年 3 月 12 日に FID の後継となった
• CLS (Cumulative Layout Shift): ビジュアル安定性。予期しないレイアウトシフト

目標値 (75 パーセンタイル、フィールドデータ)

メトリック	目標	良好	改善が必要	不良
LCP	≤2.5s	≤2.5s	2.5–4.0s	>4.0s
INP	≤200ms	≤200ms	200–500ms	>500ms
CLS	<0.1	≤0.1	0.1–0.25	>0.25

出典: Google Page Experience

初期診断

プロジェクトコンテキストを最初に確認: .claude/project-context.md または .cursor/project-context.md が存在する場合は、サイト URL を読み取ります。

以下を特定します:

1. ツール: GSC Core Web Vitals レポート、PageSpeed Insights、Chrome DevTools
2. メトリック: どのメトリックが不合格か (LCP、INP、CLS)
3. ページタイプ: ヒーロー、記事、商品、リスト—LCP 候補は異なる

LCP 最適化

LCP は、最大コンテンツ要素 (画像、動画、またはテキストブロック) が表示されるまでの時間を測定します。

原因	対策
サーバー応答が遅い	TTFB を削減。CDN を使用。サーバーを最適化
レンダリング ブロッキング リソース	非重要な CSS/JS を遅延。重要な CSS をインライン化
大きな画像	WebP/AVIF を使用。圧縮。width/height を設定して CLS を防止。image-optimization を参照
クライアントサイド レンダリング	コンテンツをファーストビューに表示する SSR/SSG。rendering-strategies を参照
サードパーティ スクリプト	非同期で読み込み。非重要なスクリプトを遅延

LCP 候補: ヒーロー画像、大きなテキストブロック、動画ポスター。ファーストビューの画像は loading="eager" (デフォルト) を使用。LCP の遅延読み込みは絶対に行わない。

INP 最適化

INP はレスポンシブ性—ユーザーインタラクションから次のペイントまでの時間を測定します。2024 年 3 月 12 日に FID の後継となりました。

原因	対策
長時間実行される JavaScript	50ms 超のタスクを分割。requestIdleCallback を使用。Web Workers
負荷の大きなイベント ハンドラ	デバウンス/スロットル。非重要な処理を遅延
メインスレッド ブロック	サードパーティ スクリプトを削減。非重要な JavaScript を遅延
レイアウト スラッシング	DOM 読み書きをバッチ化。強制リフロー回数を最小化

CLS 最適化

CLS は予期しないレイアウトシフトを測定します。

原因	対策
寸法がない画像	常に width と height 属性を設定
動的コンテンツ	広告、埋め込みのスペースを確保。min-height を使用
Web フォント	font-display: optional または swap を使用。重要なフォントをプリロード
アニメーション	top/left/width の代わりに transform を使用

スペース確保: 画像、広告、埋め込みについて、読み込み前に寸法を定義。既存コンテンツの上にスペース確保なしでコンテンツを挿入しない。

ツール & モニタリング

ツール	用途
GSC	Core Web Vitals レポート。URL グループ分け。フィールドデータ
PageSpeed Insights	ラボデータ + フィールドデータ。モバイル + デスクトップ
Chrome DevTools	パフォーマンス パネル。LCP 要素。レイアウト シフト オーバーレイ

出力形式

• 現在の状態: どのメトリックが不合格か (LCP、INP、CLS)
• 優先順位付き対策: 影響度順
• 参考資料: Web Vitals、Page Experience

関連スキル

• image-optimization: LCP 画像の最適化。WebP。遅延読み込み (ファーストビュー以下のみ)
• google-search-console: CWV レポート。フィールドデータ モニタリング
• mobile-friendly: モバイル ファースト インデックス。モバイル CWV 目標値
• rendering-strategies: LCP 用の SSR/SSG。初期 HTML のコンテンツ
• site-crawlability: リダイレクト チェーンはクロール を浪費。パフォーマンスを改善