了解 2019 年 I/O 大会上发布的三项 Web 性能新功能。
在 2019 年 Google I/O 大会的“大规模提升速度”演讲中，我们宣布了三项举措，希望在未来一年内提升 Web 性能。
Lighthouse 现在支持性能预算
LightWallet 是 Lighthouse 中的一项新功能，增加了对性能预算的支持。性能预算为您的网站的性能设置了标准。更重要的是，它们有助于在发布之前轻松发现和修复性能回归问题。
LightWallet 可在最新版本的 Lighthouse CLI 中使用，只需几分钟即可完成设置。如需了解详情，请参阅这些说明。
不确定预算应该是多少？试用我们的实验性效果预算计算器，它可以生成与 LightWallet 兼容的预算配置。
网络上推出浏览器级图片和 iframe 延迟加载
网页通常包含大量图片，这会导致数据用量增加、网页膨胀和网页加载速度变慢。其中许多图片都超出了屏幕范围，用户需要滚动屏幕才能查看。
到目前为止，您需要使用 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 中是通过标志实现的。您可以在启用 about://flags/#enable-lazy-image-loading 和 about://flags/#enable-lazy-frame-loading 标志的 Chrome 75 及更高版本中试用此演示版。
您可以参阅有关延迟加载功能的文章，了解更多详情。
Google Fonts 现在支持将 font-display 用作查询参数
我们已宣布，现在所有 Google Fonts 均支持通过 display 查询字符串参数使用 font-display 属性，该属性已在生产环境中推出：
https://fonts.googleapis.com/css?family=Lobster&display=swap
借助 font-display 描述符，您可以决定 Web 字体的呈现或回退方式，具体取决于其加载所需的时间。它支持多个值，包括 auto、block、swap、fallback 和 optional。
以前，若要为 Google Fonts 中的 Web 字体指定 font-display，唯一的方法是自行托管这些字体，但此次变更使您无需这样做。
Google Fonts 文档已更新，以在默认代码嵌入中包含 font-display（如下所示）。我们希望这能鼓励更多开发者尝试这项激动人心的附加功能。
下面是 Glitch 上的一个演示，展示了如何将 display 与多个字体系列搭配使用。您可以使用 DevTools 网络模拟来试用此功能，了解 font-display: swap 的影响。
观看更多
我们的演讲还介绍了几种使用高级性能模式来提升用户体验的生产环境案例。其中包括利用图片 CDN、Brotli 压缩、智能 JavaScript 提取和预提取来加快网页加载速度的网站。观看演讲了解详情 :)