懒惰通常不是高绩效者的特征。然而，在网站方面，有一种特殊类型的“懒惰”可以神奇地转化为更好的加载速度和更好的用户体验。这得益于一种叫做延迟加载的网站速度优化技术。查看长风Drupal开发团队的这篇文章，我们将探讨优化媒体（如图像）的重要性，图像延迟加载的工作原理，以及哪些工具可以帮助您在Drupal网站上实现它。

一、视觉吸引力与速度：为什么要优化网站上的图像？

无法想象一个没有视觉体验的网站，如产品图片、促销横幅、徽标等。视觉体验的作用是巨大的，因为传递到大脑的信息90%是视觉的。图片可以吸引用户的注意力，激发他们的情绪，保留他们的长期记忆，并帮助您传达网站的信息。
另一面是网站图片通常体积越来越大。图片加载所需的时间很长，这是网站速度慢且笨重的主要原因之一。所以你是否必须牺牲出色的视觉效果或网站速度？
幸运的是，如果你依靠图像优化技术，它们可以和谐共存。通过提高网站的速度，这些技术为您带来了其他好处：
你的网站可用性提高了。毫无疑问，浏览快速加载的网站是一种愉快的体验，用户可以更快地实现他们的目标。
你的跳出率降低。根据百度的数据，如果移动网站加载时间超过3秒，53%的访问被放弃。如果你的网站加载速度很快，你的访问者会一直陪着你。
您的SEO有所改善。加载速度是桌面和移动搜索的一个排名因素，百度已经正式宣布了这一点。
您的转化率会增长。网站加载速度越快，客户转换的可能性就越大。根据Portant的一项研究，每增加一秒加载时间，转换率平均下降4.42%。

二、懒加载图像：秘诀是什么？

延迟加载图像是一种仅当图像出现在用户视口中时才加载图像的技术。如果用户还没有通过向下滚动页面到达某些图像，则无需加载它们。只有当用户继续滚动并到达其他图像时，才会加载这些图像。这种方法与从一开始就加载所有图像时的“急切加载”相反。延迟加载不限于图像-它可以与网页的其他资源一起使用，包括视频。
我们可以在这里使用术语“褶皱上方”和“褶皱下方”。这一术语源自报纸出版——报纸水平对折，读者在决定展开报纸之前，会立即看到折叠上方的内容。类似地，网页的折叠内容上方是用户立即可见的内容，而折叠内容下方需要滚动。网页中“折叠上方”的部分图像需要立即加载，而当前“折叠下方”的图像可以使用延迟加载。
通过适当的实现，延迟加载图像可以加快初始页面加载，同时降低带宽消耗。减少要加载的图像数量意味着减少资源请求和用户设备必须下载和处理的总字节数。因此，用户可以更快地看到网页。

三、在Drupal网站上缓慢加载图像

首先，值得一提的是，Drupal正在采用开箱即用的自动延迟加载图像。然而，该功能仅在Drupal 9.1内核中可用，尚未100%完成。我们知道很多网站还没有使用Drupal 9，所以我们肯定需要讨论其他选项。
在博客文章的下一部分，我们将回顾：
Drupal 9内核中新的延迟加载功能
贡献的Drupal模块将适用于较新和较旧的网站，并提供不同的延迟加载方法
1） Drupal内核如何延迟加载图像（自9.1版起）
从Drupal 9.1核心版本开始，默认情况下为所有图像启用本机延迟加载。该功能自动将loading=“lazy”属性添加到＜img＞标记中。本机方法不需要使用第三方JavaScript库或添加自定义代码。
Drupal核心贡献者之一Mike Herchel在他的博客文章中讨论了新功能的缺陷和修复方法。他提到的关键问题是，系统无法区分折叠上方和折叠下方的图像，因此它延迟加载所有内容。该解决方案以新的用户界面的形式出现在Drupal 9.4内核中，它使开发人员能够更好地控制何时何地按字段延迟加载图像。开发人员现在可以选择延迟加载或不加载特定的图像字段或媒体字段。这可以通过实体类型的“管理显示”选项卡上的字段格式设置中的新“图像加载”元素实现。开发人员可以为每个字段设置“懒惰”或“急切”加载。
这使他们能够为实体创建视图模式，或编辑现有的视图模式，并知道这些视图模式中的图像需要在折叠上方或下方渲染（例如，英雄图像）。
也可以在Drupal视图字段中配置延迟加载。对于更精细的控制，开发人员可以在预处理图像字段时设置加载属性，或者在image.html.twig模板中修改它。Mike Herchel提到Drupal内核中的延迟加载功能还没有达到100%——例如，它不支持响应图像。
2） Drupal模块如何延迟加载图像
惰性负载
懒加载是实现该技术的最流行的Drupal模块。开发人员可以依靠它来实现图像和iframe的延迟加载。该模块使用了一个名为lazysizes的第三方库，这是一个高性能和SEO友好的加载器。Lazysizes能够检测通过用户交互、CSS或JavaScript触发的可见性更改。然而，该模块还支持通过Chrome浏览器的相应属性进行本地延迟加载。
可以通过三种方式启用延迟加载——通过文本格式、视图模式的字段格式器或FormAPI。例如，Drupal管理面板上的文本格式设置页面现在有一个“Lazy load images and iframes”过滤器。您可以启用此筛选器，然后选择应该使用该技术的元素。可用的元素是image（＜img＞标记）和iframe（＜iframe＞标记）。在进行这些设置后，无需修改现有内容-它将自动延迟加载。
OEmbed Lazyload公司
使用OEmbed格式嵌入第三方视频、照片或其他丰富内容可能会导致页面权重的不必要增加。OEmbed有可能加载第三方媒体，即使用户无意打开它们。幸运的是，我们有OEmbed Lazyload模块来解决这个问题。它对于Drupal核心的媒体系统支持大量OEmbed内容的网站尤其有用。
该模块延迟加载OEmbed资产，直到用户单击“播放”查看它们或进入视口。这种效果是通过延迟iframe的加载来实现的，Drupal出于安全原因在iframe中包装了所有OEmbed资产。有一个“Lazy load o Embed video”字段格式化程序，您可以在媒体类型的“Manage display”选项卡上启用该功能。
图像惰性加载器
Image Lazy Loader模块将一种特殊的“Lazy加载器图像”格式添加到图像字段设置中。可以在实体类型的“管理”显示选项卡上选择此格式。它还允许您选择将伴随图像外观的动画效果，以及该效果应持续多长时间。

四、最后的想法

延迟加载图像是一种有用的技术，有很多工具可以实现它。长风Drupal开发团队随时准备帮助您根据网站的Drupal核心版本、图像类型和特定需求选择最合适的图像。我们可以使用图像延迟加载以及其他最佳实践和技术来提高Drupal网站的性能。让我们讨论如何加快您的网站速度！