什么是延迟加载？ 一个清晰的概念
已发表: 2021-07-12关于什么是延迟加载的清晰概念。 如何应用延迟加载技术提高网站加载速度。 有哪些推荐的图像延迟加载插件等等？
延迟加载是一种仅在需要时才加载图像、视频和其他媒体文件的技术（在这种情况下，页面向下滚动到图像）。
延迟加载被谷歌推广。 谷歌已经在他们拥有的大部分高流量网站上实施了它。
这实际上是为您的用户提高网站性能的好方法。
这是实现资源动态加载比预加载更好的方法，因为它本质上是惰性的，并且只在需要时加载资产。
当您向下滚动页面时，将加载媒体文件，尤其是图像。 通过减少对 HTML、CSS 和 JavaScript 资源的请求数量，这显着减少了初始页面加载时间。
延迟加载图像始终可以使用 3rd 方插件来实现，但如果您对 HTML/CSS 代码感到满意，那么在您现有的网站上实现它实际上非常简单。
为什么要向我的网站添加延迟加载？
长期以来，并行加载页面上的所有元素是最佳实践。 但是今天，用户连接受限和移动网络速度快的情况非常普遍。
出于这个原因，最好先只加载您需要的资源，然后在需要时再加载其他资源。
延迟加载还可以减少浏览器在页面加载时需要完成的工作量。 这最终意味着您将为用户获得更快的页面加载。
您可以通过多种方式在您的网站上实现延迟加载。 像任何技术一样，每种方法都有一些优点和缺点。
如何在 WordPress 网站中添加延迟加载？
您可以通过添加一些简单的 CSS 和 JavaScript 代码将延迟加载添加到任何网站。 您还需要一点 HTML 标记。
但在这篇文章中，我将只讨论 WordPress 延迟加载插件，它们可以让您在 WordPress 网站上享受延迟加载图像的优势。
如何使用插件添加延迟加载？
有许多可用的 WordPress 插件可以一键自动将延迟加载功能添加到您的网站。
如果您想增加整体网站加载时间，我会推荐 Permatters speed optimize 插件。 该插件将优化您的网站以获得更好的用户体验和性能。 它还具有一些附加功能，例如延迟加载、gzip 压缩等……
如果您想弄脏代码或有一些高级要求，那么我会推荐其他以下插件。
WP Rocket 是最受欢迎的 WordPress 缓存插件之一。 它也是最流行的延迟加载图像插件。 它将帮助您降低加载速度并增加总浏览量。 你可以阅读 WP Rocket Review。
您还可以使用 Light Speed Cache 插件，这是 WordPress 用户中另一个流行的插件。 它使您能够为您的网站使用高级缓存规则，这有助于改善页面加载时间并减少带宽使用。
此外，上述插件有助于加载 iFrame。 为此，我向您推荐这些插件。
延迟加载 vs 动态加载 vs JavaScript 预加载 vs Eager 延迟加载
这四个术语之间的最大区别在于用户首次访问您的网站时会发生什么。
延迟加载：通过延迟加载，资源根据需要加载（顾名思义）。 这意味着根据用户的操作，某些元素可能根本不会加载。
动态加载：使用动态加载，您必须预先加载所有内容——即使它不是必需的。 因此，根据您必须发送的数据量，这可能会显着增加页面加载时间——即使其中一些内容从未被任何人查看过。
JavaScript 预加载：
JavaScript 预加载是图像延迟加载过程的重要组成部分。 它通过提供 HTML（和 CSS，如果您使用基于样式的解决方案）来促进浏览器缓存。
它使用 AJAX 为页面上的每个图像提供单独的文件。 这允许浏览器在完全加载之前开始下载图像，从而增加可以通过慢速网络连接或慢速客户端计算机加载的图像数量。
Eager 延迟加载：这类似于延迟加载，您将根据需要加载资源。 不同之处在于，使用 eager 方法，您不必担心现在是否可以看到某些内容。 如果它已经加载了，那就太好了——否则就在必要时加载它。
了解 SEO 的延迟加载
有些人担心延迟加载图像会对 SEO 访问其内容的能力产生负面影响。
谷歌在抓取你的网站时在缓存资源方面做得很好，所以如果你加载元素的方式随着时间的推移保持快速并且不会经常变化，我认为任何人都不应该担心影响他们的搜索发动机等级。
延迟加载和 CDN
业内有一些有用的 CDN 可以帮助您分发图像和媒体文件。 这些服务中的大多数通过为您实现延迟加载功能来提供出色的用户体验。
Cloudflare CDN 是我想在其他 CDN 服务中强调的一项。
Cloudflare 是一个内容交付网络，为其所有帐户用户提供免费和付费的 CDN。 它还通过实施页面速度优化、HTTP/2 等一些高级策略来优化您的网站并提高安全性。 它还可以帮助您延迟加载网站图像和媒体文件。
在桌面或移动设备中延迟加载：它如何影响 Google SEO？
延迟加载在桌面上已经存在了很长时间。 这是大多数主流浏览器都提供的功能，但也有一些功能（例如预加载和部分加载）并非对所有浏览器都可用。
但是，对于移动设备，延迟加载是您需要注意的事情。
将其视为 SEO 排名因素很重要，因为 Google 现在正在关注移动设备上的延迟加载图像。
这里的关键不仅仅是实现延迟加载，还要确保它以快速有效的方式加载资源。 如果没有，您的搜索引擎排名可能会受到负面影响。
延迟加载不同大小的图像
您应该关注延迟加载图像的另一个原因是移动设备使用量的增加。
人们喜欢用手机浏览和搜索，但在点击链接时它们的速度或准确度不高，因此拥有较大的图像意味着人们可能会在完整图像加载之前点击离开。
因此，对于移动设备来说，拥有更小的图像显然会更好，即使这意味着需要加载更多的数据，但从长远来看这是值得的，因为人们会点击而不是完全离开你的网站。
延迟加载中使用了哪些框架？
有几个选项可供您使用：
1. Picturefill（默认使用）
Picturefill 是一个为您的图像提供延迟加载功能的脚本。 这个轻量级的 JavaScript 库几乎可以与所有主流浏览器一起使用，而且它也是响应式的。 因此，它会根据您使用的设备类型改变其行为。
2. LazyLoadJS（默认使用）
LazyLoadJS 是一个为您的图像提供延迟加载功能的脚本，它非常轻量级并且适用于所有主要浏览器。 因此，您在使用时不必担心任何问题。
它还具有多个队列，以提高您网站的整体性能，并且非常易于使用——所有技能水平的开发人员都可以毫无问题地使用它。
3.LoadCSS（默认使用）
LoadCSS 是一个为您的样式表提供延迟加载功能的脚本，这与其他仅处理图像或视频文件的库不同。 这还将预加载 HTML 和 JavaScript。
4. SlimerJS（不可用）
SlimerJS 是一个为您的图像提供延迟加载功能的脚本，它不使用任何 JavaScript 库，但它确实有自己的 API，您可以使用它来配置图像延迟加载的工作方式。
它也非常轻巧且快速，因此不会以任何方式影响您的网站性能。
延迟加载是否适用于背景图像？
是的，它可以在背景图像中使用。
结论
当涉及到 WordPress 和一般网站时，延迟加载是最未被充分利用的性能优化技术之一。
一旦你知道如何实现它就非常容易，但甚至没有多少人知道它。 如果您想提高页面加载速度，那么我强烈建议您对图像和媒体文件实施延迟加载。