Back to Details

core-web-vitals

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Core Web Vitals 計測・診断

Core Web Vitals 测量与诊断

パフォーマンス計測と問題診断に特化。最適化パターンは 
vercel-react-best-practices
を参照。
专注于性能测量与问题诊断。优化模式请参考 
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
指标优秀需要改进较差
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

Lighthouse CLI

bash
undefined
bash
undefined

デスクトップ

桌面端

npx lighthouse https://example.com --view --preset=desktop
npx lighthouse https://example.com --view --preset=desktop

モバイル

移动端

npx lighthouse https://example.com --view --preset=perf --emulated-form-factor=mobile
npx lighthouse https://example.com --view --preset=perf --emulated-form-factor=mobile

アクセシビリティのみ

仅检查无障碍性

npx lighthouse http://localhost:3000 --only-categories=accessibility --view
npx lighthouse http://localhost:3000 --only-categories=accessibility --view

JSON出力で詳細確認

以JSON输出查看详细信息

npx lighthouse http://localhost:3000 --output=json | jq '.audits["largest-contentful-paint"]'
undefined
npx lighthouse http://localhost:3000 --output=json | jq '.audits["largest-contentful-paint"]'
undefined

Bundle Analyzer

Bundle Analyzer

bash
undefined
bash
undefined

Next.js

Next.js

npm run build npx @next/bundle-analyzer
npm run build npx @next/bundle-analyzer

汎用

通用

npx source-map-explorer 'dist/**/*.js'
undefined
npx source-map-explorer 'dist/**/*.js'
undefined

Vercel Speed Insights

Vercel Speed Insights

bash
undefined
bash
undefined

Vercelダッシュボードで確認

在Vercel控制台查看

Analytics > Speed Insights

Analytics > Speed Insights


---

---

問題別診断

按问题诊断

LCP が遅い (> 2.5s)

LCP 加载缓慢 (> 2.5s)

原因特定:
bash
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
定位原因:
bash
npx lighthouse URL --output=json | jq '.audits["largest-contentful-paint-element"]'
主要原因与解决方法:
原因对策
首屏英雄图过大使用
next/image
+ 
priority
+ WebP格式
Web字体加载延迟使用
next/font
+ 
display: swap
服务器响应缓慢缓存优化、CDN加速、数据库优化
阻塞渲染的JS代码动态导入、defer属性

INP が遅い (> 200ms)

INP 响应缓慢 (> 200ms)

原因特定:
  • Chrome DevTools > Performance > Interactions
主な原因と対策:
原因対策
重いイベントハンドラ
useTransition
、Web Worker
過剰な再レンダリングReact DevTools Profiler確認
長いJSタスクタスク分割、
requestIdleCallback
定位原因:
  • Chrome DevTools > 性能 > 交互
主要原因与解决方法:
原因对策
事件处理器过重使用
useTransition
、Web Worker
过度重渲染通过React DevTools Profiler排查
JS任务执行时间过长任务拆分、使用
requestIdleCallback

CLS が高い (> 0.1)

CLS 布局偏移过大 (> 0.1)

原因特定:
bash
npx lighthouse URL --output=json | jq '.audits["layout-shift-elements"]'
主な原因と対策:
原因対策
画像サイズ未指定
width
/ 
height
必須
動的コンテンツ挿入スケルトンで領域確保
Webフォント切り替え
font-display: swap
+ fallback
広告/埋め込み固定サイズコンテナ
定位原因:
bash
npx lighthouse URL --output=json | jq '.audits["layout-shift-elements"]'
主要原因与解决方法:
原因对策
未指定图片尺寸必须设置
width
/ 
height
动态内容插入使用骨架屏预留空间
Web字体切换
font-display: swap
+ 备用字体
广告/嵌入内容使用固定尺寸容器

FCP が遅い (> 1.8s)

FCP 首次内容绘制缓慢 (> 1.8s)

主な原因と対策:
原因対策
初期HTMLが大きいServer Components、ストリーミング
render-blocking CSSCritical CSS inline
TTFB が遅いサーバー最適化
主要原因与解决方法:
原因对策
初始HTML体积过大使用Server Components、流式渲染
阻塞渲染的CSS内联关键CSS
TTFB 响应缓慢服务器优化

チェックリスト

检查清单

計測

测量

  • Lighthouse モバイル/デスクトップ両方確認
  • 実機でも確認（エミュレーションと差異あり）
  • 本番環境で計測（開発環境は参考値）
  • 同时检查Lighthouse移动端/桌面端结果
  • 在真机上验证（与模拟器存在差异）
  • 在生产环境中测量（开发环境仅作参考）

監視

监控

  • Vercel Speed Insights 設定
  • アラート閾値設定（LCP > 3s等）
  • 定期レポート確認
  • 配置Vercel Speed Insights
  • 设置告警阈值（如LCP > 3s）
  • 定期查看报告

関連スキル

相关技能

  • vercel-react-best-practices: 最適化パターン（57ルール）
  • ui-ux-pro-max: アクセシビリティ（WCAG コントラスト）
  • vercel-react-best-practices: 优化模式（57条规则）
  • ui-ux-pro-max: 无障碍性（WCAG 对比度）