【译】2022 年回顾：Web 性能有哪些新变化？

　　原文地址：https://www.debugbear.com/blog/2022-in-web-performance

　　若对文中提到的一些性能参数不太熟悉，可以参考我之前的一篇博文《性能参数和优化手段》。

　　衡量和优化网站速度的方式一直在变化。 今年又引入了新的 Web 标准（并最终得到广泛支持），开发了新的工具，并提出了新的指标。

　　本文介绍了 2022 年 Web 性能格局发生变化的一些方式。

一、优先提示

　　优先提示是我今年看到的影响最大的浏览器功能，在优化 LCP 时提供快速获胜。

　　只需将 fetchpriority="high" 属性添加给最重要的图像元素：

<img src="/hero.png" fetchpriority="high">

　　这将告诉浏览器在加载低优先级资源之前发出此请求。

　　默认情况下，图像请求的优先级较低，在呈现页面后，首屏图像的优先级会提高。

　　添加 fetchpriority=high 意味着浏览器可以立即启动图像请求。

　　

二、Chrome 中不再有 OSCP 请求

　　在线证书状态协议 (OCSP) 允许浏览器检查给定的 SSL 证书是否已被吊销。

　　如果网站使用的是扩展验证证书，则 Chrome 会在建立连接时进行这些检查。

　　下面的请求瀑布显示了作为 SSL 连接（紫色）的一部分发出的 OCSP 请求（灰色）的示例。

　　基本上，第二个请求是作为 HTML 文档请求的一部分进行的。

　　

　　Chrome 停止在 Chrome 106 中发出 OSCP 请求。对于使用扩展验证证书的网站，这带来了显着的性能改进。

　　

三、与 Next Paint 指标的交互

　　Interaction to Next Paint (INP) 是 Google 的一项新指标，用于衡量页面对用户输入的响应速度。

　　它测量用户交互（如单击或按键）与屏幕的下一次更新之间经过的时间。

　　

　　INP 最终可能会取代首次输入延迟 (FID) 作为核心 Web 生命指标（Core Web Vitals）之一。

　　由于 INP 还包括处理时间和呈现延迟，因此它具有比首次输入延迟更高的值。 它还查看最慢的页面交互，而不像 FID 只查看第一个。

　　

四、Desktop Core Web Vitals 作为排名因素

　　谷歌有三个核心网络生命指标评估用户体验，并被谷歌用作排名因素。

　　在 2021 年 6 月推出，并在 2022 年 2 月，页面体验排名更新也开始影响桌面搜索。

　　你可以在 Google Search Console 中查看你网站的运行情况。

　　今年，Google 还开始在可用的地方显示 URL 级数据，因此你可以快速查看需要优化的页面。

　　

五、Chrome 中的后退/前进缓存

　　许多页面导航只是浏览器历史记录中的后退/前进运动。

　　长期以来，移动浏览器一直试图通过保存页面状态和恢复页面状态来加速这些导航。

　　Chrome 的后退/前进缓存现已在移动设备和桌面设备上全面推出。

　　从技术上讲，这一变化发生在 2021 年 11 月，但值得强调，因为积极影响在今年才完全显现出来。

　　例如，缓存的推出导致 Cumulative Layout Shift 分数有了很大提高。

　　

六、在 PageSpeed Insights 中查看观察到的指标

　　在解释 PageSpeed Insights 报告的指标时，许多基于 Lighthouse 的工具使用的模拟节流经常造成混淆。

　　我们现在发布了一个 Chrome 扩展程序，可以显示 Lighthouse 从 Chrome 收集的原始数据。

　　例如，如果限制值比原始指标快，则表明模拟存在问题。

　　如果 FCP 和 LCP 在观测数据中非常接近而在模拟数据中非常不同，那么这也可以表明 Lighthouse 模拟的局限性。

　　

七、HTTP/3 标准化

　　浏览器长期以来一直在试验 HTTP/3 协议，但最终在 2022 年 6 月实现了标准化。

　　HTTP/3 实现了几个性能目标，例如减少建立连接的网络往返次数，并使移动用户在不同网络之间切换时更容易迁移连接。

　　

八、为阻塞渲染的请求提供更多的参考信息

　　呈现阻塞渲染的请求对于性能很重要，因为它们会阻止呈现整个页面。

　　但有时很难识别它们。 幸运的是，Chrome 已经开始报告有关请求是否呈现阻塞的更多详细信息，如你在此瀑布视图中所见。

　　

　　Resource Timing API 现在还报告了 renderBlockingStatus 属性。

　　

　　最后，DevTools 中新的 Performance Insights 选项卡也显示了这些数据。

　　

九、Chrome DevTools 性能洞察面板

　　DevTools Performance 选项卡显示了网站的综合视图，但它在确定信息的优先级和生成见解方面作用不大。

　　Chrome DevTools 中新的 Performance Insights 选项卡旨在更轻松地识别影响 Core Web Vitals 的问题。

　　

　　它显示了一系列与性能相关的见解，然后提出了一些修复建议。

　　

十、103 状态码

　　浏览器资源提示告诉浏览器在需要资源之前加载资源或创建服务器连接。

　　103 HTTP 状态码允许 Web 服务器在完整的 HTML 响应准备好之前告诉浏览器将来需要的资源。

　　这样浏览器就可以在服务器仍在处理请求时开始加载这些资源。

　　例如，阻止呈现的样式表或网络字体可以提前开始加载，或者浏览器可以预连接到 API 子域。

　　这在使用 CDN 时特别有用。 CDN 提供与用户位置非常接近的服务器。

　　它可以在几毫秒内返回一个早期的 103 响应，然后将文档请求发送到主网站服务器进行处理。

十一、Chrome 中的整页预呈现

　　有自 11 月发布版本 108 以来，Chrome 将在实际导航之前开始加载页面。

　　当导航发生时，在后台加载的页面是“前景化（foregrounded）”的，可能会立即呈现。

　　例如，当我在多功能框中输入“广告”时，Chrome 有 83% 的把握会转到 ads.twitter.com，因此它会在我开始输入时预加载该页面。

　　输入 chrome://predictors/ 可以查看有关你自己的浏览行为的信息。

　　

　　网站还可以使用 Speculation Rules API 告诉浏览器可能即将到来的导航。

十二、新的免费网站速度测试

　　今年 10 月，我们在 debugbear.com/test 上推出了新的免费网站速度测试。

　　查看你的网站在实验室和 Google 收集的现场数据中的运行速度。

　　你可以单击每个渲染指标以获得详细的请求瀑布，告诉你如何优化它。

　　

十三、Safari 对 AVIF 的支持

　　WebP 和 AVIF 等现代图像格式可以通过在较小的文件中编码相同的信息来显著的加快网站速度。

　　虽然 WebP 已得到广泛支持两年多，但 AVIF 支持仅在今年 9 月随着 iOS 16 和 macOS Ventura 的发布才出现在 Safari 中。

　　AVIF 在压缩低保真图像时尤其出色，这意味着当你想在网站上显示照片并节省带宽时，它是一个不错的选择。

　　请记住，并非每个 Safari 用户都已升级，并且 Edge 仍然不支持 AVIF。

　　

十四、Safari 中的原生图像延迟加载

　　本机图像延迟加载确保图像仅在它们即将进入视口时加载，从而节省带宽并优先考虑更重要的页面内容。

　　自今年 3 月发布 iOS 15.4 以来，Safari 现在也支持 loading="lazy" 属性。

　　现在所有主要浏览器都支持它，全球 92% 的用户都将受益。

十五、展望 2023 年

　　在 2023 年，看看工具如何在初始页面加载后改进页面交互将会很有趣。

　　Lighthouse 已经支持运行用户流，并且可以报告 Interaction to Next Paint 指标。

　　DevTools 还添加了用于记录用户流程的记录器功能。 还有关于改进软导航性能报告的建议。

　　单页应用程序将在其整个生命周期中显示多个 URL 的内容，但目前性能指标通常仅归因于初始着陆页。

　　能够跟踪 history.push 导航的渲染里程碑也将有助于收集更好的用户体验数据。

　　Lighthouse 自 2021 年 11 月以来就没有发布过主要版本，但我们可以期待明年的 10.0 版会对性能得分的计算方式进行更新。