core web vitals包含lcp、inp、cls三大核心指标：lcp衡量最大内容绘制时间（≤2.5秒），inp替代fid评估最差交互响应延迟（≤200ms），cls量化累积布局偏移（≤0.1）以保障视觉稳定性。
Core Web Vitals（CWV）是 Google 提出的一套以用户为中心的网页性能评估体系，它不依赖实验室模拟数据，而是聚焦真实用户访问过程中的关键体验维度。评估不是看单一数字，而是围绕三个可测量、可归因、影响搜索排名与转化率的核心指标展开：LCP、FID/INP、CLS。
LCP（最大内容绘制）——看“页面主干是否快速可见”
它记录视口内最大一块内容（如主图、大标题、轮播首帧）完成渲染的时间点。达标线是 ≤2.5 秒。
- 典型最大内容元素包括：
、
- 常见拖慢原因：服务器响应慢（TTFB > 100ms）、JS 阻塞渲染、未优化的大图或字体加载、客户端渲染开销高
- 有效改进方向：启用 CDN 和服务端缓存、延迟非首屏 JS、压缩并转为 WEBP/AVIF 格式图片、使用 loading="eager" 明确标记首屏关键资源
FID 或 INP——看“用户一碰就响应，还是卡顿等待”
FID 已逐步被 INP 取代。INP 衡量的是整个页面生命周期中，所有用户交互（点击、输入、滚动）中最差的一次响应延迟，从触发到下一次画面更新的时间。良好阈值是 ≤200ms。
- FID 只捕获首次交互，INP 覆盖更全面，更能反映长期流畅度
- 主线程长时间被长任务（>50ms）占用是主因，比如未拆分的巨型 JS 包、同步 DOM 操作、低效循环
- 推荐做法：用 Code Splitting 和 dynamic import() 拆分逻辑、将计算密集型任务移至 Web Worker、避免强制同步布局（如读写交替的 offsetTop + style.margin）
CLS（累积布局偏移）——看“页面会不会突然‘跳’”
它统计页面整个生命周期中，所有意外视觉位移的得分总和。理想值是
- 典型诱因：图片/视频未设宽高、字体加载导致文本重排（FOIT/FOUT）、动态插入无尺寸占位的广告或第三方组件
- 稳定布局的关键动作：为所有媒体元素显式声明 width 和 height 属性、使用 CSS aspect-ratio、预加载关键字体、用 transform 替代 top/left 移动动画
- 对第三方脚本，可加 loading="lazy" 或包裹在 container query 容器中限制影响范围
实际评估时，建议组合使用多种工具：Chrome DevTools 的 Lighthouse 做本地调试，Google Search Console 的 CWV 报告看真实用户字段数据，再辅以 PageSpeed Insights 或 DebugBear 进行持续监控。三项指标中任意一项未达标，都可能拉低整体页面体验评分，进而影响自然搜索曝光与用户留存。
