Web 性能优化全景指南：从 Core Web Vitals 到实战

Web 性能直接影响用户体验和 SEO 排名。Google 的 Core Web Vitals 是衡量性能的黄金标准。

Core Web Vitals 解读

LCP（最大内容绘制 < 2.5s）衡量加载性能、INP（交互到下次绘制 < 200ms）衡量交互性、CLS（累积布局偏移 < 0.1）衡量视觉稳定性。这三个指标共同决定了页面的用户体验评分。

代码分割（React.lazy / dynamic import）、图片优化（WebP/AVIF 格式、srcset 响应式图片、loading=lazy 懒加载）、字体优化（font-display: swap、子集化 unicode-range）。

虚拟列表处理长列表（只渲染可视区域）、debounce/throttle 高频事件、CSS containment（contain 属性限制布局范围）、避免强制同步布局（先读后写）。

CDN 分发静态资源、HTTP/2 多路复用、资源预加载（preload/prefetch/dns-prefetch）、Service Worker 离线缓存、合理的缓存策略（Cache-Control/ETag）。

Tree Shaking 消除死代码、代码分割按路由拆分、动态导入大型第三方库、使用 webpack-bundle-analyzer 分析 bundle 体积。

Lighthouse CI 集成到 CI/CD、Web Vitals 库实时监控 RUM 数据、Chrome DevTools Performance 面板分析运行时性能。

性能优化优先级：1) 测量（Lighthouse/Web Vitals）→ 2) 代码分割 + 图片优化 → 3) 缓存策略 → 4) 渲染优化 → 5) 预加载/预连接。不要过早优化——先测量，再优化瓶颈。