速度在任何网站中都扮演着重要的角色。
你的shopify网店加载的越快,跳出率就越低。如果你shopify网店很快,你就有更有机会在google上取得好的排名,因此对于shopify速度优化也显得非常重要。
BBC 发现其网站的加载时间每增加一秒,便会多失去 10% 的用户。
这篇文章将详细介绍优化Shopify网店所使用的所有方法,并创建一个新的Shopify店铺来展示如何准确地优化Shopify店铺以提高速度。我们开始吧!
我们需要一些工具来测试你网店的速度
- Google PageSpeed Insights
- Gtmetrix
提示:这些步骤可能需要一些技术知识,如HTML、CSS和JavaScript。
在开始优化Shopify店铺之前,请确保下载之前Shopify模板备份起来。对于如何修改shopify CSS请参考前面的文章。
shopify后台 > 在线商店 > 模板 > 编辑 > 下载模板文件
你的备份shopify会把它发送到与你的邮件中。
拉低网店速度和降低转换率的一个主要关键因素是图片。
要压缩图片,有两个办法
- 使用压缩图片Shopify App
- 可以使用在线压缩工具,你需要下载图片并上传到网站,压缩处理后,你需要重新上传图片并替换为未压缩的图片,我通常使用TinyPng,这是我最喜欢的图片优化工具之一。
下面将详细介绍一下如何减少浏览器请求的数量。
1、进入Shopify 后台 > 模板 > 编辑 > 编辑代码
2、创建一个 app.js 文件
Assets > 新增 asset > 创建空白文件 > 选择.js > 输入 app
3、将Assets目录中的所有javascript文件内容粘贴到app.js文件中
4、在theme.liquid中添加 app.js
Layout > theme.liquid
你需要在</head>标签之前添加app.js引用,并且把原来整合进app.js的其他引用都删除掉。
大部分Shopify网店都安装了Shopify Apps,一些Shopify 网店的店主不知道某些Shopify app可能会影响您的网店加载速度,你可能已经删除了所有不必要的apps,但您还需要删除Shopify apps在你的模板遗留下来的代码。因为有一些Shopify app在安装时会自动将代码插入到模板中,卸载的时候并不会自动清理。
在我们的店铺网页,可能会比较长,分成好几屏,当用户看到第一屏的时候,那么我们只需要把第一屏所需要的图片加载出来,其他不可见的屏,当用户往下滚动时,我们再加载,这样会极高的提高加载速度。为了解决这个问题,我们有一种称为“延迟加载”的技术,用户将向下滚动时才会加载图像,这里有该技术的演示,也可以在其他一些媒体网站上看到此技术。
有一些Shopify模板已经在它的模板中实现了延迟加载。以后有机会给大家推荐一些比较好的模板。
这步操作需要技术人员协助你来完成,它涉及到了Html5 、CSS3 和 liquid, 如果处理不好,可能导致你的模板出bug。
这个技术将预加载字体,不要等到浏览器有需要的时候才会下载字体,这将降低加载速度。通常模板使用的都是Google字体,我们只需如下就行了。
https://fonts.googleapis.com/css?family=Lobster&display=swap
只需在URL末尾添加&display=swap
这个和预加载Web字体功能相同,这个用于JavaScript和CSS文件。
预加载CSS
预加载JS