原文地址 https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages

简单对一篇完整的检查表目录做一个翻译，极力推荐阅读原文，文中也提到了大量的有关性能优化策略和方法的关键字和链接，方便查询。

准备计划和指标

  • 建立性能文化氛围（让更多人意识到性能的重要性）
  • 目标：比最快的竞争对手至少快 20%
  • 选择正确的指标（选择正确的指标，不是所有指标都重要）
  • 在能代表大多数用户群体的设备上收集数据（保证准确地数据收集）
  • 为测试环境准备“干净的”和“符合真实用户的”相关的配置
  • 与身边人分享性能指标（确保团队每个人都认可）

设定实际目标

  • 响应时间在 100ms，60fps
  • 3G 网络下的 FID<100ms，TTI<5​​s，速度索引<3s，关键文件大小预算<170KB（已压缩）

定义环境

  • 选择并配置好项目中的构建工具
  • 默认使用渐进增强
  • 选择良好的性能基准
  • 仔细评估框架和依赖（不是每个项目或者页面都需要笨重的框架和大量的依赖库）
  • 考虑使用 PRPL 模式和应用程序外壳体系的结构
  • 检查 API 是否存在优化空间（比如 GraghQL）
  • 框架选择，Google AMP 还是 Facebook 的 Instant Articles？
  • 合理运用 CDN

资源优化

  • 利用 Brotli 进行纯文本压缩（你可能总听到 gzip，brotli 是 2015 年 Google 提出的无损压缩的格式）
  • 使用响应式图片以及 webp
  • 图片是否可以再进一步优化？
  • 视频是否可以进行适当优化？
  • 网络字体是否经过优化？（适当删除和裁切可以减小加载体积）

构建优化

  • 设置优先事项
  • 在生产环境中使用原生 JavaScript 模块
  • 合理使用 tree-shaking, scope hoisting, code-splitting
  • 考虑将一些复杂繁重的 js 放在 Web Worker （预加载数据以及 PWA）
  • 考虑将一些复杂的计算逻辑放在 WebAssembly 中
  • 是否正在使用提前编译器？
  • 对于旧版浏览器仅提供旧版代码
  • 对于 JavaScript 使用模块还是非模块模式？
  • 通过增量解耦识别并重写旧代码
  • 识别并且删除没有用到的代码（代码覆盖率，Chrome 工具）
  • 缩减 JavaScript Bundle 大小
  • 对于 JavaScript Chunks 是否使用预测性的预读取（prefetch）
  • 针对 JavaScript 引擎有针对性的优化
  • CSR 还是 SSR？都要！
  • 使用依靠自建的 lib 资源库（安全、可控）
  • 限制第三方脚本影响
  • 设置正确的 HTTP 缓存头（检查 expires，max-age，cache-control）

Delivery Optimizations

  • 是否异步加载了所有的异步库？
  • 使用 IntersectionObserver 和优先级提示来延迟加载体积大的组件模块
  • 逐步加载图像（渐进式图像加载，由模糊到清晰）
  • 优先加载基础且重要的 CSS 资源
  • 尝试重新组合 CSS 规则
  • 是否对信息流有响应？
  • 考虑使你的组件具有连接意识（公用和复用数据）
  • 考虑使你的组件设备了解内存占用
  • 利用 dns-prefetch 加快交付速度
  • 善用 service workers 来缓存和网络容灾
  • 是否正在 CDN/Edge 上使用 service worker，比如 A/B Test？
  • 优化渲染性能
  • 是否优化了渲染体验
  • 是否有效阻止了重排和重绘？

网络和 HTTP/2

  • 是否开启 OCSP stapling
  • 是否已采用 IPV6
  • 确保所有资源请求都是经过 HTTP/2
  • 正确部署 HTTP/2
  • 确保服务器和 CDN 都已支持 HTTP/2
  • 支持 QUIC 的 HTTP（HTTP/3）
  • 是否采用 HPACK 压缩？
  • 确保服务器安全性（HTTPS 等）

测试与监控

  • 是否有话了审计工作流程（加强 CI 自动化）
  • 是否在代理浏览器和旧版浏览器上进行测试？
  • 是否测试了对可访问性的影响？
  • 是否设置了持续监控