Specialized in performance measurement and problem diagnosis. For optimization patterns, see vercel-react-best-practices .
Target values
| Metric | 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 |
Measurement commands
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
Diagnosis by problem
LCP is slow (> 2.5s)
Cause identification:
npx lighthouse URL --output=json | jq '.audits["largest-contentful-paint-element"]'
Main causes and countermeasures:
| Cause | Countermeasure |
|---|---|
| Hero image is heavy | next/image + priority + WebP |
| Web font loading | next/font + display: swap |
| Server response is slow | Caching, CDN, DB optimization |
| render-blocking JS | Dynamic import, defer |
INP is slow (> 200ms)
Cause identification:
- Chrome DevTools > Performance > Interactions
Main causes and countermeasures:
| Cause | Countermeasure |
|---|---|
| Heavy event handlers | useTransition、Web Worker |
| Excessive re-rendering | Check with React DevTools Profiler |
| Long JS tasks | Task splitting,requestIdleCallback |
CLS is high (> 0.1)
Cause identification:
npx lighthouse URL --output=json | jq '.audits["layout-shift-elements"]'
Main causes and countermeasures:
| Cause | Countermeasure |
|---|---|
| Image size not specified | width / height required |
| Dynamic content insertion | Reserve space with skeleton |
| Web font switching | font-display: swap + fallback |
| Ads/embeds | Fixed-size container |
FCP is slow (> 1.8s)
Main causes and countermeasures:
| Cause | Countermeasure |
|---|---|
| Initial HTML is large | Server Components, Streaming |
| render-blocking CSS | Critical CSS inline |
| TTFB is slow | Server optimization |
Checklist
Measurement
- Check both Lighthouse mobile/desktop
- Also check on real devices (there are differences from emulation)
- Measure in production environment (development environment is a reference value)
Monitoring
- Vercel Speed Insights setup
- Set alert thresholds (LCP > 3s, etc.)
- Check periodic reports
Related skills
- vercel-react-best-practices: Optimization patterns (57 rules)
- ui-ux-pro-max: Accessibility (WCAG contrast)