Core Web Vitals 2026：LCP/INP/CLS 优化指南

Core Web Vitals 是 Google 衡量用户体验的三个核心指标，也是 SEO 的重要参考。本文给出它们的完整优化指南。

LCP：最大内容绘制

LCP 衡量页面主要内容何时可见，目标是 2.5 秒内。

优化方向：

• 加速服务器响应：CDN、边缘渲染、SSR/SSG；
• 优先加载关键资源：LCP 元素对应的图片/字体提前加载；
• 减少渲染阻塞：内联关键 CSS，延迟非关键 JS；
• 优化图片：用 <link rel="preload"> 预加载首屏主图。

INP：交互到下一次绘制

INP 衡量交互的响应速度，目标是 200 毫秒内（良好）。

优化方向：

• 拆分长任务，避免主线程被独占；
• 降低事件回调开销，用并发特性降级非紧急更新；
• 减少强制同步布局。

CLS：累计布局偏移

CLS 衡量页面视觉稳定性，目标是 0.1 以内。

优化方向：

• 为图片、视频、广告预留尺寸（aspect-ratio）；
• 避免在内容上方动态插入元素；
• 字体加载用 font-display: optional 或预加载，减少文字跳动；
• 动画优先用 transform，不触发布局。

检查清单

1. 首屏主图是否预加载且带尺寸？
2. 是否有阻塞渲染的同步 JS？
3. 是否存在长任务（>50ms）？
4. 动态内容是否预留了占位空间？

结语

三大指标对应「快不快」「灵不灵」「稳不稳」三个维度。把它们纳入 CI 与监控，性能优化才不会退化成一次性的突击。