前端性能优化清单：从 Lighthouse 60 到 95

性能指标

指标	及格	优秀
FCP (首次内容绘制)	< 1.8s	< 1.0s
LCP (最大内容绘制)	< 2.5s	< 1.5s
TBT (总阻塞时间)	< 200ms	< 50ms
CLS (累积布局偏移)	< 0.1	< 0.05
Speed Index	< 3.4s	< 1.5s

图片优化（影响最大）

<!-- ❌ 原始 2MB 的 PNG -->
<img src="hero.png" />

<!-- ✅ WebP + 响应式尺寸 -->
<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" loading="lazy" width="1200" height="600"
       alt="Hero" decoding="async" />
</picture>

CSS 优化

/* ❌ 阻塞渲染 */
@import url('https://fonts.googleapis.com/css2?family=Inter');

/* ✅ 预连接 */
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

/* ✅ 关键 CSS 内联，其余异步加载 */
<link rel="preload" href="/styles.css" as="style" />

JavaScript 优化

<!-- ❌ 阻塞解析 -->
<script src="app.js"></script>

<!-- ✅ 异步加载 -->
<script src="app.js" defer></script>

<!-- ✅ 模块分割 -->
<script type="module" src="app.js"></script>

字体优化

/* ✅ 系统字体优先，无额外下载 */
font-family: -apple-system, BlinkMacSystemFont,
  'Segoe UI', sans-serif;

/* ✅ 如果必须用 Web 字体，子集化 + 预加载 */
<link rel="preload" href="/fonts/inter-latin.woff2"
      as="font" crossorigin />

网络优化

• ✅ HTTP/2（Cloudflare 默认）
• ✅ Gzip/Brotli 压缩
• ✅ CDN（Cloudflare 自动）
• ✅ 静态资源 Cache-Control: max-age=31536000, immutable
• ❌ 避免多个第三方脚本

性能预算

设定硬指标：

• 首页 < 100KB（gzip 后）
• TTI < 3s
• 最多 5 个第三方请求

检查工具

npm run build && npx lighthouse https://your-site.com --view

性能优化不是一次性的——每次发版后跑一次 Lighthouse，守住指标。