Core Web Vitals指南
Core Web Vitals 是 Google 衡量真实用户体验的指标，自 2021 年起直接影响搜索排名。
LCP
Largest Contentful Paint — 加载性能
≤ 2.5s
良好≤ 4.0s
需要改进> 4.0s
较差- 对主图使用
fetchpriority="high" - 使用
<link rel="preload">预加载 LCP 图片 - 使用 CDN 缩短服务器响应时间
- 移除阻塞渲染的资源
- 使用现代图片格式（WebP、AVIF）
INP
Interaction to Next Paint — 交互性（2024年替代 FID）
≤ 200ms
良好≤ 500ms
需要改进> 500ms
较差- 使用
scheduler.yield()或setTimeout分解长任务 - 减少 JavaScript 执行时间
- 延迟加载非关键第三方脚本
- 使用 Web Worker 处理复杂计算
CLS
Cumulative Layout Shift — 视觉稳定性
≤ 0.1
良好≤ 0.25
需要改进> 0.25
较差- 始终为图片/视频设置明确的
width和height - 为广告和嵌入内容预留空间
- 避免在现有内容上方插入新内容
- 使用
font-display: optional或预加载字体 - 动画使用 CSS
transform而非布局属性