了解 2019 年 I/O 大会上发布的三项新的 Web 性能功能。
在 2019 年 Google I/O 大会的“Speed at Scale”演讲中，我们宣布了三项举措，希望能在未来一年内提升 Web 性能。
Lighthouse 现在支持性能预算
LightWallet 是 Lighthouse 中的一项新功能，增加了对性能预算的支持。性能预算可为网站性能设定标准。更重要的是，让您能够在发布之前识别并修复性能回归问题。
LightWallet 包含在最新版本的 Lighthouse CLI 中，只需几分钟即可完成设置。这些说明提供了更多信息。
不确定应该设置多少预算？试试我们的实验性性能预算计算器，它可以生成与 LightWallet 兼容的预算配置。
浏览器级图片和 iframe 延迟加载功能已在 Web 上推出
网页通常包含大量图片，这会导致数据用量增加、网页膨胀和网页加载速度变慢。其中许多图片位于屏幕外，需要用户滚动才能看到。
到目前为止，您需要使用 JavaScript 库来解决延迟加载图片的问题，但这种情况可能很快就会改变。今年夏天，Chrome 将推出对 loading 属性的支持，该属性可为 Web 带来标准化的 <img> 和 <iframe> 延迟加载。
loading 属性允许浏览器延迟加载屏幕外图片和 iframe，直到用户滚动到它们附近。loading 支持三个值：
lazy：非常适合延迟加载。eager：不适合延迟加载。立即加载。auto：浏览器将确定是否延迟加载。
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
“当用户滚动到附近时”的确切启发法由浏览器决定。一般来说，我们希望浏览器在延迟加载的图片和 iframe 内容进入视口之前就开始提取它们。
loading 属性在 Chrome Canary 版中通过标志实现。您可以在 Chrome 75+ 中试用此演示，并启用 about://flags/#enable-lazy-image-loading 和 about://flags/#enable-lazy-frame-loading 标志。
如需了解详情，请参阅有关延迟加载功能的文章。
Google Fonts 现在支持将 font-display 作为查询参数
我们宣布，现在所有 Google Fonts 均可通过显示查询字符串参数在生产环境中支持 font-display：
https://fonts.googleapis.com/css?family=Lobster&display=swap
借助 font-display 描述符，您可以根据网页字体的加载时长来决定其呈现或回退方式。它支持多个值，包括 auto、block、swap、fallback 和 optional。
以前，为 Google Fonts 中的网页字体指定 font-display 的唯一方法是自行托管，但此次变更后，您无需再这样做。
Google Fonts 文档已更新，在默认代码嵌入中添加了 font-display（如下所示）。我们希望这能鼓励更多开发者尝试这一令人兴奋的新功能。
观看视频了解详情
我们的演讲还涵盖了多个生产案例研究，这些案例研究展示了如何使用高级性能模式来改善用户体验。这些网站包括利用图片 CDN、Brotli 压缩、智能 JavaScript 传送和预提取来加快网页加载速度的网站。观看演讲，了解更多信息 :)