Shopify是目前全球最流行的Saas电子商城平台,它本身的电子商城基础功能已经是非常的完善的了,但同时因为它不是开源程序,是没有办法进行二次开发的,虽然shopify也提供了丰富的API接口用于功能扩展,但是这类的API更多的是倾向于后台管理方面的,比如产品管理、订单管理之类的,虽然也提供了前端的API,但是前端的API功能是非常的少的,于是便出现了很多的shopify前端的第三方应用,比如:产品评论、联系我们表单、物流跟踪、产品图片标签等等。

 

言归正传,Shopify本身运行速度是不慢的,而且因为已经是开启了CDN缓存,可以说运行速度比起很多的网站是要快很多的,但是在实际使用中发现,有90%左右的shopify网站的运行速度都不佳,有一些网站正常用户打开的速度非常的慢,还有一些网站用户打开速度还算可以,但是在谷歌的Lighthouse的检测报告里是非常糟糕的,我们都知道,如果是正常的做谷歌的SEO自然排名,网站打开速度是重要的一个评分标准,特别是移动端的评分。这也是为什么有一些网站不管怎么做SEO优化,排行上升得都不理想。这也是可以理解的,你网站内容再好,但是打开速度太慢的话,对于用户体现来讲是非常不好的,所以你的评分自然而然会降低。那么为什么以前做SEO的时候,对于网站的打开速度会不重视呢?主要是搜索引擎算法的改变,随着移动端的普及,搜索引擎的算法也发生了根本性的变化,以前蜘蛛爬取内容是直接抓取网页源代码里面的内容,是不理会前端页面的最终呈现内容的,所以基本上网站打开的速度是由网站的后端程序来决定的,而现在的算法是蜘蛛会模拟成用户以不同的设备去访问网站,以最终呈现完所有的页面内容来决定打开的速度以及呈现的效果是否匹配当前设备的最佳浏览效果。 比如:(网页上面的一个按钮,用PC上面是用鼠标去点击的,所以精确度正确很多,但是在手机上,是用手指去点击这个按钮的,如果按钮太小,而这个按钮与旁边的元素间隔太小,很可能手指点击的时候就会点击到其它的元素,设备适配也会影响到SEO的评分的)。

附:访问网站大概是这样的一个过程:
1.用户访问网站->2.后端把内容输出到前端(网页源代码)->3.浏览器加载网页资源(图片、CSS、JS文件)->4.根据加载的资源渲染页面->5.最终呈现页面 。

 

所以影响Shopify网站打开速度评分是加载网页资源和页面渲染的这两个过程上面,以下是几种最主要的原因:
1. 需要加载的网页资源过多,要尽量的减少加载的网页资源个数和大小,很多做网站速度优化的都只是强调网页加载的总大小,而忽略了加载的个数。
优化方法:尽量的压缩和合并CSS和JS文件,网页上面的小图标尽量使用矢量字体和svg矢量图形,比如导航菜单上面的小图标,在所有的页面都有导航菜单,如果导航菜单的小图标全是使用图片格式的话,那么20个小图标,浏览器就要同时加载20个小图标,虽然这些小图标大小都比较小,但是加载这些小图标都是需要耗费载入的进程等待时间,如果是矢量字体,那么只需要加载一个字体文件就可以在页面上调用这些图标了。
2. 使用了太多的第三方前端应用,因为这类前端应用,都是通过JS来触发和从远方第三方应用服务器上面获取数据之后再在页面上渲染这些内容的,所以就会造成加载的第三方网页资源过多,以及获取远程数据也需要等待,这些都是最影响shopify的速度评分的。
最直观的感受就是,一个刚上线的shopify的网站,刚开始因为没有什么应用速度评分是很高的,但是随着应用安装得越来越多,速度评分只会越来越低。

shopify的速度优化方法一般都是以下几种方法:
第一种方法 尽量的压缩第三方的CSS和JS文件,因为shopify的机制,这些CSS和JS文件是很难完美的合并到一个文件里面的,所以这种方法也是最常见的优化方法,也是最没有效果的方法。因为他实际只是优化了加载文件的大小,而优化不了加载的个数。加载的第三方数据依然还是得通过第三方获取。
优点:实施简单。
缺点:加速效果不明显。
第二种方法 在第一种方法基础上尽量的合并第三方的文件内容,就是多个文件合并到一个文件里,也就是把第三方需要加载的文件都本地化到shopify服务器上面去,这种方法的效果比起第一种方法要好很多,但是实现起来比较麻烦,需要专门的技术人员去维护和整合这些第三方文件,因为你不知道这些第三方文件会在什么更新了新的功能,一旦更新了功能,你需要重新把这些文件去合并和压缩。加载的第三方数据依然是通过第三方应用获取。
优点:加速效果要比第一种方法好很多。
缺点:维护麻烦。
第三种方法 应用本地化,就是把这些应用的数据整合到shopify里面去,不需要加载多余的css和js文件,全部都通过shopify的模板来输出实现后端输出这些数据,这种方法基本上可以完美解决掉shopify速度慢的问题,这也是我观察过的另外10%评分比较高的shopify网站的做法,在这里需要强调一点,应用集成是指根据所需要功能自己编写自己的第三方应用,实际上这个应用集成是自己开发另一个网站用于管理shopify上面的内容,比如产品、系列、标签。再通过Shopify的API接口把数据更新回shopify上面去,然后再利用shopify的前端模板把这些数据输出到网站前端上面去。
优点:加速效果最好,数据本地化,方便维护管理、导出备份等。因为功能是自己开发的,还可以省下了第三方应用的月租费用。
缺点:需要专人开发和维护。

总结:如果你的网站主要的推广手段是SEO优化的话,那么谷歌的Lighthouse评分是基准,第二种和第三种方法是首选,如果你的网站主要的推广手段是社媒或者广告的话,那么做好第一种方法,其实也是差不多可以的了。
谷歌的Lighthouse评分的移动端评分为什么会这么慢呢?因为谷歌是用3G/2G的速度标准来评测你的网站的。

最新文章