建站教程

建站教程

Products

当前位置:首页 > 建站教程 >

让您的 WordPress 网站更快的最佳延迟加载插件

GG网络技术分享 2025-03-18 16:05 0


拥有大量图片的网站可能需要很长时间才能加载。 对于每张图片,这都是另一个 HTTP 请求,当页面加载缓慢时,您的用户不得不在沮丧中等待更多时间。

那么解决方案是什么? 延迟加载。

继续阅读,或使用以下链接跳转:

  • WordPress 5.5 带来原生延迟加载
  • 是否需要插件?

    • 访问接口
    • 浏览器兼容性
    • 额外优化
  • 原生延迟加载有什么好处吗?
  • 最佳延迟加载插件
  • 更多关于延迟加载

延迟加载可以显着加快图像密集型网站的速度,并且无需任何时间即可在您的网站上启用。

简而言之,它强制图像仅在“首屏”时加载——换句话说,只有在用户浏览器中显示的图像才会加载。

因此,如果您的页面包含 10 个新鲜且免费的全屏 WordPress 主题,则只有帖子中的前几张图片会加载,而其他图片将在用户向下滚动页面时加载。

WordPress 5.5 带来原生延迟加载

延迟加载对于 WordPress 来说仍然是一个相对较新的功能。

它通过在图像上添加“lazy”属性并将值设置为“loading”来工作,然后浏览器在输出时对其进行处理。

如果您有一个忠诚的延迟加载插件,或者经历了根本不想启用延迟加载的阶段,您会很高兴听到您可以禁用它。

一些插件会自动执行此操作,但是,如果您需要手动执行此操作,只需转到您的 functions.php 文件并添加以下内容:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

这将禁用 WordPress 的延迟加载功能,这意味着您将能够使用您选择的插件而不会有冲突的风险。

这只是一行代码,但如果您不喜欢添加它,您可以下载这个简单的插件,它会为您完成。

是否需要插件?

既然 WordPress 提供了本机延迟加载,您可能想知道是否要使用插件。

请继续阅读,因为实际上有几个原因您可能想要坚持使用插件:

访问接口

一个好的延迟加载插件(例如 Smush)提供了一个界面,其中包含调整特定设置的选项,以及通过触摸按钮打开和关闭延迟加载的能力。

这些选项的范围可以从将延迟加载的图像类型到延迟加载适用的页面。 如果您想在没有插件的情况下更改此类设置,则必须深入研究代码并手动添加这些异常。

浏览器兼容性

另一个很大的好处是大多数插件可以在所有浏览器上运行。 Safari 是不支持加载属性的主要浏览器之一,因此如果您有一个包含大量图像的网站,您可能会看到来自不受支持的浏览器的用户弹跳。 这是您在使用插件时无需担心的事情。

额外优化

大多数插件提供的不仅仅是延迟加载。 将图像优化插件引入您的网站可能是您做出的最佳决定之一。

诸如 Smush 之类的插件可以帮助您获得 Google 与图片相关的 PageSpeed 建议,并提高您的网站速度 - 延迟加载只是开始!

原生延迟加载有什么好处吗?

从表面上看,插件似乎可以完成本机延迟加载可以做的所有事情,甚至更多。

虽然这在技术上是正确的,但主要区别在于大多数插件将涉及引入一个 JavaScript 库,您的站点将依赖该库。

原生延迟加载更简单直接,不需要太多额外的代码。

我们的图像优化插件 Smush 实际上提供了自己的原生延迟加载版本。

它的工作原理与 WordPress' 相同,但支持与 Smush 相同的所有图像格式。

原生延迟加载也许可以作为未来其他开发的基础,但至少就目前而言,插件适合大多数网站。

如果您确实更喜欢使用插件来解决延迟加载需求的想法,我们已经收集了一系列免费的延迟加载插件。

  • Smush 图像优化

    Smush 是最受欢迎的多合一图像优化插件是有原因的。 我们提供了使图像加载更快所需的一切。

    延迟加载在 Smush 的免费版本和 Smush Pro CDN 随附的涡轮增压 Smush Pro 上都可用,并且与本机延迟加载不同,它与所有浏览器兼容。

    为了使用 Smush 激活延迟加载,我们让这个过程变得超级简单。 所有你需要做的就是去 延迟加载 Smush 中的部分并按下 启用 按钮。 而已。

    激活延迟加载后,您可以进一步调整设置,但这不是必需的。 Smush 和 Smush Pro 的默认设置是您看到重大性能改进所需要的一切。

    对 Smush 图像优化感兴趣?

    详情下载
  • a3 延迟加载

    A3 Lazy load 是一个流行的插件,用于延迟加载您网站上的图像、iframe、视频和其他元素。

    它有很多设置,因此您可以自定义您希望如何加载网站上的资产。

    它还经过测试与 WooCommerce、高级自定义字段和各种 CDN 等流行插件 100% 兼容。

    对 a3 延迟加载感兴趣?

    详情下载
  • 疯狂的懒惰

    这是另一个可以正常工作的超精益延迟加载插件。 无需复杂的配置。

    根据主题或 jQuery 的使用,Crazy Lazy 可以选择使用 jQuery 插件 Unveil.js 的修改版本或原生 JavaScript 库lazyload.js。

    对疯狂的懒惰感兴趣?

    详情下载
  • 视频延迟加载

    并非所有延迟加载插件都适用于视频,这是一种耻辱,因为视频可以比图像增加更多的网页文件大小。

    视频延迟加载可以帮助您延迟加载 Vimeo 或 YouTube 上托管的视频。 它加载占位符图像,并且仅在访问者单击它时才加载完整的视频和视频播放器。

    如果您的网站有很多视频,并且您选择了一个不包含延迟加载视频的轻量级插件,这将是必不可少的。

    对视频的延迟加载感兴趣?

    详情下载

更多关于延迟加载

使用插件是向您的网站添加延迟加载的最简单方法,但它不是唯一的方法。 如果您想要更精简的解决方案,您也可以在您的网站上使用 JavaScript。

如果您想了解更多信息,请查看如何使用延迟加载在 WordPress 中延迟屏幕外图像,以全面了解延迟加载的工作原理以及如何在您的网站上重新创建该技术。

如果您想了解有关 WordPress 自己的延迟加载功能的更多信息,请查看公告。

开始延迟加载的最简单方法是使用 Smush free 或 Smush Pro。

Smush Pro 添加了其他功能,可以帮助您获得其他 Google PageSpeed Insights 机会。 它可以帮助你 以下一代格式提供图像 通过将图像转换为 WebP 文件和 适当大小的图像 通过使用 Smush Pro CDN 缩放图像。 Smush Pro 甚至与流行的 WP Retina 2x 插件兼容,因此您可以在不减慢 WordPress 速度的情况下延迟加载那些巨大的 Retina 图像。

免费试用 Smush Pro,看看它能给您的网站带来多大的改变。

标签:

标签: WordPress op

提交需求或反馈

Demand feedback