Shopify速度优化

让我们研究最常见的Shopify页面速度问题以及如何解决它们。

1.谨慎使用弹出窗口

指的是quick-view,页面如果含有quick-view,最好删除。

2.避免过多的循环

Liquid是一种功能强大的Shopify编码语言。但是,在某些情况下,您需要权衡增加的收益与权衡。

Forloop迭代就是这些实例之一。Forloop意味着系统必须循环(例如爬网或搜索)集合中的所有产品,并且在寻找特定条件(例如价格或标签)时发生。

如果您的产品目录很大,则循环将花费很长时间。在以下情况下会发生此问题

  • 色板: 对于收集页面上的每种产品,代码循环遍历所有变体(然后是所有图像),最终分离出与图像关联的特定颜色

  • 对具有数千种产品的集合进行分页:网站不是在每个页面上保留较多数量的产品,而是一次显示所有内容,然后使用JavaScript按需逐步加载页面

3.减少首页轮播图的数量

巨大的多图片幻灯片非常适合展示您的产品。不幸的是,使用它们有一个缺点。英雄滑块看起来不错所需的大小和质量可能会增加加载时间-特别是如果您有四到五个幻灯片。

解决办法

减少主页轮播图的数量。或者,完全消除它们。单一的,高质量的,经过深思熟虑的英雄形象(明确呼吁采取行动)有助于迅速吸引客户。这是因为[大脑处理视觉图像的速度比文字处理速度的60,000倍]

如果必须使用轮播图,请遵循UX最佳做法。坚持使用两张幻灯片

4.权衡为您的站点安装另一个应用程序的好处

如果您的商店上安装了 20多个Shopify应用程序(免费或付费电子商务插件),则可能没有全部使用它们。也许您安装了一些试用版,然后忘了删除它们。但是,这些应用程序仍在后台运行,从而损害了您的网站性能。

使用Shopify Plus Admin下载的应用程序的大多数脚本/ CSS文件都会注入到中theme.liquid文件的中。

为了使应用正常运行,需要在加载任何其他代码之前将其呈现。 每当您要安装新应用程序时,请问自己:“此应用程序的附加值是否会超过加载速度可能降低的幅度?”

解决办法

浏览并删除所有不使用的应用程序。接下来,使用GTmetrix或PageSpeed Insights等工具运行页面速度测试,甚至使用Chrome的Developer工具进行手动测试。单击“网络”选项卡,然后重新加载页面。

我们建议您查找和删除所有不必要的应用程序。

5.压缩并缩小图像的大小和数量

图片占网页总重量的50%至75%。图像质量越高,该数字越大。但是您可以通过无损压缩来最大程度地减小图像大小而不会降低质量。

要减小添加的新图像的大小,可以先使用TinyJPGTinyPNG来完成此任务。

同时减少整体使用的图像数量。

请记住,您在页面上使用的每个图像都会创建一个新的HTTP请求。在简化页面速度的同时,修剪图像可以帮助您事半功倍,事半功倍!!!!。

另外,请注意代码中是否有空图像源-。这些给浏览器带来了额外的负担,使浏览器无法向服务器发送另一个请求。


文档维护:黎俊阳、王小榆、王星星、林颖

results matching ""

    No results matching ""