上线前必查：静态站性能十项清单

从图片到缓存头，十项逐条打勾，首屏进 2 秒不是玄学。

性能优化最怕无从下手。这份清单按收益排序，前十项做完，绝大多数静态站的首屏能压进 2 秒。

1. 图片三件套

单张图片压到 200KB 以内（Squoosh、ImageOptim）；<img> 声明 width 与 height 防布局抖动；首屏以外的图加 loading="lazy"。图片通常占页面体积的 80%，这一项收益最大。

2. 字体收敛

全站最多两套字体；font-display: swap 必加；只引需要的字重（Regular/Medium/Bold 够用），有精力就做子集化只留用到的字符。

3. 请求合并

多个 CSS 合并成一个、多个 JS 合并成一个；删掉没用到库。请求数从 30 降到 10，体感比单项提速明显。

4. 开启压缩

Nginx 开 gzip 或 brotli（文本资源能压掉 70% 体积）：

gzip on;
gzip_comp_level 5;
gzip_min_length 1024;
gzip_types text/css application/javascript text/html image/svg+xml;

托管平台（Cloudflare Pages / Netlify）默认已开，自有服务器要自查。

5. 缓存头

带指纹文件名的静态资源（如 app.a1b2c3.js）给 Cache-Control: public, max-age=31536000, immutable；HTML 给 max-age=3600。不缓存 HTML 会每次回源，缓存过头更新又不生效，两者分开配。

6. 挂一层 CDN

把静态资源放到 CDN，访问者从最近的节点取文件。海外用户多的站用 Cloudflare；国内用云厂商 CDN。

7. preload 关键资源

首屏必用的大图和字体加 <link rel="preload">，让浏览器提前开始下载：

<link rel="preload" as="image" href="/hero.jpg">

只 preload 首屏真正需要的，滥用法反而抢带宽。

8. 减少重定向

每次 301 都多一次完整往返。把 http→https、非 www→www 合并成一跳，内链直接写最终地址。

9. 用 Lighthouse 量化

Lighthouse 跑一遍，关注三个数：LCP（最大内容绘制，小于 2.5 秒）、CLS（布局偏移，小于 0.1）、TBT（阻塞时间，小于 200ms）。性能分 90 以上再上线。

10. 真实设备测一遍

DevTools 切到手机 + 4G 节流，从头走一遍核心流程。模拟器和真机的差距，往往就藏在第三步的加载里。

FORMA 导出的站没有后端往返、资源已内联，天然占了便宜；图片、字体、缓存头这三项，导出后按清单补齐即可。