了解 2019 年 I/O 大会上发布的三项全新 Web 性能功能。
在 2019 年 Google I/O 大会的“大规模提升速度”讲座中，我们宣布了三项新功能，我们希望在未来一年里能够提升 Web 性能。
Lighthouse 现在支持性能预算
LightWallet 是 Lighthouse 中的一项新功能，添加了对性能预算的支持。性能预算为网站的性能制定了标准。更重要的是，它们可以让您在发布之前轻松发现并修复性能下降问题。
LightWallet 在最新版本的 Lighthouse CLI 中可用，并且只需几分钟即可设置完毕。如需了解详情，请参阅这些 说明。
不确定应该设置多少预算？尝试使用我们的实验性性能预算计算器，它可以生成与钱包兼容的预算配置。
网页中的浏览器级图片和 iframe 延迟加载
网页通常包含大量图片，这会导致数据使用量、网页膨胀和网页加载速度变慢。其中许多图片在屏幕外，需要用户滚动才能查看。
到目前为止，您需要使用 JavaScript 库解决延迟加载图片的问题，但这种情况可能很快就会发生变化。今年夏天，Chrome 将推出对 loading 属性的支持，该属性可为网页实现标准化的 <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 作为查询参数
我们宣布，现在可通过 display query-string 参数在所有 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 添加到默认代码嵌入中（如下所示）。我们希望这会鼓励更多开发者尝试这项令人兴奋的新增功能。
下面是一个关于 Glitch 的演示，演示了如何将显示屏与多个字体系列搭配使用。请尝试使用 DevTools 网络模拟了解 font-display: swap 的影响。
观看更多视频
我们的讲座还介绍了几个关于使用高级性能模式提升用户体验的生产案例研究。其中包括利用图片 CDN、Brotli 压缩、智能 JavaScript 服务和预提取来提升网页加载速度的网站。欢迎观看讲座了解详情 :)