性能关乎用户体验
研究表明，页面加载时间每增加 1 秒，转化率可能下降 7%。Google 也将 Core Web Vitals 作为搜索排名的因素之一。
关键指标
- LCP（Largest Contentful Paint）：最大内容绘制，应 < 2.5s
- FID（First Input Delay）：首次输入延迟，应 < 100ms
- CLS（Cumulative Layout Shift）：累积布局偏移，应 < 0.1
优化策略
1. 资源加载优化
- 使用
rel="preload"预加载关键资源 - 图片使用 WebP 格式并实现懒加载
- JavaScript 使用
async或defer延迟执行 - 启用 Brotli 压缩替代 Gzip
2. 渲染优化
- 使用 CSS Containment 限制重排范围
- 避免强制同步布局（Forced Synchronous Layout）
- 长列表使用虚拟滚动
3. 缓存策略
- 静态资源使用 CDN 并设置长缓存时间
- 文件名使用内容哈希实现缓存失效
- Service Worker 实现离线可用
工具推荐
- Lighthouse：Google 出品的性能审计工具
- WebPageTest：多地点、多设备的性能测试
- Chrome DevTools Performance 面板：深入分析运行时性能