目录
图片和视频是当今每个 WordPress 网站的必备品。很难想象一个网站没有营销横幅、产品图片、徽标、画廊，甚至视频教程。不幸的是，图像和视频可能很重，这使得它们成为页面大小的最大贡献者。
问题是：即使我们使用大量图像和视频，如何确保我们的网页加载速度快？使用延迟加载插件是优化网站速度的解决方案之一。正如我们在一篇关于 WordPress 延迟加载的深入文章中所写的，延迟加载脚本仅在用户到达该部分时（而不是在此之前）加载图像和视频。
在本指南中，您将了解什么是延迟加载脚本，并且您将了解 7 个可以帮助提高网站性能的最佳延迟加载插件。
为什么应该选择延迟加载插件
让我们从基础开始。
延迟加载是一种优化技术，它加载可见内容，但推迟您可以在首屏下方看到的内容的渲染。它主要适用于需要时才加载的离屏图像或视频。
延迟加载是优化页面速度和改善最终用户体验的 简单方法，因为它避免了不必要的资源下载或代码执行。
例如，如果页面包含访问者必须滚动才能看到的图像，那么您可以延迟加载完整图像并仅在用户到达该位置时才显示它。
事实上，您不需要独占所有系统资源来同时加载网站的所有图片和视频。为什么要使用资源来加载当前未查看的内容并降低网站速度？
| 📖 使用延迟加载，直到需要时才加载视频和图片。这样，网站性能就会得到提升，特别是对于具有多个嵌入视频和高分辨率图片的网站。 |
您需要延迟加载吗？
如果您使用的页面和帖子有多个高分辨率图片和嵌入视频，您应该考虑使用延迟加载。简而言之，延迟加载减少了访问者对网站服务器的调用，就像您告诉媒体仅当访问者将其显示在屏幕上时才加载媒体一样。
要确定延迟加载的实施对于您的网站是否至关重要，测试您的 WordPress 网站的性能可能会非常有帮助。
假设您有一个包含大量高分辨率图像的新闻网站。您决定对 Google PageSpeed Insights 进行性能审核。在 Lighthouse 报告中，您会发现一些与图像相关的问题，这些问题会降低您的网站速度。如何？如果您注意下面的“机会”部分，您将看到“推迟屏幕外图像”建议。
延迟加载有助于提高性能
如前所述，延迟加载可以减少加载时间，而且我们都知道快速的网站可以改善用户体验。在开始实施延迟加载脚本之前，以下列出了对网页速度的好处：
- 带宽和资源优化– 仅当访问者请求时，内容才会传送给他们。这样做的目的是减少带宽使用并降低资源成本，因为媒体仅在用户需要时才传送，而不是一次性传送。
- 初始加载时间减少– 延迟加载减轻了网页的重量，使页面加载速度更快。访问者更快地访问您的内容！
- 更好的吸引客户——内容不间断地提供给用户。这就是让他们保持兴趣的方法！
在 WordPress 网站上实施延迟加载
要实现延迟加载，您需要使用“延迟加载脚本”，该脚本会在图像和视频进入视口时逐渐加载它们。好消息是，您不需要手动浏览库中的每个媒体来添加脚本！
在本指南中，我们精选了 7 个允许延迟加载图像和视频的插件。
7 个最佳延迟加载插件
与往常一样，对于一个问题，WordPress 提供了一种解决方案。WordPress插件目录中的许多免费插件都可以实现对视频和图片的延迟加载脚本。今天我们将介绍其中的 7 个：
- Lazy Load by WP Rocket
- A3 Lazy Load
- Smush
- Optimole
- Lazy Loader
- Lazy Load for Videos
- Autoptimize
让我们深入研究一下它们。
1. WP Rocket 的延迟加载
Lazy Load by WP是一个极其轻量级的插件，由著名的 WP Rocket 缓存插件（是的，这就是我们！）开发。
它是最流行的工具之一，可帮助您仅在访问者位于首屏时才能看到您的图片和视频。网站上的每个媒体都得到照顾：头像、缩略图、iframe、YouTube 视频、背景图片和常规图像，因此速度永远不会受到影响。
该插件是轻量级的 (2KB)，但功能非常强大：它将少量 Javascript 注入到您网站的标头中，并在整个网站范围内延迟图像，而无需使用任何 JavaScript 库（例如 jQuery）。
您还可以用预览缩略图替换 Youtube iframe，以进一步加快网站的加载时间。
最重要的是：它完全免费。
两个重要注意事项：
🗒️如果您已经在使用我们的WP Rocket 缓存插件，则无需安装 WP Rocket 的 Lazy Load，因为它是其中包含的功能。
🗒️ 如果您没有使用我们的 WP Rocket 缓存插件，那么我们的免费插件 – Lazy Load by WP Rocket – 将对您有所帮助。
2. A3 Lazy Load
a3 Lazy Load 是最著名的插件，专门用于延迟加载。该插件面向移动设备且用户友好：即使您经验较少或没有经验，您也可以轻松设置和自定义它。
您的照片将加载得更快，并快速切换进程以在视频和 iframe 上运行。
您还可以在加载图像时添加一些具有淡入和微调效果的动画。
有一个简单的开关功能允许您包含或排除图像。它也适用于您可以在仪表板中指定的视频 URL。
重要提示：A3 Lazy Load只能应用于使用 WordPress 核心功能添加的媒体。如果您的主题或插件开发人员通过自定义编写的函数添加图像或视频等对象，则 a3 延迟加载无法知道该自定义函数是什么，也无法将延迟加载脚本应用于对象。
3. Smush
Smush 是一款屡获殊荣的图像优化插件，活跃安装量超过 100 万次。它是由著名的WPMUDEV团队开发的。主要的两个功能是延迟加载图像和优化和压缩图像。
有了 Smush，您网站上的图片不会影响您的网站及其性能。
只需点击几下即可轻松激活 Smush 插件。激活后，您可以选择单独优化每个图像或批量执行优化过程（最多同时处理 50 个图像）。Smush 可以让您将延迟加载限制到某些输出位置和媒体，例如小部件、内容区域和缩略图。它与其他 WordPress 插件兼容，以便您可以保持网站优化并留住网站访问者。
4. Optimole
Optimole 是一款用于图片优化、高级裁剪和智能延迟加载的一体化插件。优化过程根据具体情况在云端进行处理。安装插件后，Optimole 会将所有图像 URL 替换为基于云的 URL。
您可以压缩或调整图片大小，甚至可以集成CDN，以便您可以快速发布图片。
延迟加载功能用于避免布局变化，因此网站访问者不会面临任何形式的中断。
5. Lazy Loader
如果您搜索没有任何附加功能的插件，请 考虑Lazy Loader。简而言之，该插件被誉为 WordPress 最完整、最简单的延迟加载插件。
该插件编译首屏下的图片、视频、音频内容，甚至 iframe。它还可以处理背景脚本、页面样式和图片。
高级用户会知道，通过一些代码，Lazy Loader 可以让您禁用或启用某些页面元素的延迟加载。如果您正在寻找延迟加载背景图像的解决方案以及修改图像加载阈值的选项，那么该插件非常适合您！
6. Lazy Load for Videos
如果您希望延迟加载视频，那么Lazy Load for Videos是您应该选择的插件。该插件可以替换任何嵌入可点击图像预览的 Vimeo 或 YouTube 视频。这将节省用户的时间并缩短页面加载时间，因为不会加载不必要的 JS。
该插件具有任何用户都会欣赏的额外福利：
- 您可以轻松地将网站的嵌入设置为在第一个视频结束后自动播放网站上的视频。
- 隐藏注释和 YouTube 控件，使其外观简洁。
- 更改播放按钮的样式。
- 视频结束后尽量减少与视频相关的建议。
7. Autoptimize
Autoptimize的活跃安装量超过 100 万，是最流行的延迟加载插件。
该插件非常先进，并且在图像上应用了延迟加载脚本。无论您使用哪个主题或插件，Autoptimize 都有助于聚合、缩小和缓存所有脚本和 CSS 样式。它还缩小了 HTML 代码本身，使您的页面变得轻量级。它还提供其他性能优化功能。
如上所述，您可以优化和延迟加载图像 – 支持 WebP 和 AVIF 格式。Autoptimize 插件及其支持是免费的。如果您想要一些性能优化服务，则必须付费。
发表回复