随着网络功能和交互性的稳步提升，网页大小也在这些年持续增长。更具体地说，在2012年到2022年期间，网页大小桌面端增长了184%，移动端惊人地增长了420%[1]！
作为网站所有者或管理者，你能做些什么呢？嗯，延迟加载图片就是你可以用来应对这一问题的最佳解决方案之一。
在本指南中，我们将带您了解延迟加载图片的所有复杂之处🖼️，并向您展示实现它的不同方法。
让我们从接下来要讲的内容目录开始：
- 为什么延迟加载很重要？
- 什么是延迟加载？
- 延迟加载的好处
- 延迟加载图片时需要考虑什么
- 选项1a：使用原生延迟加载（如果您安装了最新的WordPress版本）
- 选项1b：从零开始实现延迟加载（如果您使用的是5.5之前的WordPress版本）
- 选项2：使用WordPress插件（比第一个选项更好，控制更多）
为什么延迟加载很重要？
一个网页的巨大负载主要由图片、脚本、样式表、字体和视频组成。然而，图片占据了典型网页重量的主要部分。另一方面，图片对网页设计也至关重要，所以删除它们并不是一个可行的解决方案。
没有任何优化的情况下，用户的网络浏览器会在页面完全渲染之前下载所有资源。这会导致加载时间增加，可能会让人们离开。WooCommerce估计，加载速度每提升100ms，电商网站的收入可以增加1%[2]。
在这种情况下，尽一切可能优化加载时间是非常有意义的。由于图片是网页大小的主要贡献者，从它们开始是一个好主意。这就是延迟加载发挥作用的地方。
什么是延迟加载？
要了解延迟加载的工作原理，这里有一个快速的动画GIF，演示了图片在CodeinWP上是如何渲染的。
当页面加载时，所有图片不会立即下载。当您向下滚动到一张图片时，您首先看到的是它的模糊版本。这个模糊图片是最终图片的低分辨率版本，大小只有很小一部分。实际图片在后台加载。这种推迟下载和渲染图片直到用户滚动到它上面的现象正是所谓的延迟加载。
虽然"lazy"通常带有负面含义，但延迟加载实际上是一种积极的做法，可以通过整体优化网站来降低页面加载时间。
⚠️ 注意。在本文中，我们研究了延迟加载图片的过程，但延迟加载不仅限于图片——在渲染任何其他资源（如视频和字体）时也可以使用同样的方法。
延迟加载的好处
由于网页加载时间是用户放弃访问的主要因素，延迟加载图片可以显著提高用户在页面加载前留在页面上的可能性。随之而来的连锁效应是销售额或转化率的潜在增加。
延迟加载图片的另一个显著好处是降低服务器费用。您只提供用户滚动浏览的那些图片，并为未查看的页面部分节省带宽。由于图片占据了页面重量的主要部分，这可能会导致潜在的服务器成本降低。
预先加载所有图片也可能对读者不利。如果用户使用的是无限流量套餐，可能就没有问题。然而，在有限流量套餐下，延迟加载图片可以节省用户的数据流量。
延迟加载图片时需要考虑的事项
既然您已经决定以正确的方式在网站上实现延迟加载，让我们来讨论几个关键的实现注意事项。
确定需要延迟加载的图片
并非所有图片都适合延迟加载。例如，您不会想要延迟加载那些对设计结构至关重要、必须加载才能正确渲染的图片。
只有离屏且不影响页面结构的图片才应该考虑延迟加载。通常，这些是页面正文中 <img> 元素里的图片。
选择图片占位符
接下来需要考虑的是，当用户滚动到图片位置时，在图片加载过程中应该显示的中间图片或颜色。图片加载时间取决于图片大小，甚至可能需要几秒钟。因此，您必须考虑在加载期间希望使用什么。
开发人员通常采取两种方向：
- 使用图片的主色调作为背景
- 使用低质量版本的图片
正确的选择取决于您网站的设计，以及您希望在图片加载时向用户展示什么。
虽然一种技术是在图片进入视口时立即加载，但您可能需要考虑在此之前添加缓冲时间——这样用户就永远不会看到占位符。
加载图片时注意不要改变页面结构
在图片加载之前，可能会使用 0 px 的尺寸来显示。这对于保持设计结构并不理想。
这很容易改变页面的布局和文字位置。简单的解决方案是立即为图片添加正确的尺寸——这可以确保图片元素加载后的大小保持不变。
考虑到以上注意事项，现在让我们来看看如何在 WordPress 网站上实际实现延迟加载。
选项 1a：使用原生延迟加载
WordPress 发布 5.5 版本时，原生浏览器延迟加载功能已集成到 WordPress 核心文件中。实际上，这意味着只要您使用的是 WordPress 5.5 或更高版本，从技术上讲您不需要做任何事情来激活 WordPress 延迟加载功能。
不过有一些注意事项。（难道不是总是有吗？🤷）
首先，原生延迟加载功能取决于访问者的网页浏览器是否支持 loading 属性，值得高兴的是，大多数主要浏览器都支持这一点话虽如此，大多数并不意味着所有。仍有约 10% 的用户由于浏览器限制，可能无法使用 WordPress 原生延迟加载功能。
此外，原生延迟加载功能对图片加载方式没有太多控制权，例如无法使用静态占位符图片或排除某些关键图片。
为确保 100% 的延迟加载支持并更好地控制该过程，建议使用专用的 WordPress 延迟加载插件进行图片优化。我们将在选项二中介绍这一点。
选项 1b：从头开始实现延迟加载
如果您是：
- 使用低于 5.5 版本的 WordPress
- 不打算升级到最新版本的 WordPress（不推荐）
- 不想使用我们将在下文第二个选项中推荐的懒加载插件
那么你需要从头开始启用懒加载。但我们必须在此发出免责声明：
此选项仅推荐给熟悉 JavaScript 的人士。
理想情况下，你需要执行以下步骤：
- 在 JavaScript 中注册事件处理函数，以在两个事件发生时检查元素：loading 和 scrolling。
替代方案：使用 Intersection Observer API
Robin Osborne 解释了此过程的简单实现方法。
Intersection Observer API 可以帮助识别在任意给定时间点位于视口内的 DOM 元素。这是实现懒加载的更简洁方式，无需编写事件处理函数。实现懒加载所需的代码行数也大大减少。然而，浏览器兼容性仍然是个问题。
Google Developers Blog 通过 CodePen 演示 解释了 Intersection Observer API 的实现方法。
选项 2：使用 WordPress 插件
目前有几个选项可以激活懒加载，但我们认为最好的一个是：
该插件会自动为你禁用原生懒加载功能。它将用你在插件中选择的更自定义的懒加载设置来覆盖它。
此外，Optimole 为你提供可靠的文章图片优化（测试结果见此），具有相当高级的功能。例如，它可以根据用户屏幕尺寸和网络连接强度提供动态调整大小和质量功能。
除非网站访问者的浏览器不支持，否则它还会自动以 webP 格式加载图片。如果浏览器不支持，Optimole 将默认使用原始文件类型（jpeg 或 png）。
要激活懒加载，只需安装插件并在插件的控制面板中启用该功能：
结论 🧐
这篇文章探讨了懒加载图片的需求和好处。我们还讨论了在 WordPress 网站上实现懒加载的三种不同方法：
- 只要已安装 WordPress 5.5 或更高版本，就可以依赖原生懒加载
- 如果已安装 5.5 之前的 WordPress 版本，并且具备 JavaScript 中级熟练度，则可以从头开始实现懒加载
- 要获得一键式解决方案来为网站上的图片启用懒加载，并对设置有更多控制权，你应该选择使用 Optimole 等插件
你对懒加载有什么看法？你是否尝试过用它来提升网站性能？
别忘了参加我们的WordPress网站加速速成课程。了解更多如下：
如何加速您的WordPress网站
通过一些简单的修复，您可以将加载时间减少甚至50-80% 🚨
通讯表单 – 侧边栏
名 *
您的邮箱 *
立即订阅！
如果你是人类，请将此字段留空。
Δ
通过输入您的邮箱上方，您订阅了我们的每周通讯。您可以随时更改您的决定。我们尊重您的收件箱和隐私。
参考资料
[1] https://www.keycdn.com/support/the-growth-of-web-page-size [2] https://www.keycdn.com/support/using-a-woocommerce-cdn-combination
