Core Web Vitals 計測・診断 Skill

Core Web Vitals 計測・診断

パフォーマンス計測と問題診断に特化。最適化パターンは vercel-react-best-practices を参照。

目標値

| 指標 | Good | Needs Improvement | Poor | |------|------|-------------------|------| | LCP (Largest Contentful Paint) | < 2.5s | 2.5s - 4.0s | > 4.0s | | INP (Interaction to Next Paint) | < 200ms | 200ms - 500ms | > 500ms | | CLS (Cumulative Layout Shift) | < 0.1 | 0.1 - 0.25 | > 0.25 | | FCP (First Contentful Paint) | < 1.8s | 1.8s - 3.0s | > 3.0s | | TTFB (Time to First Byte) | < 800ms | 800ms - 1800ms | > 1800ms |

計測コマンド

Lighthouse CLI

# デスクトップ
npx lighthouse https://example.com --view --preset=desktop

# モバイル
npx lighthouse https://example.com --view --preset=perf --emulated-form-factor=mobile

# アクセシビリティのみ
npx lighthouse http://localhost:3000 --only-categories=accessibility --view

# JSON出力で詳細確認
npx lighthouse http://localhost:3000 --output=json | jq '.audits["largest-contentful-paint"]'

Bundle Analyzer

# Next.js
npm run build
npx @next/bundle-analyzer

# 汎用
npx source-map-explorer 'dist/**/*.js'

Vercel Speed Insights

# Vercelダッシュボードで確認
# Analytics > Speed Insights

問題別診断

LCP が遅い (> 2.5s)

原因特定:

npx lighthouse URL --output=json | jq '.audits["largest-contentful-paint-element"]'

主な原因と対策:

| 原因 | 対策 | |------|------| | ヒーロー画像が重い | next/image + priority + WebP | | Webフォント読み込み | next/font + display: swap | | サーバー応答遅い | キャッシュ、CDN、DB最適化 | | render-blocking JS | 動的インポート、defer |

INP が遅い (> 200ms)

原因特定:

Chrome DevTools > Performance > Interactions

主な原因と対策:

| 原因 | 対策 | |------|------| | 重いイベントハンドラ | useTransition、Web Worker | | 過剰な再レンダリング | React DevTools Profiler確認 | | 長いJSタスク | タスク分割、requestIdleCallback |

CLS が高い (> 0.1)

原因特定:

npx lighthouse URL --output=json | jq '.audits["layout-shift-elements"]'

主な原因と対策:

| 原因 | 対策 | |------|------| | 画像サイズ未指定 | width / height 必須 | | 動的コンテンツ挿入 | スケルトンで領域確保 | | Webフォント切り替え | font-display: swap + fallback | | 広告/埋め込み | 固定サイズコンテナ |

FCP が遅い (> 1.8s)

主な原因と対策:

| 原因 | 対策 | |------|------| | 初期HTMLが大きい | Server Components、ストリーミング | | render-blocking CSS | Critical CSS inline | | TTFB が遅い | サーバー最適化 |

Agent Skills: Core Web Vitals 計測・診断

Install this agent skill to your local

Skill Files