懒加载是一种延时加载屏幕可视范围之外的资源加载办法，也就是说，当用户打开网页时，先不加载屏幕可视范围之外的资源，等这些资源出现在在了可视范围中时，再开始加载。这种处理办法可以降低网页首屏的 HTTP 请求数，提高首屏的加载速度，对于图片资源比较多的网站，效果尤其显著。

什么是浏览器原生懒加载

以前，我们实现网页图片懒加载功能是通过 JavaScript 实现的，最新 Chrome 浏览器开始为我们提供了原生懒加载功能，该功能Chrome 74 版本开始提供试验性支持，从 75 版本开始默认开启。

浏览器支持该功能后，我们以前使用 JavaScript 实现的图片懒加载功能，现在直接在 HTML 里面加个标签就可以实现图片懒加载功能了。原生懒加载没有使用 JavaScript，也就没有额外的开销，性能自然会好很多。

如果浏览器支持，开发者可以在 img 和 iframe 标签上添加一个额外的 loading 属性来开启和控制浏览器的懒加载行为。该属性支持以下 3 个值：

• lazy：为这个元素开启懒加载行为。
• eager：为这个元素禁用懒加载行为，也就是在渲染网页的时候立即加载。
• auto：让浏览器来决定是否使用延迟加载。当 loading 属性设置为 auto 时，相当于未设置该属性。

Native Lazyload 原生懒加载插件

我们知道，WordPress 的很多图片都是通过模版标签输出的，要修改模版标签输出的 HTML 来添加属性，支持原生懒加载功能不是那么容易。Google 考虑到了这一点，为我们开发了 Native Lazyload 这个插件。

该插件可以自动为图片添加 loading 属性来开启浏览器原生懒加载功能。如果浏览器不支持loading属性，插件会回退到基于 IntersectionObserver 的 JavaScript 解决方案。如果 JavaScript 被禁用，但是浏览器支持loading 属性，插件将为图片元素添加一个 noscript 变体，图片还是会包括加载属性而无需进一步更改。

目前仅有 Chrome 支持 loading 属性，因为这个属性可以为在广泛的图片懒加载需求提供更方便和更高性能的解决方案，相信其他浏览器也会很快支持这个属性。另外我们也提供WordPress性能优化服务，如有需要，请联系我们咨询。