网站首屏加载优化：三个指标、六件事与一张检查表

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