WordPress延迟加载图像:完整指南

WordPress延迟加载图像:完整指南

目录

为什么延迟加载很重要?

网页的巨大负载主要包括图像,脚本,样式表,字体和视频。但是,  图像占据了典型网页大小的60%以上。图像对于网页的设计也很关键,因此,您似乎无法摆脱它们。

未经任何优化,用户的Web浏览器将在完全呈现页面之前下载所有资源。这导致加载时间增加,这可能会将人们引走。 WooCommerce估计  ,每提高100毫秒的页面速度,电子商务网站就可以使收入增加1%。

在这种情况下,尽一切努力优化加载时间非常有意义。并且由于图像是网页大小的主要贡献者,因此从它们开始是一个好主意。这是延迟加载起作用的地方。

什么是延迟加载?

为了了解延迟加载的工作原理,这里有一个快速的动画GIF,演示了渲染图像。

延迟加载演示

页面加载时,不会立即下载所有图像。向下滚动到图像时,首先会看到图像的模糊版本,然后实际图像开始在背景中加载。该模糊图像是最终图像的低清晰度版本,其大小仅为其一小部分。这种延迟下载和渲染图像直到用户滚动图像的现象恰好称为延迟加载。

尽管“延迟”通常是负面的,但延迟加载实际上是一种好习惯,并且可以通过总体上优化网站来缩短页面加载时间。

注意。在这篇文章中,我们看了延迟加载图像的过程,但是延迟加载不仅仅限于图像-您在渲染任何其他资源(例如视频,评论)时可以使用相同的想法(关于如何执行此操作的整个章节在这篇文章中),甚至是字体。

使用WordPress插件

有几个选项可以让您延迟加载。最为显着地:

所有这些插件将自动为您处理延迟加载。每个还具有一些不错的辅助功能。

例如,WP Rocket的“延迟加载”也会延迟加载YouTube视频,并将其替换为缩略图。

除了是ThemeIsle系列的最新成员外,Optimole还为您提供坚如磐石的图像优化(如此处测试所示),并在这方面具有相当先进的功能。例如,它使您可以根据用户的屏幕大小动态调整大小。

与大多数插件一样,要延迟加载,只需安装插件并在插件的控制面板中启用该功能即可:

一个回复

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

联系我们