OpenSkillIndex← back to search
claude-codedevops

Claude-skill-registry core-web-vitals

Core Web Vitals計測・診断スキル。Lighthouse CLI、Bundle Analyzer、パフォーマンス問題の特定と対策。

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/core-web-vitals" ~/.claude/skills/majiayu000-claude-skill-registry-core-web-vitals && rm -rf "$T"
manifest: skills/data/core-web-vitals/SKILL.md
tags
#performance-testing#lighthouse#web-analytics#optimization#bundle-analysis
source content

Core Web Vitals 計測・診断

パフォーマンス計測と問題診断に特化。最適化パターンは 

vercel-react-best-practices
を参照。

目標値

指標GoodNeeds ImprovementPoor
LCP (Largest Contentful Paint)< 2.5s2.5s - 4.0s> 4.0s
INP (Interaction to Next Paint)< 200ms200ms - 500ms> 500ms
CLS (Cumulative Layout Shift)< 0.10.1 - 0.25> 0.25
FCP (First Contentful Paint)< 1.8s1.8s - 3.0s> 3.0s
TTFB (Time to First Byte)< 800ms800ms - 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 CSSCritical CSS inline
TTFB が遅いサーバー最適化

チェックリスト

計測

  • Lighthouse モバイル/デスクトップ両方確認
  • 実機でも確認（エミュレーションと差異あり）
  • 本番環境で計測（開発環境は参考値）

監視

  • Vercel Speed Insights 設定
  • アラート閾値設定（LCP > 3s等）
  • 定期レポート確認

関連スキル

  • vercel-react-best-practices: 最適化パターン（57ルール）
  • ui-ux-pro-max: アクセシビリティ（WCAG コントラスト）