Native lazy loading has arrived!

原文《Native lazy loading has arrived!》
翻译：范小饭

原生懒加载已经到来

对于那些尚未见过的人，谷歌上周向Chrome版76引入了原生延迟加载，现在你肯定在想，什么是本机延迟加载，是否值得添加到我的网站？

好吧 - 这正是我希望通过我使用它的经验，能回答你的问题。

什么是原生懒加载

延迟加载通过在用户需要时加载资源（如图像）来提高性能，例如，当有人登陆您的页面时，它会在进入视口时加载任何图像，而不是在页面最初加载时加载所有图像，这是有益的，因为用户不会总是看到页面底部的图像，那么为什么要让我们的用户下载所有那些不必要的图像？

从前，如果我们需要实现懒加载，我们需要引入一个库，或者写一些Javascript来检查元素相对于用户视口的位置以及必要时延迟加载资源。听起来还有些工作，不是吗？

原生延迟加载是Google新推出的内置解决方案，意思是不需要编写额外的Javascript来实现延迟加载（并且极大地提高了网站的性能），本机延迟加载通过给图像或iFrame添加属性就能实现。

听起来不错吧？但它实际上值得实施吗？

我决定在BBC的一个内部产品上实现原生延迟加载，这个网站每天有大约3,000名活跃用户。网站上最常见的操作之一涉及运行查询，该查询呈现最多100个图像的列表。我认为这似乎是尝试本机延迟加载的理想场所。

所以，他值得吗？是的，给图片添加加载属性，使它的加载时间减少了50%，意味着从1s到0.5s，以及最多可以向服务器保存40个请求，所有这些性能增强只是将一个属性添加到一堆图像中！

举个例子

所以我们已经看到了它能做什么，让我们来看看它是如何工作的。我将介绍如何为图像实现本机延迟加载。

这很简单 - 附加load属性，值为“lazy”会告诉浏览器延迟加载图像。指定高度和宽度将防止在图像加载时任何笨拙的页面布局更改。

<img src="/images/example.png" loading="lazy" width="400" height="400" />

总结一下，使用本机延迟加载是为用户提供真正渐进式性能增强的最简单方法之一。这不是一个完美的解决方案，但如果你还没有使用延迟加载并拥有大量图像/ iframe，那么它绝对值得尝试 - 特别是因为它很容易实现！

不幸的是，原生懒加载不是一个银子弹，因为它是一个新的浏览器功能，现在还缺少浏览器支持，因此，必须实现polyfill或后备Javascript解决方案以支持其他浏览器。可以关于这个更详细的browsers that support native lazy loading on caniuse.com.

还值得注意的是，无法使用本机延迟加载来加载背景图像，因此如果您使用了很多背景图像，那么您可能需要考虑使用Javascript替代方法来延迟加载背景图像。

有乐趣的懒加载！