延迟加载图像:完整指南以及3种实现方法

延迟加载图像:完整指南以及3种实现方法

延迟加载图像:完整指南以及3种实现方法
СОДЕРЖАНИЕ
02 июня 2020

延迟加载图像:完整指南


随着网络上功能和交互性的增加,在过去几年中,网页大小一直在稳定增长。截至2018年初, 平均页面大小 在互联网上超过2 MB!如何战斗呢?一种叫做“延迟加载图像”的东西是更好的解决方案之一.

在本指南中,我们通过 延迟加载图像的所有复杂性, 并讨论三种不同的实施方式.

让我们从即将出现的目录开始:

  • 为什么延迟加载很重要?
  • 什么是延迟加载?
  • 延迟加载的好处
  • 延迟加载图像时应考虑的事项
  • 选项1:从头开始执行延迟加载 (适合初学者使用:⭐/ 5​​)
  • 选项2:使用JavaScript插件 (适合初学者:⭐⭐/ 5)
  • 选项3:使用WordPress插件 (适合初学者:⭐⭐⭐⭐⭐/ 5)
  • 结论

为什么延迟加载很重要?

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

如果不进行任何优化,则用户的网络浏览器会在完全呈现页面之前下载所有资源。这导致加载时间增加,这可能会使人流连忘返. WooCommerce估计 网页速度每提高100毫秒,电子商务网站就可以将收入提高1%.

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

什么是延迟加载?

要了解延迟加载是如何工作的,这里有一个快速的动画GIF,演示了如何在CodeinWP上渲染图像.

延迟加载图像演示CodeinWP上的延迟加载演示

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

虽然 "懒" 通常会带来负面影响,延迟加载实际上是一种好习惯,并且可以通过优化您的网站整体来缩短页面加载时间.

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

延迟加载的好处

由于网页的加载时间是导致放弃的主要原因,因此延迟加载图片会极大地增加停留在页面上直到加载的用户的数量,最终可能导致更高的销售量或转化次数.

延迟加载图像的另一个重要好处是降低了服务器费用。您仅提供查看者滚动浏览的那些图像,并为未查看的页面部分节省带宽。由于图像是页面权重的主要部分,因此可能导致服务器成本降低.

预先加载所有图像对您的读者也可能有害。如果用户使用的网络数据计划不受限制,则可能没有关系。但是,在数据有限的计划中,您是通过延迟加载图片来保存查看者的数据的.

延迟加载图像时应考虑的事项

既然您已经决定以正确的方式在您的网站上实现延迟加载,那么让我们回顾一下如何完成它的一些关键注意事项.

确定您要延迟加载的图像

并非所有图像都适合延迟加载。例如,您不希望延迟加载那些与设计结构不可分割的部件,而必须加载它们才能正确呈现所有内容.

延迟加载仅应考虑屏幕外的图像,这些图像不会对页面的结构产生影响。通常,这些是  出现在页面正文中的元素.

选择您的图片占位符

接下来要考虑的是一旦观看者在其上滚动时加载图像时应显示的中间图像或颜色。图像加载时间取决于图像的大小,甚至可能需要花费几秒钟的时间。因此,您必须考虑在加载期间要使用的内容.

开发人员通常会在这方面采取两个方向:

  • 使用图像的主色调作为背景
  • 使用较低质量的图像

低分辨率占位符低质量版本的图像作为延迟加载的占位符的示例

此处的正确选择取决于站点的设计以及在等待图像加载时希望向用户显示的内容.

尽管一种技术是在图像进入视口后立即加载图像,但是您可能要考虑在发生缓冲之前添加缓冲时间,以使用户永远看不到占位符.

加载图像时要注意更改页面结构

在加载图片之前,可能会使用0 px尺寸显示该图片。这对于维持您的设计结构不是理想的.

这可以轻松更改页面的布局和文本的位置。一个简单的解决方案是立即为图像添加正确的尺寸-这样可以确保图像元素的大小在加载后保持不变.

出于上述考虑,让我们来看一下如何在WordPress网站上实际实现延迟加载.

选项1:从头开始执行延迟加载

让我们首先看看如何不使用任何插件来做到这一点。对于那些熟悉JavaScript的人,建议使用此选项。理想情况下,需要采取以下步骤:

  1. 防止在页面加载过程中加载图片:当您在页面的src属性中指定图片的网址或路径时  标签,图片将在页面加载期间由浏览器下载。为了防止浏览器下载图片,您需要在图片的data-src属性中指定图片的位置  改为标记.
  2. 在JavaScript中注册事件处理函数,以检查两个事件的元素:加载和滚动.
  3. 当元素进入查看端口时,将data-src元素的值加载到src元素中,这将触发浏览器加载图像.

该过程的简单实现已由 罗宾·奥斯本 并且演示可用 在CodePen上.

选项1.1:使用相交观察器API

相交观察器API 帮助识别在任何给定时间点在视口中的DOM元素。这是一种无需编写事件处理程序函数即可实现延迟加载的更干净的方法。实现延迟加载的代码行数也大大减少。但是,浏览器兼容性仍然是一个问题.

Google Developers Blog 通过以下解释交集观察器API的实现 此CodePen演示.

选项2:使用JavaScript插件

上面讨论的两个选项需要JavaScript的中级知识。如果您希望在不使用繁重插件的情况下轻松实现延迟加载而无需使用繁重的插件来将负载加载到服务器中,则可以尝试使用普通的JavaScript插件, .

的 bLazy库 小于2 KB的大小不会对有效负载造成任何额外负载,同时使您可以轻松处理延迟加载图像.

要使用bLazy库,您需要初始化  具有以下属性的元素:

  • class:设置所有班级  标签到b-lazy
  • src:链接到占位符图像
  • data-src:链接到要加载的图像
  • data-src-small:链接到图像以在小于420像素宽的屏幕上加载

您只需要用几行代码即可初始化bLazy库,所有图像将通过延迟加载来呈现.

;(function(){
//初始化
var bLazy = new Blazy();
})();

提供了CodePen演示 这里.

选项3:使用WordPress插件

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

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

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

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


图像优化和Optimole的延迟加载 图像优化 & Optimole的延迟加载

作者: 擎天柱

当前版本:2.3.1

上次更新时间:2020年4月21日

optimole-wp.zip


96%的评分


50,000+安装


WP 4.7+要求

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

延迟加载图像的Optimole

结论

这篇文章探讨了延迟加载图像的需求和好处。我们还讨论了在WordPress网站上实现延迟加载的三种不同方式:

  • 如果您精通JavaScript,则可以从头开始执行延迟加载
  • 如果您知道一些编程知识但不希望使用任何插件(轻量级JavaScript库),则可以选择bLazy
  • 如果您希望通过一键式解决方案在网站上延迟加载图像,则应该选择Optimole这样的插件。

您如何看待延迟加载?您是否尝试过使用它来改善网站的性能?

别忘了加入我们的速成班,以加快WordPress网站的速度。通过一些简单的修复,您甚至可以减少50-80%的加载时间:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector