lazy loading for shopify sites

如何在Shopify上延迟加载图片?让你的网站更快的方法。

什么是延迟加载?

延迟加载是一种性能优化技术,可在用户向下滚动页面时而不是在初始页面加载期间加载图像。

也称为“推迟屏幕外图像”。

通过执行延迟加载,我们通常会看到页面大小减少10%– 30%。

在浏览器方面,页面加载速度更快,因为它不会立即加载所有的图片。

在技术方面,它的工作原理是用一个data-src占位符替换html图片src属性–这可以防止图片在标准html序列中加载。然后使用javascript抓取该占位符url,并更新元素的src属性,在图片进入视图时加载图片。

Google的效果。 延迟加载的图片不会影响到初始页面的加载,所以你的网站更轻盈,并能获得更快的加载时间带来的好处(提高排名和流量)。

为什么延迟加载很好?

  • 页面加载速度更快!
  • 更快的页面 = 更好的SEO排名
  • 更快的页面 = 更好的转换率

考虑到这一点:

stat mobile speed and conversion rate 1 1024x368

现在,让我们看一下实现延迟加载之前和之后客户主页的示例:

实施前

before lazy load

页面大、加载时间缓慢。

实施后

after lazy load

经过这一优化后:

  • 移动加载时间缩短了2.5秒以上
  • 服务器请求减少20个
  • 页面重量减少了1MB
  • 真好!

这些统计信息使用的是webpagetest.org,移动LTE的下载速度为12Mb。

该站点的负载仍然很大,大约为10MB(我们通常可以将站点大小降至1MB到2MB,并进行全面优化……)但是即使是延迟加载,你也可以看到显着的加载时间减少。

如何将延迟加载添加到SHOPIFY主题

  1. lazysizes.js库添加到主题资产文件夹中,并将其包含在theme.liquid中
  2. 在主题文件中找到图像标签
  3. 通过将src数据源交换并添加“ lazyload”类来更新这些图像标签
  4. (可选)为动画效果添加一些CSS样式

选项A)如果你希望我们的优化专家为你解决此问题,则可以订购Shopify延迟加载服务。

通常,我们也可以延迟加载视频(如果它们不在页面顶部)。

选项B)如果喜欢使用代码并希望对其进行破解,请从lazysizes库开始在你的站点上实现。

在编辑主题代码之前请做好备份工作!

使用lazysizes的详细实现说明在那个页面上,如果你向下滚动的话。 有时你可能会遇到问题,这取决于主题代码的设置方式,但这也是学习的乐趣之一🤓。 在你的Shopify网站中编辑的具体文件将根据你的主题而有所不同,但一般情况下,你要寻找加载图像的模板代码,并在lazysizes(或任何你最终选择的库)解释的懒惰加载语法中交换。 例如,如果你使用的是我推荐的lazysizes库,一旦你在你的theme.liquid文件中安装了这个库,你就需要换掉你的标准img标签

<img src="IMAGE_URL">

使用新的延迟加载语法:

<img data-src="IMAGE_URL" class="lazyload">

要安装该库,请从该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网站

WordPress主机推荐:Siteground 或者 Kinsta 。承接企业建站、独立站托管运营、Shopify 优化 & WordPress 等业务,有兴趣请联系微信:"paul-tse"。

Leave a Comment