什么是延迟加载以及它如何改善用户体验？

如果大多数网站所有者忽略了网站的一个方面，那就是页面加载时间。 您花费大量时间和金钱来为我们的网站设计完美的设计，并添加不同类型的内容以保持访问者的参与度。 但如果这还不足以将访问者转化为用户怎么办？

研究表明，网站加载时间每增加一秒，将访问者转化为客户的机会就会减少。 根据Portent 的说法，加载一秒的转化几率为 40%，下一秒则降至 34%，三秒则降至 29%。 您可能想知道，“那么解决方案是什么？”

这就是延迟加载概念的用武之地。这是一种更快的加载网站的方式，而且不会牺牲内容的质量。

在本文中，我们将探讨延迟加载、为什么使用它以及它如何与其他方法相比较。 让我们开始吧！

目录

• 什么是延迟加载？
• 延迟加载的重要性
• 急切加载与延迟加载
• 延迟加载的工作原理
• 实施延迟加载

什么是延迟加载？

延迟加载是一种节省时间的方法，仅加载您立即需要的网站部分。 此方法不是一次加载所有内容，这可能会很慢并且使用大量资源，而是一点一点地加载内容

不立即加载的图像或视频通常具有占位符元素，直到需要它们为止。 例如，延迟加载不会一次加载所有图像。 它仅加载您可以在屏幕上看到的内容。 除非您向下滚动，否则其余部分不会加载

您无需等待所有内容加载完毕，而是可以立即查看屏幕上已有的内容。

专家提示：检查延迟加载在各种浏览器和设备上的工作情况。这是为了确保不存在任何兼容性问题。

延迟加载的重要性

我们已经知道延迟加载可以帮助您提高转化率。 但这并不是它的唯一好处。 以下是您应该在网站上实施延迟加载的一些其他原因。

优化性能

当有人访问您的网站时，延迟加载会减少数据传输。 对于使用网速较慢和数据流量较小的移动设备的人来说，这一点至关重要。

减少带宽和服务器负载

延迟加载可以节省数据并减少服务器工作。 这可以通过在不需要时停止加载内容来降低网站所有者和用户的成本。

改善搜索引擎优化

像谷歌这样的搜索引擎非常重视快速加载的网站，以至于它成为了官方排名因素。 使用延迟加载技术，您可以提高页面加载速度，降低跳出率，并使您的网站获得更高的排名。

什么是预加载？

预加载与延迟加载完全相反。 它最初会立即加载所有必需的资源，包括媒体文件、脚本和样式。 这意味着所有必要的页面元素都可以立即使用。 因此，当用户滚动或交互时，不会产生额外的加载。

预加载是过去使用的常规方法，至今许多网站仍在使用它。

尽管它很容易实现，但由于多种因素，急切加载已经变得不那么重要了，包括：

增加网页大小

现代网站使用更多的富媒体和交互部分。 这意味着平均网页比以前大得多。 因此，急切加载可能会导致初始页面加载时间更长。 特别是对于互联网连接速度较慢的用户。

对性能的负面影响

较长的页面加载时间可能会损害重要的网站性能指标，例如首次内容绘制 (FCP)和最大内容绘制 (LCP)。 这些是 SEO 和用户体验的关键。

移动用户的崛起

随着移动浏览的大量使用，从一开始就以超快的速度加载内容变得至关重要。

急切加载与延迟加载

以下是急切加载和延迟加载的快速比较：

延迟加载和预先加载是两种不同的资源加载方法，各有优缺点。 然而，从当今的技术角度来看，延迟加载因其效率、性能优势和更好的用户体验而被认为是大多数现代网站的首选技术。

延迟加载的工作原理

现在您已经知道为什么延迟加载可以确保两者之间获得更好的结果，让我们看看它是如何实现这一点的。

用户导航和交互：延迟加载取决于用户如何使用网页。它通常在用户滚动或移动鼠标时启动。 当他们滚动时，浏览器会猜测他们可以看到的区域需要新内容。 然后它开始加载这些资源。 延迟加载还可以从其他操作开始，例如单击按钮或将鼠标悬停在项目上。

图像的技术实现：延迟加载对于不同类型的内容有不同的工作方式。对于非常常见的图像，您通常首先显示低质量的占位符或简单的加载图标。 当用户滚动到真实图像附近时，就会加载清晰、高质量的图像。 这样，用户就不必等待他们还看不到的图像。

应用不同的网络资源：延迟加载是一种灵活的方法，可以用于各种元素，而不仅仅是图像。它同样适用于视频、iframe，甚至需要大量脚本的元素。 仅在需要时加载这些元素意味着您可以大大提高页面的加载速度并有效地管理您的资源。 这对于高清视频等重资源尤其重要。

实施延迟加载

在这一部分中，我们将向您展示在网站上实施延迟加载的不同方法。

方法一——手动实现延迟加载

实现延迟加载的手动方式并不适合所有人。 它很复杂，您至少应该具有中级编码知识。

为此，您将主要使用 HTML 和 JavaScript。 在开始之前，请确保您有权访问 WordPress 网站的主题文件，并且有信心编辑 HTML 和 JavaScript。

以下是帮助您完成整个过程的详细指南：

第 1 步：备份您的网站

在对主题文件进行任何更改之前，请务必备份您的 WordPress 网站，以避免在出错时丢失数据。

第2步：编辑主题的functions.php文件

• 访问您的 WordPress 站点的文件（使用主机控制面板中的 FTP 客户端或文件管理器）。
• 导航到/wp-content/themes/your-theme/并找到functions.php文件。
• 打开functions.php进行编辑。

步骤 3 ：添加延迟加载脚本

在functions.php中，添加一个函数来将JavaScript文件排入队列以进行延迟加载。 这是一个基本示例：

函数 add_lazy_loading_script() {

wp_enqueue_script('lazy-load', get_template_directory_uri() . '/js/lazy-load.js', array('jquery'), null, true);

}

add_action('wp_enqueue_scripts', 'add_lazy_loading_script');

此代码假设您的主题目录中的js文件夹中有一个名为lazy-load.js的 JavaScript 文件。

第 4 步：创建 JavaScript 文件

• 在主题目录的js文件夹中创建一个名为lazy-load.js的新文件。
• 添加 JavaScript 来处理延迟加载。 这是使用IntersectionObserver 的基本示例：

document.addEventListener(“DOMContentLoaded”, function() {

让lazyImages = [].slice.call(document.querySelectorAll(“img.lazy”));

if (窗口中的“IntersectionObserver”) {

让lazyImageObserver = new IntersectionObserver（函数（条目，观察者）{

条目.forEach（函数（条目）{

if (entry.isIntersecting) {

让lazyImage = Entry.target;

懒惰图像.src = 懒惰图像.数据集.src;

lazyImage.classList.remove(“lazy”);

lazyImageObserver.unobserve(lazyImage);

}

});

});

lazyImages.forEach(函数(lazyImage) {

观察（lazyImage）；

});

}

});

第 5 步：在 WordPress 中更新图像标签

修改图像标签以支持延迟加载。 在 PHP 模板中或直接在帖子/页面中，更改图像标签，如下所示：

<img class=”lazy” src=”placeholder-image.jpg” data-src=”original-image.jpg” alt=”图像描述”>

将placeholder-image.jpg替换为低分辨率图像或加载图形，将original-image.jpg替换为实际图像 URL。

专家提示：对延迟加载的图像使用响应式占位符，以确保布局保持稳定。

第 6 步：测试您的更改

• 如果您安装了缓存插件，请确保清除站点的缓存。
• 然后，转到您的网站并向下滚动到图像应该延迟加载的部分。
• 花点时间看看滚动时图像是否加载顺利。

笔记

• 确保始终先在开发环境中进行测试，然后再在实际网站上进行测试。
• 执行此操作时请考虑创建一个子主题。 对主题的更新可能会覆盖您的更改。
• 对于视频或 iframe 等其他内容类型，可以使用类似的方法，其中src属性替换为data-src属性，并在视口中通过 JavaScript 加载。

该技术是合并延迟加载的简单方法。 如果您有更复杂的网站或特定要求，您可能想探索更强大的解决方案或插件。

方法2 – 使用WordPress插件实现延迟加载

这是两种方法中最简单的一种，因为您可以使用 WordPress 插件来安全地启用延迟加载。 多个插件允许您执行此操作，但我们将在本示例中使用WP-Optimize 。 WP-Optimize 是一款功能强大的 WordPress 插件，可帮助您提高网站速度并改善用户体验。

它提供了一种简单易用的方法来将图像、iframe 和视频设置为延迟加载。 其内置的延迟加载功能会自动延迟 Web 资源加载，直到它们可见，从而显着加快页面加载时间。 然而，这是 WP-Optimize 的一项高级功能。

要启用该功能：

• 从 WordPress 管理仪表板打开WP-Optimize > 图像选项卡
• 打开延迟加载图像子选项卡
• 从这里，您可以为图像和视频/Iframe 启用延迟加载

如果您需要禁用某些图像、背景图像、视频或 iframe 的延迟加载，只需从此处启用它即可。 您还可以选择跳过某些图像类别。

之前和之后

我们测试了示例网站在实施延迟加载之前和之后的速度。 据 GTMetrix 称，该网站的速度已经相当快，首次内容绘制 (FCP)加载时间为1.5 秒。

启用延迟加载后，FCP 变为 344 毫秒，这比我们之前的速度快得多。 结果可能会有所不同，具体取决于页面上的内容量，但在大多数情况下，您的 FCP 分数将会提高。

准备好加快页面加载时间了吗？

所以，就是这样！ 我们讨论了什么是延迟加载，以及延迟加载对于现代网站的重要作用。 通过等待加载内容直到您需要它们，它可以使页面加载速度更快，节省互联网数据，并使浏览更流畅，尤其是在数据有限的手机上。

我们还提供了一些关于如何在 WordPress 中使用延迟加载的有用建议。 我们涵盖了从使用代码自行完成到使用 WP-Optimize 等插件的所有内容。

尝试向您的网站添加延迟加载，并告诉我们它如何影响您的性能。 有疑问吗？ 欢迎在评论中提问。

经常问的问题

延迟加载是好是坏？

延迟加载通常被认为是一种很好的做法，因为它有几个好处。 它仅在需要时加载内容，有助于缩短网页加载时间并增强用户体验。

UI 中的延迟加载是什么？

UI 中的延迟加载是指仅当图像和视频等视觉元素位于（或靠近）用户视口时才加载它们的做法。

延迟加载会影响SEO吗？

如果正确实施，延迟加载可以通过缩短页面加载时间和增强用户体验来对 SEO 产生积极影响，这两者都是重要的排名因素。

你应该延迟加载所有图像吗？

虽然延迟加载屏幕外的图像是有益的，但对于页面加载时立即可见的图像则没有必要。 立即加载这些图像可以防止其显示出现任何延迟。

延迟加载有哪些问题？

延迟加载的一些问题包括用户滚动时的内容加载延迟、如果未正确实现搜索引擎索引的潜在问题，以及对 JavaScript 的依赖（可能并非所有浏览器都支持 JavaScript）。