2021 年前端性能：快速获胜

已发表: 2022-03-10
快速总结↬让2021年……快点！ 一份年度前端性能清单，包含您在当今 Web 上创建快速体验所需了解的所有内容，从指标到工具和前端技术。 自 2016 年以来更新。

目录

  1. 准备：计划和指标
  2. 设定切合实际的目标
  3. 定义环境
  4. 资产优化
  5. 构建优化
  6. 交付优化
  7. 网络、HTTP/2、HTTP/3
  8. 测试和监控
  9. 快速获胜
  10. 一切都在一页上
  11. 下载清单（PDF、Apple Pages、MS Word）
  12. 一切都在一页上
  13. 下载清单（PDF、Apple Pages、MS Word）
  14. 订阅我们的电子邮件通讯不要错过下一个指南。

快速获胜

这个列表非常全面，完成所有优化可能需要相当长的时间。 那么，如果你只有 1 小时的时间来获得显着的改进，你会怎么做？ 让我们把它归结为17 种容易获得的果实。 显然，在开始之前和完成后，测量结果，包括最大内容绘制和 3G 和电缆连接上的交互时间。

  1. 衡量现实世界的体验并设定适当的目标。 目标是比你最快的竞争对手至少快 20%。 保持在最大内容绘制 < 2.5 秒内，首次输入延迟 < 100 毫秒，在慢速 3G 上交互时间 < 5 秒，重复访问，TTI < 2 秒。 至少优化首次内容绘制和交互时间。
  2. 使用 Squoosh、mozjpeg、guetzli、pingo 和 SVGOMG 优化图像，并使用图像 CDN 提供 AVIF/WebP。
  3. 为您的主模板准备关键的 CSS，并将它们内联在每个模板的<head>中。 对于 CSS/JS，在最大的关键文件大小预算内运行。 170KB gzipped（0.7MB 解压）。
  4. 修剪、优化、延迟和延迟加载脚本。 投资捆绑器的配置以消除冗余并检查轻量级替代方案。
  5. 始终自托管您的静态资产，并且始终更喜欢自托管第三方资产。 限制第三方脚本的影响。 使用外观，在交互中加载小部件并注意防闪烁片段。
  6. 选择框架时要有选择性。 对于单页面应用程序，识别关键页面并静态提供它们，或者至少预渲染它们，并在组件级别使用渐进式水合并在交互时导入模块。
  7. 单独的客户端渲染对于性能来说并不是一个好的选择。 如果您的页面没有太大变化，请预渲染，如果可以，请推迟启动框架。 如果可能，请使用流式服务器端渲染。
  8. 仅向具有<script type="module">和 module/nomodule 模式的旧版浏览器提供旧版代码。
  9. 尝试重新组合 CSS 规则并测试 in-body CSS。
  10. 添加资源提示以通过更快dns-lookup 、 preconnect 、 prefetch 、 preload和prerender加快交付。
  11. 子集网络字体并异步加载它们，并利用 CSS 中的font-display进行快速首次渲染。
  12. 检查 HTTP 缓存标头和安全标头是否设置正确。
  13. 在服务器上启用 Brotli 压缩。 （如果这不可能，至少确保启用 Gzip 压缩。）
  14. 只要您的服务器在 Linux 内核版本 4.9+ 上运行，就启用 TCP BBR 拥塞。
  15. 如果可能，启用 OCSP 装订和 IPv6。 始终提供 OCSP 装订的 DV 证书。
  16. 为 HTTP/2 启用 HPACK 压缩，如果可用，请移至 HTTP/3。
  17. 在 Service Worker 缓存中缓存字体、样式、JavaScript 和图像等资产。

下载清单（PDF，Apple Pages）

记住这个清单，你应该为任何类型的前端性能项目做好准备。 随意下载清单的可打印 PDF 以及可编辑的 Apple Pages 文档，以根据您的需要自定义清单：

  • 下载清单 PDF (PDF, 166 KB)
  • 在 Apple Pages (.pages, 275 KB) 中下载清单
  • 下载 MS Word 中的清单 (.docx, 151 KB)

如果您需要替代方案，您还可以查看 Dan Rublic 的前端清单、Jon Yablonski 的“Designer's Web Performance Checklist”和 FrontendChecklist。

我们走吧！

一些优化可能超出了您的工作或预算范围，或者考虑到您必须处理的遗留代码可能只是过度杀伤力。 没关系！ 将此清单用作一般（希望是全面的）指南，并创建您自己的适用于您的上下文的问题列表。 但最重要的是，在优化之前测试和测量您自己的项目以识别问题。 祝大家2021年业绩好！

目录

  1. 准备：计划和指标
  2. 设定切合实际的目标
  3. 定义环境
  4. 资产优化
  5. 构建优化
  6. 交付优化
  7. 网络、HTTP/2、HTTP/3
  8. 测试和监控
  9. 快速获胜
  10. 一切都在一页上
  11. 下载清单（PDF、Apple Pages、MS Word）
  12. 一切都在一页上
  13. 下载清单（PDF、Apple Pages、MS Word）
  14. 订阅我们的电子邮件通讯不要错过下一个指南。

非常感谢 Guy Podjarny、Yoav Weiss、Addy Osmani、Artem Denysov、Denys Mishunov、Ilya Pukhalski、Jeremy Wagner、Colin Bendell、Mark Zeman、Patrick Meenan、Leonardo Losoviz、Andy Davies、Rachel Andrew、Anselm Hannemann、Barry Pollard、Patrick哈曼、吉迪恩·派泽、安迪·戴维斯、玛丽亚·普罗斯维尼娜、蒂姆·卡德莱克、雷伊·班戈、马蒂亚斯·奥特、彼得·鲍耶、菲尔·沃尔顿、玛丽安娜·佩拉尔塔、佩皮恩·森德斯、马克·诺丁汉、让·皮埃尔·文森特、菲利普·泰利斯、瑞恩·汤森、英格丽·褒曼、穆罕默德·侯赛因SH、Jacob Groß、Tim Swalling、Bob Visser、Kev Adamson、Adir Amsalem、Aleksey Kulikov 和 Rodney Rehm 对本文的审阅，以及我们出色的社区分享了从性能优化工作中获得的技术和经验教训，供大家使用. 你真的很牛逼！