如何使用延迟加载来获得完美的移动速度结果
已发表: 2022-12-03
您的站点是否通过了 Google 移动站点速度测试？ 不？ 您可能想查看延迟加载图像。
网站性能至关重要。 如果您的博客或网站加载缓慢，用户体验就会很糟糕。
没有人会等待五到十秒钟来加载您的网站。 网速或下载速度需要快。 一个缓慢的网站会增加您的跳出率并降低您的转化率。
当您为您的站点进行网站速度测试时，您的桌面速度通常还可以。 但是您的页面如何执行移动速度测试？
为移动用户做准备
大多数博客和网站程序都相当适合桌面查看。
他们使用响应式设计来提供移动版本。
虽然这是一个实用的解决方案，但它有一个明显的缺点。
如果您的网站是响应式的，它将在移动设备上运行。
但是你的图片文件大小是针对桌面的，所以你的移动网站速度要慢得多。
如果你做一个谷歌 Pagespeed Insights 测试，你的结果可能是合理的并且在桌面上是绿色的，但它看起来像你的移动版本。
当您考虑到一半甚至更多的网站访问者使用移动设备时，您确实需要改善页面加载时间和移动速度。
谷歌正在转向使用其移动优先索引作为排名因素。
您可以使用许多免费的网站速度测试服务来监控性能。
但是，并非所有速度测试应用程序都会测量移动网站速度。 因此，不要因桌面站点页面速度的良好结果而放心。
WebpageTest 允许您选择不同的移动版本，因此它是 Google 的替代品。
始终确保您可以检查您的移动版本，因为设备连接的互联网连接速度要慢得多。
如果你的结果不令人满意，你还有工作要做。
您如何提高移动性能？
许多因素都会导致桌面和移动设备的网站速度变慢。
Javascript 和 CSS 文件可能会过早加载并阻止渲染。 如果您使用的是 WordPress，则可以使用缓存插件轻松修复此问题。
您的网络主机可能存在问题，导致您的 TTFB（首字节时间）略高于半秒。
但是，大多数主机最多只比这个时间高出 10% 到 20%，这不是什么大问题。
最大的问题几乎总是图像和 iframe。 当您将图像添加到帖子时，它不会针对移动设备进行压缩、调整大小或格式化。
您可以使用插件来提供帮助。 Smush 是一个流行的插件，用于在上传时压缩图像。 结果会稍微改善您的桌面版本，但不会改善您的移动版本。
要缩短移动设备上的页面加载时间，您需要提供更小的图片。 但这涉及很多工作。
直到最近，最好的解决方案还是拥有一个单独的网站移动版本或使用 AMP 页面。 无论哪种方式，现有站点上的所有图像都必须替换为下一代图像。
这两种解决方案所涉及的工作都可能需要数周或数月的时间，具体取决于您网站的规模。
对于大多数站点所有者，如果您不了解 intersection observer API 或 img src、data src 属性、惰性类、img 标签或 img 类，那么您将不会构建新的移动站点。
面对现实吧。 这太难了，太费时了。
更多阅读：如何停止联系表格和评论垃圾邮件
应用延迟加载行为
幸运的是，有一种简单的方法可以修复您的移动页面加载时间。 答案是让所有图像延迟加载。
延迟加载延迟图像的传递，直到读者需要它们。 当读者滚动网页时，可查看内容下方的图像会被阻止。
通过这样做，页面的初始加载时间与预先加载的时间相比大大减少了。 有许多插件和解决方案可用于向您的博客或网站添加延迟加载。
运行延迟加载测试
在过去的几周里，我一直在对一种使移动网站充满活力的新方法进行 Beta 测试。
您可能听说过内容分发网络、延迟加载和延迟离屏图像。
如果没有，它们是仅在加载页面和用户向下滚动页面时提供图像的元素。 您可能已经在 Medium 等网站上看到了这一点。
当你第一次访问一个网站时，图像会在一瞬间显得模糊。 它们被称为占位符图像。
然后图像在瞬间清晰出现。
这是实际的延迟加载。 当用户向下滚动页面时，直到需要图像时才会加载图像。
它使页面运行速度超快，尤其是在移动设备上。 延迟加载器可以应用于网页上任意数量的图像。
但是这个解决方案仍然缺少一个元素。 这些图像不是下一代格式。
幸运的是，现在有一个解决方案，因此您不必替换所有图像。 Optimole 是一个 WordPress 插件，可以完成很多繁重的工作。
它不仅会延迟加载图像，还会用提供下一代图像的新图像 URL 替换您的图像。
最重要的是，它可以动态调整图像大小。
测试 Optimole
我做了很多测试，每次我检查一个页面时，它在谷歌移动速度测试中的得分都很高。
我的一项测试是使用包含十张未压缩和未调整大小的大图像的全宽网页。
换句话说，我只是在一个页面上拍了一堆大图并发布了它。 （图片由 Pixabay 提供，因此它们不需要知识共享署名。）
页面太大，我无法给你看图片。 因此，我将在视频中向您展示。
当我在 Google 上测试该页面时，结果是这样的。
考虑到所有图像的大小，这并不奇怪。
然后我激活了 Optimole。 您可以在下面看到我使用的设置。 这就是你所要做的。 
那么结果如何呢？
对于桌面，满分。
对于移动设备，得分近乎完美。
在GTmetrix上，分数再次接近完美。
请记住，这些是充满高分辨率巨大图像的页面的真实结果。
安装插件和获取 API 密钥只需要几分钟，然后只需几秒钟即可激活设置。
所以在不到五分钟的时间里，我就有了一个近乎完美的移动页面和网站。
了解更多关于 Optimole 的信息
要在现实世界中查看插件的运行情况，请访问 CodeinWP 网站。 它在 Optimole 上运行，因此您可以对其站点速度进行测试。
您可以访问 Optimole 网站来检查您的网站。
单击“检查我的网站”按钮并输入您网站的 URL。 您将看到所有图像的列表以及可以在您的网站上节省的费用。
如果您的站点较小，则可以使用该插件的免费版本。 但是，如果您的站点很大，则可能需要考虑高级选项。
阅读这篇文章所花费的时间比让您的网站为移动访问者超快运行所花费的时间还要长。 那你还在等什么？
更多延迟加载替代方案
如果您不想设置 Nextgen 图像的 CDN 交付，您可以使用许多免费选项。
WordPress 现在默认包含延迟加载。 但是，您几乎无法控制它的工作方式。 通常最好使用插件，这样您就可以微调性能。
Smush 是一个流行的免费 WordPress 插件，用于在将图像加载到媒体库时减少图像。
但是它有一个选项可以激活延迟加载。 我已经在我的网站上尝试过一些，而且效果很好。 只需激活该选项，即可完成。
A3 Lazy Load 是另一个免费插件。 我已经在我的许多网站上使用它很长时间了，包括这个。
我喜欢它的一点是我可以改进很多选项。 它可以选择排除小部件，这解决了某些主题的一些跳跃问题。
BJ Lazy Load 已经存在很长时间了。 它拥有超过 90,000 名用户。 但是，它已经有一段时间没有更新了。
Lazy Load 是一款免费插件，安装量达 60,000 次。 它是 WP Rocket 的免费组件，是用于站点速度优化的多合一解决方案。
最后一个插件是 Lazy Load for Videos。 如果您的网站上有很多 Youtube 视频，这是一个很好的工具。
多么好的选择！ 现在您完全没有理由拥有一个缓慢的移动网站。
注意：我与该产品没有任何关系。 我的 Optimole 评论基于我作为用户的经验。
更多阅读：免费网站检查器和 SEO 工具