mcpField
C
core-web-vitals

core-web-vitals

github.com/kostja94マーケティング・グロース1.1k1.1k 回インストール3 日前に更新
リポジトリ

core-web-vitals について

ウェブサイトのパフォーマンス改善に取り組むチーム向けのテクニカル SEO スキルです。LCP、INP、CLS に沿った診断、改善策、モニタリングの参考情報をまとめています。

主な機能

  1. 01LCP、INP、CLS のガイダンス
  2. 02指標のしきい値と診断
  3. 03優先度順の改善案
  4. 04GSC と PageSpeed Insights による監視

活用シーン

  1. 01Core Web Vitals の低下原因を調査
  2. 02不調な指標の修正策を選定
  3. 03Chrome DevTools でページ性能を確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/kostja94/marketing-skills --skill core-web-vitals

インストール後、Claude Code で/core-web-vitalsを入力して読み込まれたか確認します。

詳細

SEO Technical：Core Web Vitals

Core Web Vitals（CWV）の最適化をガイドします。CWV は検索ランキングに影響する、Google のユーザーエクスペリエンス指標です。CWV はモバイルとデスクトップの両方でランキング要因となることが確認されています。

呼び出し時：初回利用時は、役立つ場合、まずこのスキルの対象範囲と重要性を1～2文で説明してから、主な出力を提示します。2回目以降の利用時、またはユーザーから省略するよう求められた場合は、すぐに主な出力を提示します。

範囲（テクニカル SEO）

  • LCP（Largest Contentful Paint）：読み込みパフォーマンス。最大のコンテンツ要素が描画されるまでの時間
  • INP（Interaction to Next Paint）：応答性。2024年3月12日に FID に代わって導入されました
  • CLS（Cumulative Layout Shift）：視覚的な安定性。予期しないレイアウトシフト

目標しきい値（75パーセンタイル、フィールドデータ）

指標目標良好改善が必要不良
LCP≤2.5s≤2.5s2.5–4.0s>4.0s
INP≤200ms≤200ms200–500ms>500ms
CLS<0.1≤0.10.1–0.25>0.25

出典：Google Page Experience

初期評価

プロジェクトのコンテキスト： contextus.md がルートにある場合は読み込み、このタスクに関連するモジュールのみを読み込んでください。Contextus がない場合は、利用可能なプロジェクト資料またはユーザー提供の情報を使用し、不足している情報を質問してください。並行するコンテキストシステムは作成しないでください。

以下を特定します。

  1. ツール：GSC Core Web Vitals レポート、PageSpeed Insights、Chrome DevTools
  2. 指標：どの指標（LCP、INP、CLS）に問題があるか
  3. ページタイプ：ヒーロー、記事、商品、リストなど。LCP の候補はページタイプによって異なります

LCP の最適化

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

原因対策
サーバー応答が遅いTTFB を短縮し、CDN を使用してサーバーを最適化します
レンダリングを妨げるリソース重要でない CSS/JS を遅延し、クリティカル CSS をインライン化します
大きな画像WebP/AVIF を使用して圧縮し、CLS を防ぐために width/height を設定します。image-optimization を参照してください
クライアントサイドレンダリングファーストビューのコンテンツに SSR/SSG を使用します。rendering-strategies を参照してください
サードパーティスクリプト非同期で読み込み、重要でないものは遅延します

LCP の候補：ヒーロー画像、大きなテキストブロック、動画のポスター画像。ファーストビューの画像には loading="eager"（デフォルト）を使用し、LCP の画像を遅延読み込みしないでください。

INP の最適化

INP は応答性、つまりユーザーの操作から次の描画までの時間を測定します。2024年3月12日に FID に代わって導入されました。

原因対策
実行時間の長い JS50ms を超えるタスクを分割し、requestIdleCallback や Web Workers を使用します
負荷の大きいイベントハンドラーデバウンスまたはスロットリングを行い、重要でない処理を遅延します
メインスレッドのブロックサードパーティスクリプトを減らし、重要でない JS を遅延します
レイアウトのスラッシングDOM の読み取りと書き込みをまとめ、強制的なリフローを避けます

CLS の最適化

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

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

スペースの確保：画像、広告、埋め込みコンテンツについて、読み込み前に寸法を定義します。スペースを確保せずに、既存のコンテンツより上に新しいコンテンツを挿入しないでください。

ツールとモニタリング

ツール用途
GSCCore 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：リダイレクトチェーンはクロールを無駄にするため、パフォーマンス向上のために修正します

コメント

Markdown 対応