性能指标体系
Core Web Vitals 是 Google 提出的核心网页指标,包括 LCP(最大内容绘制)、FID(首次输入延迟)和 CLS(累积布局偏移)。优化目标是 LCP < 2.5s、FID < 100ms、CLS < 0.1。
一、资源加载优化
代码分割:按路由或组件懒加载,减少首屏体积
Tree Shaking:移除未使用的代码
图片优化:使用 WebP 格式、懒加载、响应式图片
CDN 加速:静态资源分发到边缘节点
二、渲染性能
避免强制同步布局;使用 will-change 提示浏览器优化;减少重绘和回流;虚拟列表优化长列表渲染。
三、缓存策略
强缓存(Cache-Control: max-age)用于不变资源;协商缓存(ETag、Last-Modified)用于可能变化的资源;Service Worker 实现离线缓存。
四、网络优化
启用 HTTP/2 多路复用;压缩传输(Gzip/Brotli);DNS 预解析;预加载关键资源(preload、prefetch)。
五、监控与分析
使用 Lighthouse 进行性能审计;接入 Real User Monitoring(RUM)收集真实用户数据;建立性能预算防止回归。