什么是延迟加载?
延迟加载是一种性能优化技术,可在用户向下滚动页面时而不是在初始页面加载期间加载图像。
也称为“推迟屏幕外图像”。
通过执行延迟加载,我们通常会看到页面大小减少10%– 30%。
在浏览器方面,页面加载速度更快,因为它不会立即加载所有的图片。
在技术方面,它的工作原理是用一个data-src占位符替换html图片src属性–这可以防止图片在标准html序列中加载。然后使用javascript抓取该占位符url,并更新元素的src属性,在图片进入视图时加载图片。
Google的效果。 延迟加载的图片不会影响到初始页面的加载,所以你的网站更轻盈,并能获得更快的加载时间带来的好处(提高排名和流量)。
为什么延迟加载很好?
- 页面加载速度更快!
- 更快的页面 = 更好的SEO排名
- 更快的页面 = 更好的转换率
考虑到这一点:
现在,让我们看一下实现延迟加载之前和之后客户主页的示例:
实施前
页面大、加载时间缓慢。
实施后
经过这一优化后:
- 移动加载时间缩短了2.5秒以上
- 服务器请求减少20个
- 页面重量减少了1MB
- 真好!
这些统计信息使用的是webpagetest.org,移动LTE的下载速度为12Mb。
该站点的负载仍然很大,大约为10MB(我们通常可以将站点大小降至1MB到2MB,并进行全面优化……)但是即使是延迟加载,你也可以看到显着的加载时间减少。
如何将延迟加载添加到SHOPIFY主题
- 将lazysizes.js库添加到主题资产文件夹中,并将其包含在theme.liquid中
- 在主题文件中找到图像标签
- 通过将src与数据源交换并添加“ lazyload”类来更新这些图像标签
- (可选)为动画效果添加一些CSS样式
选项A)如果你希望我们的优化专家为你解决此问题,则可以订购Shopify延迟加载服务。
通常,我们也可以延迟加载视频(如果它们不在页面顶部)。
选项B)如果喜欢使用代码并希望对其进行破解,请从lazysizes库开始在你的站点上实现。
在编辑主题代码之前请做好备份工作!
使用lazysizes的详细实现说明在那个页面上,如果你向下滚动的话。
有时你可能会遇到问题,这取决于主题代码的设置方式,但这也是学习的乐趣之一🤓。
在你的Shopify网站中编辑的具体文件将根据你的主题而有所不同,但一般情况下,你要寻找加载图像的模板代码,并在lazysizes(或任何你最终选择的库)解释的懒惰加载语法中交换。
例如,如果你使用的是我推荐的lazysizes库,一旦你在你的theme.liquid文件中安装了这个库,你就需要换掉你的标准img标签
<img src="IMAGE_URL">
使用新的延迟加载语法:
<img data-src="IMAGE_URL">
要安装该库,请从该lazysizes页面下载最新文件,上传到Shopify主题Assets文件夹,并将其命名为lazysizes.min.js,然后将其包含在theme.liquid < head >
部分中,如下所示:
<!--Lazy Loading -->
{{ "lazysizes.min.js" | asset_url | script_tag }}
<style>.lazyload,.lazyloading{opacity:0}.lazyloaded{opacity:1;transition:opacity.3s}</style>
*该<style >
部分用于创建微妙的CSS动画淡入效果。
设置好代码后,向下滚动网站时,您会看到图像逐渐淡入视图,而不是在初始页面加载时全部显示(您也可以刷新此页面并快速向下滚动,以尝试在此处捕捉影响)。
延迟加载通常可以加快你的网站的大部分速度-主页,收藏集,产品页面和博客文章都可以受益。
如何检查你的网站上是否设置了延迟加载
要查看网站是否有延迟加载,检查方法是通过右键单击页面,然后选择“查看源代码”来检查浏览器代码。在该页面上搜索“lazy” –如果没有任何元素带有“lazy”,则可能没有。
如果你查看源代码并看到一些“lazy”元素,那么仍然值得通过分析器工具来运行,以确保它们都被“真正的延迟加载”(而不仅仅是“占位符惰性加载”)加载了。
你应该延迟加载哪些图像?
通过延迟加载,将获得最大收益:
- 收集页面图像
- 主页图片
- 相关产品
- 博客图片
有时你可能会在分析工具中看到有关图标或小图形的警告-我不必担心这些。
延迟加载的主要好处来自推迟大型图形和产品图像。
真正的延迟加载与占位符延迟加载
你可能已经设置了延迟加载,但是在分析工具中仍然会收到警告。
这可能是因为您具有“占位符延迟加载”而不是“真正延迟加载”。
真正的延迟加载:图像没有src
属性,因此仅当用户滚动到视图中时,图像才在页面加载时不加载。
占位符延迟加载:图像具有较小的占位符缩略图,该缩略图在初始页面加载时加载,然后当用户滚动时,较大的常规图像将替换缩略图。
有时具有占位符是一种设计偏爱,没关系。但是,如果你想最大化性能,我们建议你转换为“真正的延迟加载”。
延迟加载和SEO
延迟加载图像时,你的html图像元素将正常加载。从html端更改的唯一一件事是使用属性data-src
而不是src
,这会阻止图像在触发加载之前向查看器显示。
从SEO的角度来看,alt
页面搜寻器仍然具有重要的属性,并且通过延迟加载可以更快地加载页面,因此我们建议您同时针对性能和SEO进行推荐。
有关置入图像SEO的更多信息,这篇文章将为你设置:Shopify的图像SEO –如何针对搜索引擎进行优化。
下一步是什么?
如果你希望我们为你实现此目的,请转到“优化服务”页面,然后选择“延迟加载”。
如果你登陆这里是为了优化Shopify网站,以下是提高速度的更多技巧:
- 使用Crush Pics自动压缩图像
- 确保您使用的是JPG图像格式而不是PNG来拍摄照片图像(对于相同的分辨率,PNG的尺寸通常要大2倍-10倍
- 通过Shopify分析工具运行你的网站,以查看你拥有哪些优化机会,以及如何利用它们
- 如果你觉得还是不够,请查看我们完整的性能优化指南:如何优化Shopify网站。