性能优化最容易犯的错，是一上来就搞服务端渲染、上 CDN、做代码分割。这些手段有效，但成本高。下面这十个动作基本都是改几行配置的事，按投入产出比从高到低排。

1. 开启 Gzip 或 Brotli

收益最大、成本最低的一项，在 Nginx 里加几行配置就行。文本类资源压缩率通常 60%~80%。能上 Brotli 就优先 Brotli，比 Gzip 再小 15% 左右。

2. 给静态资源加缓存头

首屏慢往往不是第一次慢，而是每次都慢。给带 hash 的资源设长期缓存：

location ~* \.(css|js|png|jpg|webp)$ {
  expires 30d;
  add_header Cache-Control "public, immutable";
}

3. 压缩图片、换成 WebP

图片通常是首屏体积的大头。一张 500KB 的 PNG 转成 WebP 往往只剩 100KB 出头，肉眼几乎看不出差别。注意别把已经是压缩格式的图片再 Gzip 一遍。

4. 关键 CSS 内联

把首屏必需的那一小段 CSS 直接写进 <style> 标签，让浏览器拿到 HTML 就能渲染，省掉一次 CSS 请求的往返。完整样式表则用 preload 异步加载：

<link rel="preload" href="style.css" as="style"
      onload="this.rel='stylesheet'">

5. 非首屏图片懒加载

一个属性就能搞定，浏览器原生支持：

<img src="a.jpg" loading="lazy" alt="说明">

首屏可见的图片不要加，否则反而会让 LCP 变慢。

6. 给图片标明尺寸

显式写上 width 和 height，浏览器就能提前预留空间，避免图片加载完后的布局跳动（CLS）。这是最容易被忽略、但用户体感非常明显的一项。

7. JS 用 defer 或 async

默认的 <script> 会阻塞解析。加 defer 让它在 HTML 解析完后执行，既不影响渲染，又能保证执行顺序。

8. 减少字体体积

中文字体动辄好几 MB，是隐形杀手。用 font-display: swap 避免文字空白期，中文字体优先使用系统字体栈，只对 Logo 等少量文字做子集化。

9. 砍掉无用依赖

很多时候体积是"堆"出来的：为了一个日期格式化引入了整个工具库，为了一个图标引入整套图标包。定期用打包分析工具看一眼产物构成，往往有惊喜。

10. 用 CDN 托管公共库

把 React、Vue 这类公共库放到 CDN 上，能利用用户浏览器里已有的缓存，还能减少你服务器的带宽压力。注意要配合 SRI 校验，防止 CDN 被劫持。

怎么判断有没有效果

优化前先测一次，优化后再测一次，别凭感觉。核心看三个指标：

  • LCP（最大内容绘制）：2.5 秒以内算良好。
  • CLS（累积布局偏移）：0.1 以内。
  • INP（交互响应）：200 毫秒以内。

Lighthouse 跑一次就能拿到这三个数，本地跑分只作参考，真实用户数据更可信。

小结

前五项做完，大部分站点的首屏就能有明显改善，而且几乎不需要改动业务代码。优化这件事，先把便宜的果子摘完，再考虑要不要上重型方案。

— 全文完 —