2020前端性能优化清单（六）

网络与 http/2

53. 启用 OCSP stapling 了吗？

通过在服务器上启用 OCSP stapling[2]，可以加快 TLS 握手的速度。联机证书状态协议（OCSP）被创建为证书吊销列表（CRL）协议的替代品。两种协议都用于检查 SSL 证书是否已被吊销。但是，OCSP 协议不需要浏览器花时间下载和搜索证书信息列表，因此减少了握手所需的时间。

54. 适配 IPv6 了吗?

由于IPv4 地址空间即将耗尽[3]，并且主要的移动网络都在迅速采用 IPv6(美国的 IPv6采用率[4]已经达到 50%)，所以最好将DNS 更新到 IPv6[5] 以备不时之需。IPv6 不向后兼容，最好确保对双协议栈网络的支持(dual-stack)——允许 IPv6 和 IPv4 同时运行。此外， 研究表明[6] ，由于邻居发现(NDP)和路由优化，IPv6 使这些网站的速度提高了 10 - 15%。

55. 确保所有资源都在 HTTP/2 上运行。

在过去几年中，随着谷歌向更加安全的 HTTPS 网站推进[7]，切换到 HTTP/2 环境[8] 无疑是一项不错的投资。实际上，根据 Web Almanac，54%的请求已经在 HTTP/2 上运行了[9]。

很重要的一点是要理解HTTP/2 不是完美的，[10]并且存在优先级问题[11]，但是它 得到了很好的支持[12]。而且，在大多数情况下，您最好使用它。

如果您仍在使用 HTTP，首先要耗费大量时间迁移到 HTTPS[13]，然后调整构建过程来适应 HTTP/2 复用和并行化。对于本文的其余部分，我将假定您正在切换到或已经切换到 HTTP/2。

根据 Web Almanac，2019 年底有 54%的请求是通过 HTTP/2 服务的，而这距离正式标准化只有 4 年时间。(图片来源:*Web Almanac*[14])

56. 正确地部署 HTTP/2。

同样，通过 HTTP/2 来提供资源服务[15]可以从到目前为止对资源提供方式的部分改造中受益。您需要在合并模块和并行加载许多小模块之间找到一个很好的平衡。归根结底，最好的请求还是没有请求[16]，然而，我们的目标是在资源的快速首次交付和缓存之间找到一个完美的平衡。

一方面，您可能希望避免将资源文件全部串联起来，而不是将整个界面分解为许多小模块，将它们压缩为构建过程的一部分并并行加载。一个文件的更改不需要重新下载整个样式表或 JavaScript。它还可以最大程度地减少解析时间[17]，并使单个页面的有效负载较低。

另一方面，打包仍然很重要[18]。通过使用许多小脚本，会影响整体压缩。大包的压缩将受益于字典复用，而小的独立包则不会。目前还没有标准方案来解决这个问题。其次，浏览器尚未针对此类工作流程进行优化。例如，Chrome 会触发与资源数量成线性关系的进程间通信[19]（IPC），因此资源数量过大将导致浏览器运行时成本增加。

pic

为了达到 HTTP/2 的最佳效果，请考虑渐进式加载 CSS[20]，这是 Chrome 的 Jake Archibald 建议的。

您可以尝试渐进式加载 CSS[21]。实际上，body 内部的 CSS 不再阻止 Chrome 的渲染[22]。但是存在一些优先级问题，[23]因此它不是那么简单，但是值得尝试。

您可以不使用HTTP/2 连接合并[24]，它允许您受益于 HTTP/2 的同时使用域分片，但是在实践中很难做到这一点，而且一般来说，这不是一个好习惯。同样，HTTP/2 和子资源完整性(Subresource Integrity)并不总是起作用[25]。

怎么办？好吧，如果您使用的是 HTTP/2，发送大约6-10 个软件包似乎是一个不错的折中方案（对于旧版浏览器来说也不算太糟）。进行实验和测量为您的网站找到适合的平衡。

57. 您的服务器和 CDN 支持 HTTP/2 吗？

不同的服务器和 CDN 对 HTTP/2 的支持不同。使用TLS 快了吗？[26]检查您的选项，或快速检查服务器的运行情况以及您希望支持的功能。

请参考 Pat Meenan 对 HTTP/2 优先级[27]（视频[28]）的极好的研究，并测试服务器对 HTTP/2 优先级的支持[29]。根据 Pat 的说法，建议启用 BBR 拥塞控制并将 tcp_notsent_lowat 设置为 16KB，以便 HTTP/2 优先级在 Linux 4.9 内核和更高版本上可靠地工作（感谢，Yoav！）。Andy Davies 对跨浏览器、CDN 和云托管服务的[30] HTTP/2 优先级进行了类似的研究。

运行时，请仔细检查您的内核是否支持 TCP BBR，并在可能的情况下启用它。它目前被用于 Google Cloud Platform，Amazon Cloudfront[31]，Linux[32]（例如Ubuntu[33]）上。

58. 您的服务器和 CDN 是否支持基于 QUIC 的 HTTP（HTTP/3）？

如果您喜欢冒险或前沿，则可能要检查服务器或 CDN 是否支持基于 QUIC 的 HTTP[34]（也称为HTTP/3）。尽管 HTTP/2 进行了重大改进，但是在网络速度慢或不可靠（大量数据包丢失）的情况下，它的性能并不是特别好。

为了解决这个问题，Google 一直在研究Google QUIC[35]，这是 Chrome 目前用于许多 Google 服务的协议。然后，Google 在 2015 年将许多学习成果带到了 IETF，IETF现在正在标准化[36]。

QUIC 和 HTTP / 3 越来越好，越来越“无懈可击”：具有更快的握手，更好的加密技术，更可靠的独立流，如果客户机与服务器之间曾经有连接，则使用 0-RTT。但是，这会占用大量 CPU 资源（对于相同带宽，CPU 使用量是 2-3 倍），UDP 堆栈未优化，并且硬件和 TLS 层存在一些未解决的问题。

HTTP / 3 有望在2020 年初[37]作为标准发布。Chrome 和 Safari 确认他们已经有了内部实现，并且在 Chrome Canary[38]和Firefox Nightly 中提供了 HTTP/3[39]。一些CDN 已经支持 QUIC 和 HTTP / 3[40]。Apache、nginx 或 IIS 都还不支持它，但到 2020 年可能会有所改变。

pic

TLS 快了吗？[41]您可以在切换到 HTTP/2 时检查服务器和 CDN 的选项。

59. 正在使用 HPACK 压缩吗？

如果您使用的是 HTTP/2，请仔细检查您的服务器是否为 HTTP 响应标头实现了 HPACK 压缩[42]，以减少不必要的开销。由于 HTTP /2 服务器相对较新，因此它们可能不完全支持该规范，HPACK 就是一个例子。H2spec[43]是一个很棒的（如果技术上非常详细）用于检查的工具[44]。HPACK 的压缩算法令人印象深刻[45]，而且很有效[46]。

60. 确保您服务器的安全性是“无懈可击”的。

所有浏览器的 HTTP/2 实现都基于 TLS，因此您可能要避免安全警告或页面上的某些元素不起作用。仔细检查您的安全标头设置是否正确[47]，消除已知漏洞[48]并检查 HTTPS 设置[49]。另外，请确保所有外部插件和跟踪脚本都通过 HTTPS 加载，不能有跨站点脚本，并且HTTP 严格传输安全头[50]和内容安全策略头[51]都已设置正常。

测试和模拟

61. 您优化了审计工作流程吗？

这听起来可能不是什么大事，您轻而易举就可以设置正确，并可能因此节省大量的测试时间。考虑使用 Tim Kadlec 的 Alfred 工作流[52]来提交一个测试到 WebPageTest 的公共实例。事实上，WebPageTest 有许多模糊的特性，所以请花点时间学习如何阅读 WebPageTest 瀑布视图图表[53]，以及如何阅读 WebPageTest 连接视图图表[54]，以更快地诊断和解决性能问题。

你也可以用一个谷歌电子表格驱动 WebPageTest[55]，并可以使用 Lighthouse CI 把可访问性，性能和搜索引擎优化分数[56]导入到你的 Travis 设置，或直接导入 Webpack[57]。

如果您需要快速调试某些东西，但是您的构建过程却看起来非常慢，那么请记住，“对于大多数 JavaScript 来说，在压缩代码中去除空白和符号错误占了减少大小的 95%的工作[58]。”你可以简单地禁用压缩来将构建速度提高 3 到 4 倍。”

使用 with Lighthouse CI 将可访问性、性能以及 SEO 得分 集成到 Travis 设置中，就能给所有开发者标示出新特性到来的性能影响

62. 您在代理浏览器和传统浏览器中测试过吗?

在 Chrome 和 Firefox 中测试是不够的。请了解您的网站在代理浏览器和传统浏览器中的工作方式。例如，UC 浏览器和 Opera Mini 在亚洲占有相当大的市场份额[59](高达 35%)。对你感兴趣的国家的平均网速进行测量[60]，以避免未来出现大的意外。使用网络节流进行测试，并模拟高 dpi 设备。BrowserStack[61] 非常适合在远程真实设备上进行测试，并且至少在你的办公室里安装一些真实的设备作为补充——这是值得的。

k6 可以帮助我们像写性能测试一样写单元测试

63. 您是否测试了可访问性的影响?

当浏览器开始加载一个页面时，它会构建一个 DOM，如果有一个辅助技术（如屏幕阅读器）在运行，它还会创建一个可访问性树。然后，屏幕阅读器必须查询可访问性树来检索信息并使其对用户可用 — 有时是默认的，有时是按需的。有时需要一些时间。

当我们说到交互的快速响应时，通常我们指的是用户通过点击链接和按钮与页面交互的速度。屏幕阅读器略有不同。在这种情况下，快速的交互时间意味着在屏幕阅读器能够在给定的页面上显示导航以及屏幕阅读器用户能够实际敲击键盘进行交互之前所需要的时间。

Leonie Watson 就可访问性性能，特别是缓慢加载对屏幕阅读器发布延迟的影响，发表了令人大开眼界的演讲[62]。屏幕阅读器用户习惯于快节奏的公告和快速导航，因此可能比视力正常的用户更缺乏耐心。

使用 JavaScript 的大页面和 DOM 操作将导致屏幕阅读器通知延迟。这是一个尚未开发的领域，需要一些关注和测试，因为屏幕阅读器在每个平台上都是可用的（Jaws, NVDA, Voiceover, Narrator, Orca）。

64. 是否建立了持续监控?

拥有 WebPagetest[63] 的私有实例对于快速和无限的测试总是有益的。然而，一个带有自动警报功能的连续的监控工具，如 Sitespeed[64], Calibre[65] 和 SpeedCurve[66]，可以让你更详细地了解情况。设置您自己的用户计时标记来度量和监视特定的业务指标。此外，可以考虑添加自动性能回归警报[67]来监视其随时间的变化。

考虑使用 RUM 解决方案来监视性能随时间的变化。对于自动化的单元测试类负载测试工具，您可以使用 k6[68] 及其脚本 API。此外，看看 SpeedTracker[69], Lighthouse[70] 和 Calibre[71]。

速成方案

这个列表非常全面，完成所有的优化可能需要很长时间。所以，如果您只有一个小时的时间来取得显著的进步，您会怎么做呢？让我们把它浓缩成15 个容易实现的目标。显然，在开始之前以及完成之后，要测量结果，包括开始渲染时间和在 3G 网络上进行交互的时间。

1. 衡量实际经验并制定适当的目标。一个好的目标是：可视区域渲染<1 s，页面渲染<3s，慢速 3G 的可操作时间<5s，重复访问的可交互时间(TTI) <2s。优化首屏渲染时间和交互时间。
2. 为您的主模板准备关键的 CSS，并将其包含在页面的中。对于 CSS / JS，关键文件大小控制在预算范围内。[最大为压缩后 170KB[72]（解压缩后约 0.7MB）]。
3. 修剪，优化，推迟和延迟加载尽可能多的脚本，选取轻量级替代方案，并限制第三方脚本的影响。
4. 仅向具有 <script type="module"> 和module/nomodule 模式[73]的旧版本浏览器提供旧版本代码。
5. 尝试重新组合 CSS 规则并测试 body 内的 CSS。
6. 添加资源提示(resource hints)以提升页面加载速度，例如“dns-lookup”、“preconnect”、“prefetch”、“preload”、和“prerender”等。
7. 设置 Web 字体子集并异步加载，并利用 CSS 中的 font-display 实现快速的首次呈现。
8. 使用mozjpeg[74], guetzli[75], pingo[76] 和 SVGOMG[77]优化图像，并考虑使用图像 CDN 为 WebP 服务。
9. 检查 HTTP 缓存头和安全头是否设置正确。
10. 在服务器上启用 Brotli 压缩。（如果不可能，请不要忘记启用 Gzip 压缩。）
11. 只要服务器运行在 Linux 内核版本 4.9+上，就启用 TCP BBR 拥塞。
12. 如果可能，启用 OCSP stapling 和 IPv6。
13. 如果 HTTP/2 可用，则启用 HPACK 压缩，如果 HTTP/3 在 CDNs 上可用，则启用 HTTP/3。
14. 在 service worker 中缓存字体、样式、JavaScript 和图像等资源。
15. 探索避免 rehydration（客户端再次渲染）的方案，使用渐进式 hydration 和流服务器渲染您的 SPA。

下载清单（PDF，Apple Pages）

牢记此清单，您应该为任何类型的前端性能项目做好准备。可以免费下载清单的打印 PDF 以及**可编辑的 Apple Pages 文档，**以根据您的需要定制检查表：

• 下载清单 PDF[78]（PDF，166 KB）
• 在 Apple Pages 中下载清单[79]（.pages，275 KB）
• 下载 MS Word 中的清单[80]（.docx，151 KB）

如果您需要替代方案，您还可以查看 Dan Rublic 编写[81]的前端[82]清单[83]，Jon Yablonski 编写[84]的“ Designer's Web Performance Checklist[85] ”和FrontendChecklist[86]。

出发吧！

某些优化可能超出了您的工作或预算范围，或者考虑到您必须处理的遗留代码，这些优化可能过于简单。没关系！将此清单用作一般（希望是全面的）指南，并创建适用于您的情况的问题清单。但最重要的是，在优化之前测试和测量您自己的项目以确定问题。祝大家 2019 年有好成绩！

非常感谢 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 哈曼（Hamann），吉迪恩·比泽（Gideon Pyzer），安迪·戴维斯（Andy Davies），玛丽亚·普罗斯韦尔尼纳（Maria Prosvernina），蒂姆·卡德尔茨（Ty Kadlec），雷伊·班戈（Rey Bango），马蒂亚斯·奥特（Matthias Ott），彼得·鲍耶（Peter Bowyer），菲尔·沃尔顿（Phil Walton），玛丽亚·佩拉尔塔（Mariana Peralta），佩皮真·桑德斯（Pepijn Senders），马克·诺丁汉，让·皮埃尔·文森特，菲利普·特利斯（Philipp Tellis），瑞安·汤森（Ryan Townsend），英格丽·伯格曼（Ingrid Bergman），穆罕默德·侯赛因（Mohamed Hussain） SH，JacobGroß，Tim Swalling，Bob Visser，Kev Adamson，Adir Amsalem，Aleksey Kulikov 和 Rodney Rehm 审阅本文，我们奇妙的社区也分享了从性能优化工作中获得的技术和经验教训，供大家使用。您们真了不起！

参考资料

[1]

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

[2]

在服务器上启用 OCSP stapling: https://www.digicert.com/enabling-ocsp-stapling.htm

[3]

IPv4 地址空间即将耗尽: https://en.wikipedia.org/wiki/IPv4_address_exhaustion

[4]

采用率: https://www.google.com/intl/en/ipv6/statistics.html#tab=ipv6-adoption&tab=ipv6-adoption

[5]

DNS 更新到 IPv6: https://www.paessler.com/blog/2016/04/08/monitoring-news/ask-the-expert-current-status-on-ipv6

[6]

研究表明: https://www.cloudflare.com/ipv6/

[7]

更加安全的 HTTPS 网站推进: https://security.googleblog.com/2016/09/moving-towards-more-secure-web.html

[8]

HTTP/2 环境: https://http2.github.io/faq/

[9]

54%的请求已经在 HTTP/2 上运行了: https://almanac.httparchive.org/en/2019/http2

[10]

HTTP/2 不是完美的，: https://www.lucidchart.com/techblog/2019/04/10/why-turning-on-http2-was-a-mistake/

[11]

存在优先级问题: https://github.com/andydavies/http2-prioritization-issues

[12]

得到了很好的支持: http://caniuse.com/#search=http2

[13]

迁移到 HTTPS: https://https.cio.gov/faq/

[14]

Web Almanac: https://almanac.httparchive.org/en/2019/http2

[15]

通过 HTTP/2 来提供资源服务: https://www.youtube.com/watch?v=yURLTwZ3ehk

[16]

最好的请求还是没有请求: http://alistapart.com/article/the-best-request-is-no-request-revisited

[17]

最大程度地减少解析时间: https://css-tricks.com/musings-on-http2-and-bundling/

[18]

打包仍然很重要: http://engineering.khanacademy.org/posts/js-packaging-http2.htm

[19]

进程间通信: https://www.chromium.org/developers/design-documents/inter-process-communication

[20]

渐进式加载 CSS: https://jakearchibald.com/2016/link-in-body/

[21]

渐进式加载 CSS: https://jakearchibald.com/2016/link-in-body/

[22]

不再阻止 Chrome 的渲染: https://twitter.com/patmeenan/status/1037027969842208777

[23]

存在一些优先级问题，: https://twitter.com/csswizardry/status/1133867804380270592

[24]

HTTP/2 连接合并: https://daniel.haxx.se/blog/2016/08/18/http2-connection-coalescing/

[25]

HTTP/2 和子资源完整性(Subresource Integrity)并不总是起作用: https://nooshu.github.io/blog/2019/12/17/http2-and-sri-dont-always-get-on/

[26]

TLS 快了吗？: https://istlsfastyet.com/

[27]

对 HTTP/2 优先级: https://blog.cloudflare.com/http-2-prioritization-with-nginx/

[28]

视频: https://www.youtube.com/watch?v=ct5MvtmL1NM

[29]

测试服务器对 HTTP/2 优先级的支持: https://github.com/pmeenan/http2priorities

[30]

跨浏览器、CDN 和云托管服务的: https://github.com/andydavies/http2-prioritization-issues#cdns--cloud-hosting-services

[31]

Amazon Cloudfront: https://aws.amazon.com/blogs/networking-and-content-delivery/tcp-bbr-congestion-control-with-amazon-cloudfront/

[32]

Linux: https://www.techrepublic.com/article/how-to-enable-tcp-bbr-to-improve-network-speed-on-linux/

[33]

Ubuntu: https://www.linuxbabe.com/ubuntu/enable-google-tcp-bbr-ubuntu

[34]

基于 QUIC 的 HTTP: https://www.youtube.com/watch?v=idViw4anA6E

[35]

Google QUIC: https://www.chromium.org/quic

[36]

现在正在标准化: https://tools.ietf.org/html/draft-ietf-quic-http

[37]

2020 年初: https://daniel.haxx.se/blog/2019/08/05/first-http-3-with-curl/#comment-22227

[38]

在 Chrome Canary: https://twitter.com/programmingart/status/1174775953316294658

[39]

Firefox Nightly 中提供了 HTTP/3: https://twitter.com/bagder/status/1191482712739196928

[40]

CDN 已经支持 QUIC 和 HTTP / 3: https://blog.cloudflare.com/http3-the-past-present-and-future/

[41]

TLS 快了吗？: https://istlsfastyet.com/

[42]

实现了 HPACK 压缩: https://blog.cloudflare.com/hpack-the-silent-killer-feature-of-http-2/

[43]

H2spec: https://github.com/summerwind/h2spec

[44]

工具: https://twitter.com/tunetheweb/status/988196156697169920?s=20

[45]

令人印象深刻: https://www.mnot.net/blog/2018/11/27/header_compression

[46]

有效: https://www.keycdn.com/blog/http2-hpack-compression/

[47]

安全标头设置是否正确: https://securityheaders.io/

[48]

消除已知漏洞: https://www.smashingmagazine.com/2016/01/eliminating-known-security-vulnerabilities-with-snyk/

[49]

检查 HTTPS 设置: https://www.ssllabs.com/ssltest/

[50]

HTTP 严格传输安全头: https://www.owasp.org/index.php/HTTP_Strict_Transport_Security_Cheat_Sheet

[51]

内容安全策略头: https://content-security-policy.com/

[52]

Alfred 工作流: https://github.com/tkadlec/webpagetest-alfred-workflow

[53]

如何阅读 WebPageTest 瀑布视图图表: https://nooshu.github.io/blog/2019/10/02/how-to-read-a-wpt-waterfall-chart/

[54]

如何阅读 WebPageTest 连接视图图表: https://nooshu.github.io/blog/2019/12/30/how-to-read-a-wpt-connection-view-chart/

[55]

用一个谷歌电子表格驱动 WebPageTest: https://calendar.perfplanet.com/2014/driving-webpagetest-from-a-google-docs-spreadsheet/

[56]

可访问性，性能和搜索引擎优化分数: https://web.dev/fast/using-lighthouse-ci-to-set-a-performance-budget

[57]

直接导入 Webpack: https://twitter.com/addyosmani/statuses/1017655423099289600

[58]

占了减少大小的 95%的工作: https://slack.engineering/keep-webpack-fast-a-field-guide-for-better-build-performance-f56a5995e8f1

[59]

在亚洲占有相当大的市场份额: http://gs.statcounter.com/#mobile_browser-as-monthly-201511-201611

[60]

平均网速进行测量: https://www.webworldwide.io/

[61]

BrowserStack: https://www.browserstack.com/

[62]

令人大开眼界的演讲: https://www.youtube.com/watch?v=n1sXj9oAXFU

[63]

WebPagetest: http://www.webpagetest.org/

[64]

Sitespeed: https://www.sitespeed.io/

[65]

Calibre: https://calibreapp.com/

[66]

SpeedCurve: https://speedcurve.com/

[67]

自动性能回归警报: https://calendar.perfplanet.com/2017/automating-web-performance-regression-alerts/

[68]

k6: https://github.com/loadimpact/k6

[69]

SpeedTracker: https://speedtracker.org/

[70]

Lighthouse: https://github.com/GoogleChrome/lighthouse

[71]

Calibre: https://calibreapp.com/

[72]

最大为[压缩后 170KB: https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/

[73]

module/nomodule 模式: https://philipwalton.com/articles/using-native-javascript-modules-in-production-today/

[74]

mozjpeg: https://github.com/mozilla/mozjpeg

[75]

guetzli: https://github.com/google/guetzli

[76]

pingo: http://css-ig.net/pingo

[77]

SVGOMG: https://jakearchibald.github.io/svgomg/

[78]

下载清单 PDF: https://www.dropbox.com/s/k1oxe5vyrli83zf/performance-checklist-1.3.pdf?dl=0

[79]

在 Apple Pages 中下载清单: https://www.dropbox.com/s/gng2oc707cph04z/performance-checklist-1.3.pages?dl=0

[80]

下载 MS Word 中的清单: https://www.dropbox.com/s/c9iwlmltdwvlhgz/performance-checklist-1.3.docx?dl=0

[81]

Dan Rublic 编写: https://github.com/drublic/checklist

[82]

前端: https://github.com/thedaviddias/Front-End-Performance-Checklist

[83]

清单: http://jonyablonski.com/designers-wpo-checklist/

[84]

编写: https://github.com/drublic/checklist

[85]

Designer's Web Performance Checklist: http://jonyablonski.com/designers-wpo-checklist/

[86]

FrontendChecklist: https://github.com/thedaviddias/Front-End-Performance-Checklist