core-web-vitals

Core Web Vitals 测量与诊断

专注于性能测量和问题诊断。优化模式请参阅 vercel-react-best-practices。

---

目标值

指标	良好	需要改进	较差
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"]'

主要原因与对策：

原因	对策
Hero 图片过大	next/image + priority + WebP
Web 字体加载	next/font + display: swap
服务器响应过慢	缓存、CDN、数据库优化
阻塞渲染的 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、流式传输
阻塞渲染的 CSS	内联关键 CSS
TTFB 过慢	优化服务器

---

检查清单

测量

• 分别检查 Lighthouse 移动端和桌面端
• 使用实际设备检查（与模拟结果存在差异）
• 在生产环境中测量（开发环境的数据仅供参考）

监控

• 配置 Vercel Speed Insights
• 设置警报阈值（例如 LCP > 3s）
• 定期查看报告

---

相关技能

• vercel-react-best-practices：优化模式（57 条规则）
• ui-ux-pro-max：无障碍性（WCAG 对比度）