Shopify速度优化

对于很多出海的商家，网站速度的加载快慢一直是大家困扰的问题。首先我们先认识下什么是网站速度和网页速度：

网站速度是用户浏览网站时的网站加载速度；从第一页加载到访客点入浏览，最后在购物车页面 结账。这个速度由一些服务来评分，例如 Google PageSpeed Insights 会从总体上查看您网站的 各种加载时间。

网页速度优化是指缩短您网站上某个特定页面的加载时间。它和网站速度优化类似，但更侧重于 让每个页面上的具体资产（图片、视频）更快加载。

针对shopify速度优化，我总结了以下几点：

1、对于图片的优化

a、图片首选jpg、webp格式，在保证清晰度的前提下，尽可能不用太大的图片，经常我们会看到有的商家一张图片都好几兆，那么肯定会慢的。一般一张图都是Kb级别的，有一些场景我们可能会用到png或者gif，会大些是正常的。

b、对于首屏的图片我们立刻展示在用户面前，所以需要立即加载，但是非首屏的就不需要了，我们可以设定懒加载或者预加载，滑动到相应位置在进行加载，这样会大大提高我们网站的响应速度。
 

2、对于Liquid、css、javascript的优化

对于代码的优化是至关重要的，我们网站慢很大一部分原因都是代码不够规范，公共样式未抽取，加载未使用的js文件等。

a、对于代码优化，公共组件的抽取，清理掉未使用的js和css文件。
b、对于总的js、图片、视频和css进行预加载或者懒加载
c、平衡pc和手机端，有些用户pc端评分都是大九十，但是手机端才几分，这时候我们需要通过代码手段平衡评分。

 

3、对于插件的优化

往往有的时候，我们一开始评分还可以，但是加了某些插件，评分一下降低了很多，所以我们对于插件的使用一定要合理，选用评分稍高的插件，能够用liquid处理的逻辑，就尽可能不用插件，因为插件里面做了什么只有插件方知道，他们使用了什么服务器，代码写的怎么样都没法评定。当然有的插件是将代码直接注入到我们的模板中，这样我们也可以针对插件的js进行优化提速。

基本上我们把这些处理好了，我们网站的速度也就上去了，Shopify开发的小伙伴可以按照这个思路来处理自己的Shopify站了，想要评分双100基本是没有可能的，但是七八十还是简简单单的，大家动起来吧，也欢迎一起交流哦。