首页-博客-什么是惰性加载?你知道47%的用户希望页面在2秒或更短的时间内加载吗?页面速度在今天的数字营销世界中是至关重要的,原因有很多。那些无法访问你的网站的用户,或者在访问过程中感到沮丧的用户,很可能会为了他们的博客文章或产品而放弃你的品牌,而转向其他地方。仅500毫秒的连接速度延迟就会导致“峰值挫败感”增加26%以上,用户参与度下降8%。Moz认为理想的页面加载时间为0-4秒,并发现加载时间在1秒以内的页面的转换速率是加载时间在5秒或更长时间内的页面的2.5倍。结论很明显。对大多数人来说,访问你的网站所花的时间就是他们对你品牌的第一次体验。让他们放慢阅读速度,肯定会让你们的关系一开始就走错路。你甚至有可能失去回头客和客户。
这就是惰性加载的作用。延迟加载是许多关键的页面速度优化之一,可以提高性能,并为您转化新用户提供最佳机会。我们来谈谈吧!什么是延迟加载?简单地说,
延迟加载允许您将缓慢加载的页面元素推迟到页面呈现之后。这是一种确保用户在加载一些较大的、不重要的、页面下方的元素之前“进入”你的网站的方法(而不是弹开)。
这里的思想是缩短关键渲染路径的长度,或者缩短用户到达页面最大内容绘制(LCP)所需的时间。最大内容绘制是加载速度的一种奇特说法。这也是一种很重要的表达方式,因为它代表了谷歌对加载速度的理解。
最大内容痛苦标记页面加载时间轴上的点,此时页面的主要内容可能已经加载。LCP一直是页面速度和用户体验的关键元素。现在谷歌发布了它的核心Web Vitals,这就更加重要了。你可以将谷歌在2020年5月引入的核心Web Vitals视为网站技术健康状况的基线要求;谷歌用于评估页面的UX(用户体验)的指标。它们本身是一个更大的算法更新的一部分,称为页面体验更新,这将使用户体验和网站性能在明年5月成为关键的排名因素。
谷歌对健康、值得排名的用户体验的新技术要求。要了解更多关于技术SEO的帮助,请访问我们关于如何进行技术SEO审计的帖子。一段时间以来,速度一直是谷歌排名的关键因素,但核心Web Vitals的发布和页面体验更新的提前宣布代表了滚动页面速度的里程碑式转变,这将在未来获得有机流量。核心Web vital的后两个组成部分——优先输入延迟(FID)和累积布局转移(CLS)——与用户到达页面后如何与页面交互有关。对于我们这里的目的,它是第一个组件,最大内容绘制,在这里延迟加载可以真正产生影响。通过延迟非关键元素的加载时间,直到用户“到达”你的网页之后,你就给了自己一个更大的机会来留住——不仅仅是留住,而且是转化——那个用户。你的网站慢并不一定意味着你必须实现延迟加载。更好的页面速度优化方法是通过页面速度性能工具运行站点,如PageSpeed Insights或GTmetrix。
来自PageSpeed洞察力的一个示例页面速度评估。
在那里,您将得到许多可能需要也可能不需要的建议重新实现延迟加载的图片,但肯定会包括网页速度优化的其他元素,如:
启用Gzip压缩减少JavaScript, CSS和HTML减少重定向删除渲染阻塞JavaScript利用浏览器缓存提高服务器响应时间使用内容分发网络(CDN)优化图像和视频
的想法是优先考虑项目,给你的网站最好的机会提高页面速度,或者是整体上最大的“收益”。
如果您碰巧看到了“延迟屏幕外图像”的建议,这就是图像的延迟加载发挥作用的地方。“延迟屏幕外图像”的建议是你需要延迟加载的可靠信号。您还可以在搜索控制台中使用新的核心Web Vitals报告,以鸟瞰您的站点上哪些页面有LCP问题。谷歌将“好的”LCP定义为4秒或更短的LCP:
再次强调,仅仅因为给定页面的LCP长于4秒并不一定意味着您需要实现延迟加载。但是这个报告可以提示您站点上哪些地方的性能非常慢;从那里开始,使用我们刚才讨论的一些速度工具,您可以在单个页面上运行诊断,并查看“延迟屏幕外图像”是否意味着需要延迟加载。如果您正试图自己实现延迟加载,这是我们的第一个提示:不要这样做!这里的例外情况是,如果您是一个经验丰富的开发人员。或者,如果您是一名业余开发人员,能够在临时站点上实现延迟加载,并将您的新速度分数与实时站点进行分离测试。在这些情况下,您可以而且应该感到有能力将懒惰加载掌握在自己手中。对于WordPress用户来说,有许多方便的插件可以帮助实现延迟加载,其中最突出的是延迟加载和Smush。具体来说,Smush是一个一体化的图像优化解决方案,它为您提供图像压缩、延迟加载和下一代图像转换,所有这些都是图像SEO的关键。
Smush用于WordPress图像优化和延迟加载。但是,取决于你的内容管理系统(CMS)——不管是WordPress、Shopify、Bigcommerce还是webflow——延迟加载可能不像实现一个插件那么简单。例如,Shopify推荐它自己的延迟加载实现;而Bigcommerce有自己的第三方插件,支持对常见主题(如Stencil和Blueprint)的惰性加载。如果所有这些都超出了您的理解范围,那么让我们回到我们最初的观点:除非您对自己的开发能力有信心,否则不要花费时间和资源试图实现自己的惰性加载。相反,雇佣一个专业的开发人员——就像localiq那样——他们可以安全地、自信地在你的网站上惰性加载图片(并在他们进行其他网站速度优化时帮助你)。如果这意味着给你的网站或网页额外节省两秒钟的时间,如果你完全有信心自己做这件事,那就给懒惰加载它应得的资源,但把任务外包给专业的开发人员。
很有可能会在提高转化率和收益方面为自己带来更多回报。延迟加载对你的网站有多重要?这里的收获是:如果在PageSpeed Insights和GTMetrix报告中没有发现潜在的高收益操作项,就不要觉得需要花费您或开发人员的时间来实现延迟加载。如果能最大限度地节省加载时间,那么你可以也应该优先考虑其他一些提高站点速度的方法(再次强调:Gzip压缩、最小化JavaScript、CSS和HTML、删除呈现阻塞JavaScript、利用浏览器缓存、提高服务器响应时间等等)。另一方面,如果你有一个有很多图片的视觉网站如果您在搜索控制台的Core Web Vitals报告中发现许多较慢的LCP页面,请花点时间使用站点速度性能工具运行诊断。延迟加载可以显著提高页面下方元素较大的网站和页面的加载时间。对于这样的网站来说,实现惰性加载是很容易的。记住,不要在雇佣一个能够安全地实现延迟加载而不破坏现有环境的开发和设计专业人员(同时在此过程中帮助您改进其他站点速度)上打瞌睡。
Gordon Donnelly是一名SEO绝地,他自豪地在WordStream磨练了5年多。如今,你可以在冰球场、山上或波士顿的家中找到他,他正在打造Triple Whale的世界级电子商务分析平台。
参见Gordon Donnelly的其他帖子
更多像这样的文章如何为SEO创建支柱页面(有例子!)
学习如何提高你的排名,让你的内容更多地浮出水面,并建立你的声誉。
2022年谷歌排名前10个因素(+如何优化它们)
了解在对您的站点进行排名时,什么对谷歌真正重要——以及如何为此进行优化。
如何在谷歌上排名更高:17策略为2022
专业提示和SEO技巧-从初学者到高级,你不会想错过!
评论
评论前请阅读我们的评论政策。