由 Awesome Motive 提供支持。
了解更多 海鹰博客。

如何在 WordPress 中懒散加载图片和视频?

撰稿人: 作者图像 科马尔-博特拉
作者图像 科马尔-博特拉
如何在 WordPress 中进行懒加载

有许多不同的方法可以在网站上实现懒加载。欢迎查看我们列出的支持慢加载的 WordPress 顶级插件列表。

WordPress 目录中有许多免费插件,可用于懒加载图片和视频。在考虑了几十个插件并测试了几个之后,我们发现有两个插件可以显著提高网站性能。如果你热衷于实施懒加载,请考虑以下选项。

使用 WP Rocket(高级版)

WP Rocket 是在网站上实现慢加载的最直接方法。 而且,启用过程不到一分钟。LazyLoad 是 WP Rocket 中作为懒图像加载版本的插件名称。

开启 LazyLoad 后,WP Rocket 会立即停止 WordPress 本机图片的懒加载,以防止出现任何可能的问题。

按照以下步骤启用 WP Rocket 的 LazyLoad 功能:-

  • 您可以通过导航至 WordPress 安装中的 "设置">"WP Rocket">"媒体面板 "来激活 LazyLoad。 
  • 点击屏幕上方 LazyLoad 区域下的 "启用图片"。
  • 选择后点击 "保存更改"。 
WP rocket 的懒加载设置

这就是必须完成的其他一切工作。因此,访问者会感到照片加载缓慢。

与 WordPress 提供的本机方法不同,LazyLoad 为附加 HTML 元素(如iframe和视频)提供了懒加载功能。此外,如果背景图片是内联应用于特定的 HTML 组件,它也会使用懒加载。

如果您希望使用 WordPress 本机的图片懒加载功能,可以在 WP Rocket 中停用 LazyLoad 选项。另一方面,并非所有浏览器都支持新的加载属性。此外,WordPress 的安装只专注于照片。因此,WP Rocket 的 LazyLoad 仍然是更好的选择,尤其是如果您的网站有许多图片、视频和嵌入内容。

激活 WP Rocket 本地懒加载时的注意事项

尽管 WP Rocket 并不自动兼容使用本地懒加载的 Chrome 浏览器,但您仍然可以选择通过辅助插件启用对 Chrome 浏览器本地懒加载的支持。同样,即使 WP Rocket 不自动兼容其他使用本地懒加载的浏览器,情况也是如此。

使用这个有用的插件,您可以确保以下事项:

  • 您的每张照片都将包含使用本地懒加载的基本 HTML 语法;与 Chrome 浏览器兼容的浏览器将自动使用本地懒加载;所有其他浏览器将自动使用 WP Rocket 的 LazyLoad。
  • 您可以选择继续使用我们强大的 LazyLoad 技术,或者切换到 Chrome 浏览器内置的懒加载功能。

一切都取决于您!首先,在您的地点对两种方法进行试验,然后选择最适合您的一种。

使用 a3 Lazy Load(免费)

如果您正在寻找一个免费选项,我们建议您使用 a3LazyLoad插件。您可以使用 a3 插件禁用特定图片和页面的懒加载功能。此外,它还允许在网站上延迟加载视频: 

此外,该插件还可以帮助懒加载外部图片和视频。WordPress 的核心功能不会执行此类操作。

您可以在 WordPress 仪表板上安装并激活该插件。现在,您可以自定义工具的设置。

第 2 步:调整插件图像设置

进入设置 > a3 Lazy Load 下一步。在 Lazy Load Activation 下,插件在安装后默认已激活。

现在,打开 LazyLoad 图像选项卡。你可以:(1) 选择要延迟加载的网站图片;(2) 为拒绝接受 JavaScript 的网络浏览器提供后备方案。对于不想延迟加载的图片,你可以 (3) 设置一个 CSS 类:

在 a3 lazy load 插件中配置懒加载哪些图像

默认设置启用了所有选项。我们强烈建议您保留这一设置。创建一个 CSS 类,以便跳过特定图片的延迟加载。

第 3 步:调整插件视频设置

懒加载视频和 iframe 标签是下一步。有了 a3 Lazy Load,你就可以像处理图片一样,为特定片段选择延迟加载。

该插件允许在(1)内容和小部件中使用视频,并为(2)不支持 JavaScript 的浏览器提供了回退功能:

配置懒加载视频设置

您可以在视频设置 (3) 中指定一个 CSS 类,将特定视频排除在延迟加载之外。如果您想要更直接的配置,请使用您在图像部分选择的相同类别。

更多 WordPress 的懒加载插件

除了 WP rocket 和 a3 Lazy Load 外,还有几款实用的懒加载插件可供您考虑:

  • 懒加载视频
  • BJ 懒惰加载
  • 为 WooCommerce 载入更多产品
  • WordPress 无限滚动 - Ajax 加载 更多内容
  • Disqus 条件加载
  • 评论懒加载

最终想法 

无论何时更新或修改网站,都必须注意任何潜在的冲突。如果发现允许懒加载已导致网站的任何方面无法运行,请查看与懒加载相关的常见问题列表。

由于懒加载功能不适用于 Revolution Slider 和 Envira Gallery 等插件上传的图片,因此可能会出现不兼容问题。兼容插件的完整列表可在此处找到。

这篇文章以及其他许多文章可在Seahawk Media Blog 上找到。

将设计原型转换为 WordPress 对实现静态设计至关重要。WordPress、

Picture this: Your WordPress website is a bustling storefront in a prime location. Suddenly, the

如果您想为您的企业创建一个时尚、专业的网站,那么您就需要

Komal Bothra July 25, 2024

How to Successfully Convert XD to HTML?

Converting Adobe XD to HTML is a crucial step for web developers aiming to bring

WordPress
Komal Bothra July 24, 2024

Discover Top Tips for Business Name: Your Ultimate Guide

Need help naming your business? You’re not alone. Choosing the perfect business name can feel

机构
Komal Bothra July 24, 2024

Learn How to Create AI Images for Your WordPress Website

Today, let’s talk about something that can take your WordPress site from “meh” to “wow”

WordPress

开始使用海鹰

在我们的应用程序中注册,查看我们的定价并获得折扣。