如何在 WordPress 中延迟加载（图片和视频）

已发表: 2023-05-25

如果您是网站所有者，您过去可能至少考虑过一次网站速度。 毕竟，谷歌在确定将网站放置在搜索结果中的位置时会考虑速度。 因此，如果您的网站加载速度缓慢，那么您在排名方面就会处于劣势。 我们都知道，更高的排名会带来更多的流量。

那么，您如何确保您的 WordPress 网站加载速度尽可能快？ 一种方法是延迟加载图像。

延迟加载是一种延迟图像和视频渲染直到需要它们的技术。 实现这一点可以大大加快您的网站速度，好消息是您无需成为开发人员即可将其投入使用。

今天，我们将向您展示如何使用两种方法在 WordPress 中延迟加载图像和视频：使用插件和不使用插件。

什么是延迟加载？

延迟加载是一种用于提高页面速度的常用技术。 这个想法很简单：不是在访问者第一次到达时加载页面上的所有图像，而是只渲染可见的图像。 然后，当访问者向下滚动页面时，会根据需要加载更多图像。

这意味着如果访问者从不向下滚动到页面底部，则永远不会加载查看页面区域下方的图像。 因此，延迟加载可以节省宝贵的几毫秒（甚至几秒）页面加载时间。

此外，延迟加载还可以帮助您节省带宽。 如果有人在移动设备上访问您的网站，这一点尤其重要。 通过延迟加载不可见的图像和视频，您可以减少使用的数据量。

延迟加载是如何工作的？

通常，延迟加载以两种方式之一工作。 WordPress 从 5.5 版开始，添加了一个名为“loading”的 HTML5 属性。 在这种情况下，浏览器会处理延迟加载过程的所有部分，而不需要任何额外的 JavaScript。

另一种在 HTML5 属性之前开发的方法是通过一些有创意的 JavaScript。 在这种情况下，页面加载时会提供一个空占位符，然后在图像进入视口时使用 JavaScript 加载图像。

无论哪种方式，都只会加载浏览器需要的图像。 一旦访问者向下滚动页面，就会加载其他图像。

有几种不同的方法可以做到这一点，我们将在下面详细讨论。 但这就是延迟加载工作原理的要点。

延迟加载有什么好处？

延迟加载图像有三个主要好处：

  • 提高网站速度
  • 减少带宽使用
  • 更好的用户体验

提高站点速度通常是实施延迟加载的主要动机。 通过等待呈现不必要的图像，您可以减少页面加载时间。 如果页面上有很多图像，或者图像很大，则尤其如此。

接下来，延迟加载可以帮助您节省带宽。 如果访问者从不冒险向下浏览页面，就不会浪费带宽来加载他们永远看不到的图像。

最后，延迟加载可以改善您的用户体验。 这是因为访问者不必等待页面上的所有图像加载完毕就可以开始与您的网站互动。

默认情况下 WordPress 会延迟加载吗？

是的，从 WordPress 5.5 开始，延迟加载在安装时默认自动启用。 但是，有一些方法可以非常简单直观地自定义体验。 我们将在下面更详细地讨论这些方法。

我应该延迟加载我的图像吗？ 有缺点吗？

在大多数情况下，如果您想提高页面速度或节省带宽，延迟加载图像是一个好主意。 但是，也有一些潜在的缺点需要考虑。

布局转移

如果您延迟加载图像，您的页面布局可能会发生变化。 例如，如果您的页面右侧有一个侧边栏，并且您延迟加载位于其中的图像，则侧边栏可能会向下移动以腾出空间。 这可能会让您的访客迷失方向。

作为一般规则，建议使用占位符来避免此问题。

对 SEO 的潜在打击

如果操作不当，延迟加载图像可能会导致搜索引擎（例如 Google）无法将它们编入索引。 在排名方面，内容为王，在这种情况下，您可能会失去有价值的部分。

您的图片可能不再出现在搜索结果中，并且根据图片相对于页面其余内容的重要性（例如电子商务列表的产品图片），它也可能会降低您的常规搜索排名。

也就是说，如果您正确设置延迟加载，这将不是问题。 这就是为什么，除非您是一个自信的开发人员，否则最好的做法是使用延迟加载插件或坚持使用 WordPress 附带的默认延迟加载。

插件冲突

此外，延迟加载可能会导致某些 WordPress 插件出现问题——例如使用图像生成社交媒体预览的插件。

每当您对站点进行更改时，都应该对其进行彻底测试，以确保一切正常。

而且，万一出现问题，请准备好您的 WordPress 网站的备份以便快速恢复。

如何在 WordPress 中启用延迟加载

WordPress 现在默认启用延迟加载。 如果您没有使用现代 WordPress 迭代（尽管我们建议您这样做），或者如果您想要对延迟加载过程进行更精细的控制，您可以使用两种不同的方法之一：使用插件或向您的网站添加代码地点。

1.使用插件延迟加载

如果您不是经验丰富的开发人员，我们建议您使用插件，因为任何时候您编辑网站代码时，都可能会遇到问题。 即使你手头有备份以防万一你破坏了某些东西，最好还是简单地使用一个有信誉的插件。

Jetpack Boost 主页

Jetpack Boost 是一款免费插件，专门用于帮助您衡量和改进站点性能。 它提供如下功能：

  • 推迟非必要的 JavaScript
  • 优化 CSS 加载
  • 延迟图像加载
  • 网站性能测试

要开始使用 Jetpack Boost，请从 WordPress 插件目录免费下载。

或者，在您的 WordPress 仪表板中，转到插件 → 添加新插件，然后搜索“Jetpack Boost”并单击立即安装。 安装后，单击激活。

插件存储库中的 Jetpack Boost

接下来，转到名为Boost的新仪表板菜单选项。 然后，单击免费开始。

在下一页上，向下滚动到显示延迟图像加载的大开关并将其打开。 现在，查看您的网站并确保一切都正确呈现并且看起来不错。 就是这样！ 只需单击几下即可进行延迟加载。

如果您想更进一步并自定义您网站的延迟加载，您可以使用代码片段来实现，您可以将其添加到您的functions.php文件中。 或者，您可以使用功能插件插入它们。

以下是您可以完成的几项任务：

  1. 在某些页面上禁用延迟加载
  2. 设置一个占位符，该占位符在加载图像之前显示
  3. 关闭特定图像的延迟加载
  4. 关闭特定 CSS 类的延迟加载

例如，如果你想从延迟加载过程中排除一个 CSS 类，你可以使用以下代码：

 function mysite_customize_lazy_images( $blocked_classes ) {    $blocked_classes[] = 'my-header-image-classname';    return $blocked_classes; } add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

有关更多详细信息，请查看完整的延迟加载文档。

2. 如何在没有插件的情况下在 WordPress 中延迟加载图像

正如我们之前提到的，默认情况下，WordPress 会为所有已设置尺寸的图像启用延迟加载。 您不需要打开任何东西或添加任何代码来执行此操作。 但是，有时您可能想要自定义此功能的工作方式。

例如，假设您不想包含模板图像。 您可以将此代码添加到您的functions.php文件中：

 function disable_template_image_lazy_loading( $default, $tag_name, $context ) { if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) { return false; } return $default; } add_filter( 'wp_lazy_loading_enabled', 'disable_template_image_lazy_loading', 10, 3 );

或者，也许您想获得超细粒度并关闭特定图像的延迟加载。 您可以通过在添加到页面或帖子时为每个图像分配一个额外的图像类，然后将该类添加到您的functions.php文件中的以下代码来实现：

 function skip_loading_lazy_image_48_large( $value, $image, $context ) { if ( 'the_content' === $context ) { $image_url = wp_get_attachment_image_url( 48, 'medium' ); if ( false !== strpos( $image, ' src="' . $image_url . '"' )) { return false; } } return $value; } add_filter( 'wp_img_tag_add_loading_attr', 'skip_loading_lazy_image_48_large', 10, 3 );

将上例中的图像类skip-lazy添加到图像中：

  1. 将图像添加到页面或通过媒体库发布。
  2. 添加图像后，找到图像设置。 这可能会有所不同，具体取决于您使用的是 Gutenberg Blocks 编辑器、经典编辑器还是网站构建器插件。 添加新 CSS 类的功能通常位于高级设置区域（古腾堡和经典编辑器）或图像设置选项的底部（大多数其他网站构建器）。
  3. 将类skip-lazy添加到图像并保存更新。

您可以在 WordPress 文档中了解有关可能性的更多信息。

如何在 WordPress 中延迟加载视频

如果您想延迟加载视频，可以通过在帖子或页面中向视频本身添加代码来实现。 此代码应如下所示：

 <video controls preload="none" poster="one-does-not-simply-placeholder.jpg"> <source src="one-does-not-simply.webm" type="video/webm"> <source src="one-does-not-simply.mp4" type="video/mp4"> </video>

有关 WordPress 延迟加载的常见问题

想了解更多关于 WordPress 延迟加载的信息吗？ 我们在下面回答了一些常见问题：

延迟加载和延迟屏幕外图像是一回事吗？

推迟屏幕外图像意味着等待加载图像，直到其他关键的首屏内容加载完毕。 有几种方法可以做到这一点，但 WordPress 网站通常使用延迟加载。

本质上，延迟加载是一种延迟屏幕外图像的方法。

我可以在 WordPress 中延迟加载背景图片吗？

是的，您可以根据需要延迟加载背景图片。 Jetpack Boost 为背景图像启用延迟加载。 但是，根据您的图像设置方式，它可能无法识别所有图像。 例如，如果图像是通过 background:url 属性加载的，插件不会将其作为图片读取，因此不会为其启用延迟加载。

在这种情况下，您可以使用像 Lazy Loader 这样的工具，它允许您选择要延迟加载的特定背景图像。

我可以延迟加载 YouTube 视频吗？

是的你可以！ 为此，请将 WPOrbit 中的以下代码片段插入主题的functions.php文件中。 如果您不确定如何操作，请查看我们的访问和编辑functions.php文件的指南。

 <?php // Do not include the above opening tag. // WPOrbit code for lazy loading youtube videos. Visit: https://wporbit.net function iframelazy($content) { if(is_single()) { $content = str_replace('src="https://www.youtube.com/embed/','class="klazyiframe" data-src="https://www.youtube.com/embed/',$content); ob_start(); ?> <script> var ytflag = 0; var myListener = function () { document.removeEventListener('mousemove', myListener, false); lazyloadmyframes(); }; document.addEventListener('mousemove', myListener, false); window.addEventListener('scroll', function() { if(ytflag == 0){ lazyloadmyframes(); ytflag = 1; } }); function lazyloadmyframes(){ var ytv = document.getElementsByClassName("klazyiframe"); for (var i = 0; i < ytv.length; i++) { ytv[i].src = ytv[i].getAttribute('data-src'); } } </script> <?php $jqueryappend = ob_get_contents(); ob_end_clean(); } return $content.$jqueryappend; } add_filter('the_content', 'iframelazy');

延迟加载会影响 SEO 吗？

是的，延迟加载可以对您的搜索引擎排名产生积极影响。 谷歌在决定页面在搜索结果中的排名时会考虑网站速度。 由于延迟加载可以提高性能，它还可以增加 Google 对您网站的看法。

如果您手动执行，而不是使用延迟加载插件，并且犯了一个错误，它会阻碍搜索引擎识别您的图像的能力，从而对 SEO 产生负面影响。

延迟加载会影响用户体验吗？

是的，延迟加载可以改善您的用户体验，因为它减少了您网站的加载时间，同时仍确保访问者可以立即查看您的内容。 反过来，这可以提高他们对您品牌的认知。

我需要一个插件来延迟加载我的内容吗？

不，您不需要插件来延迟加载您的内容。 WordPress 默认启用延迟加载。 但是，如果你想更好地控制延迟加载过程，你可能需要使用插件。 这是 WordPress 最好的延迟加载插件的选择。

延迟加载内容有缺点吗？

延迟加载内容没有太多缺点。 它可以提高您的速度、用户体验和搜索引擎排名。 但是，它偶尔会导致页面布局发生奇怪的变化。 因此，您应该始终在启用延迟加载后测试您的网站。

我需要延迟加载所有内容吗？

不，您不需要延迟加载所有内容。 您可以选择仅延迟加载特定元素，例如图像、视频或 iFrame。

我还能做些什么来提高加载速度？

除了延迟加载之外，还有许多其他方法可以提高 WordPress 网站的速度，包括：

  • 使用内容分发网络 (CDN)
  • 专注于改进同样可以改进 Core Web Vitals 的东西。
  • 优化图像
  • 启用浏览器缓存
  • 缩小资源

使用 WordPress 延迟加载加速您的网站

延迟加载图像是优化网站性能和改善整体用户体验的好方法。 Jetpack Boost 提供了最方便、最强大的方式来启用延迟加载，同时还提供了其他强大的速度工具。 准备好开始了吗？ 获取 Jetpack Boost！