让网站快一次很容易。难的是在不断增加功能的同时保持速度：每个新组件、新字体或新库都会让页面变重一点，直到网站明显变慢才有人注意到。所以我们不再把速度当作一次性的审计，而是把它变成每次变更都必须通过的测试。
起点
我们第一次认真测量这个网站时，页面在加载过程中布局会跳动（Cumulative Layout Shift约为0.2），在限速的移动网络下，主要内容需要4到6秒才出现。主样式表压缩后有41 KB，主要原因是为管理区域准备的组件和校验代码也一并发给了访客。
我们做了哪些改动
- 访客只拿到访客需要的代码。 管理界面组件库和表单校验库不再进入公开网站。有一项测试会遍历网站的import，只要其中任何一个重新混进来就会失败。
- 只为页面上实际存在的内容提供CSS。 主样式表从296 KB减到98 KB，压缩后只有16 KB。
- 不会引起布局偏移的字体。 关键字体会预加载，页面也不再预取可能永远用不到的代码。
守住成果的测试
每个拉取请求都会触发CI构建网站，以与生产环境相同的方式提供服务（HTTP/2、TLS、压缩），并在四个关键页面上各运行三次Lighthouse，取中位数。预算标准是：每项得分不低于95，最大内容在2秒内显示，布局偏移低于0.1，主线程阻塞低于200 ms。只要某次变更超出预算，CI就会变红，该变更也无法合并。同时还会运行无障碍检查，目前在覆盖的页面上没有发现任何WCAG AA违规。
结果
在CI中，各页面在Lighthouse四个类别中都拿到100分，主要内容在1秒内显示。在线上网站，首页得分100，主要内容约1.2秒显示，商品页得分98。
我们也坦诚说明尚不完美之处：日语及其他CJK语言的页面更慢，因为这些字体大得多。这个问题已单独立项处理。
这对您意味着什么
慢的页面会在访客读到第一个字之前就把人流失掉，搜索引擎也会注意到。如果您和我们合作开发落地页或网店，这套性能预算会一并提供。它是我们工作方式的一部分，而不是额外选项。