前端性能优化：Core Web Vitals 与关键渲染路径

Core Web Vitals 是 Google 提出的用户体验核心指标，包括 LCP、INP 与 CLS。

一、三大指标

• LCP（Largest Contentful Paint）：最大内容绘制时间，目标 < 2.5s
• INP（Interaction to Next Paint）：交互响应延迟，目标 < 200ms
• CLS（Cumulative Layout Shift）：布局偏移，目标 < 0.1

二、关键优化手段

<!-- 预加载关键资源 -->
<link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
<!-- 图片声明尺寸，避免 CLS -->
<img src="hero.webp" width="800" height="450" alt="hero">

其他措施：减少首屏 JS 体积（代码分割）、使用 content-visibility 延迟渲染、为动态内容预留占位空间、避免同步布局抖动（Layout Thrashing）。