Loading...
Loading...
Core Web Vitals計測・診断スキル。Lighthouse CLI、Bundle Analyzer、パフォーマンス問題の特定と対策。
npx skill4agent add kimny1143/claude-code-template core-web-vitalsvercel-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 |
# デスクトップ
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"]'# Next.js
npm run build
npx @next/bundle-analyzer
# 汎用
npx source-map-explorer 'dist/**/*.js'# Vercelダッシュボードで確認
# Analytics > Speed Insightsnpx lighthouse URL --output=json | jq '.audits["largest-contentful-paint-element"]'| 原因 | 対策 |
|---|---|
| ヒーロー画像が重い | |
| Webフォント読み込み | |
| サーバー応答遅い | キャッシュ、CDN、DB最適化 |
| render-blocking JS | 動的インポート、defer |
| 原因 | 対策 |
|---|---|
| 重いイベントハンドラ | |
| 過剰な再レンダリング | React DevTools Profiler確認 |
| 長いJSタスク | タスク分割、 |
npx lighthouse URL --output=json | jq '.audits["layout-shift-elements"]'| 原因 | 対策 |
|---|---|
| 画像サイズ未指定 | |
| 動的コンテンツ挿入 | スケルトンで領域確保 |
| Webフォント切り替え | |
| 広告/埋め込み | 固定サイズコンテナ |
| 原因 | 対策 |
|---|---|
| 初期HTMLが大きい | Server Components、ストリーミング |
| render-blocking CSS | Critical CSS inline |
| TTFB が遅い | サーバー最適化 |