一、首屏优化先看数据，别先看代码
我接手优化需求时，常见的错误是第一句话就是"加个 CDN 吧"。
加之前先问三件事：慢在哪里、慢多少、谁在慢。
不看这三件，改到哪里都是运气。
二、先拿三个数
一、首字节时间。 服务器响应多快。
二、首次内容绘制。 用户多久看到东西。
三、最大内容绘制。 主体内容多久到位。
三个数各有含义。第一个慢说明服务端有问题，第二个慢说明渲染被阻塞，第三个慢说明资源太大。
三、按优先级做六件事
第一，图片。
绝大多数站点最大的体积在图片。压缩、换格式、按需加载。首屏图优先，其余惰加载。
第二，字体。
中文字体包很大。不要全量引入，用子集或系统字体。
第三，阻塞脚本。
把非必需脚本加 defer 或 async。把统计脚本放到底部。
第四，缓存。
静态资源加长缓存，文件名带版本。这一步最省事，收益最大。
第五，服务端渲染或静态化。
内容站尤其适合静态化。生成一次，所有人共享。
第六，CDN。
前面五步做完再上，否则只是把慢的地方换个地方。
四、Markdown 内容站的特有坑
内容站经常把 Markdown 渲染成 HTML，如果每请求一次渲染一次，CPU 会被吃满。
解法是生成静态页，或者在入库时就把 HTML 存好。
五、一个具体的检查表
```
[] 首屏图是否压缩到 200KB 以内
[] 字体是否用了子集
[] 是否有 >=3 个阻塞脚本
[] 静态资源是否带版本号
[] 是否开启了压缩（gzip / brotli）
[] 首屏是否有未使用的 CSS
[] 移动端是否单独测过
```
七条都过，基本不会太差。
六、样式层怎么补
很多时候慢的不只是资源，还有布局抖动。图片没有宽高、字体加载后跳动、容器没有约束。
这类问题看组件库的现成示例最快。 Bootstrap 组件实验室 的卡片、图片、骨架屏（占位符）示例都是可交互的，能直接看到布局在加载前后的变化。
七、一个提醒
优化要看趋势，不看单次。
同一张页面，早上和晚上测出来的数不一样。取一周的中位数，才有参考价值。