如何优化静态网站的性能
性能优化是提升用户体验的关键环节。根据 2025 Web Almanac 数据，仅 48% 的移动页面 和 56% 的桌面页面 通过了全部 Core Web Vitals 测试。
Core Web Vitals 2025 标准
自 2024 年 3 月起，Google 用 INP（Interaction to Next Paint） 替代了 FID 作为响应性指标。当前阈值：
| 指标 | 良好 | 需要改进 | 差 |
|---|---|---|---|
| LCP (最大内容绘制) | ≤ 2.5s | 2.5s - 4.0s | > 4.0s |
| INP (交互到下次绘制) | ≤ 200ms | 200ms - 500ms | > 500ms |
| CLS (累积布局偏移) | ≤ 0.1 | 0.1 - 0.25 | > 0.25 |
Google 使用 CrUX（Chrome User Experience Report）真实用户数据的第 75 百分位进行评估。截至 2026 年 1 月，全球 55.8% 的网站通过了全部 Core Web Vitals。
图片优化
- 使用 WebP/AVIF 格式（比 JPEG 减少 25-35% 体积）
- 响应式图片 (srcset + sizes)
- 懒加载非首屏图片 (
loading="lazy") - 使用 next/image 自动优化
- 为 LCP 图片添加
<link rel="preload" as="image" fetchpriority="high">
资源加载
- 代码分割：基于路由的自动分割
- 按需加载：动态 import()
- 预加载关键资源：
<link rel="preload"> - 字体优化：
font-display: swap+ next/font 自动托管
缓存策略
Cache-Control: public, max-age=31536000, immutable
对于静态资源使用长期缓存，配合内容哈希实现版本控制。
INP 优化（新重点）
INP 取代 FID 后，需要关注所有交互的响应性，而不仅仅是首次输入：
- 避免长任务（>50ms 的 JavaScript 执行）
- 使用 Web Workers 处理密集计算
- 虚拟化长列表渲染
- 延迟加载非关键 JavaScript
工具推荐
- Lighthouse: 实验室数据审计
- PageSpeed Insights: 真实用户数据 + 实验室数据
- Google Search Console: 站点级 Core Web Vitals 报告
- Chrome DevTools Performance: 深度性能分析
- WebPageTest: 详细资源加载瀑布图