很多同学反馈用shopify的时候，会发现自己的网站前端加载速度较慢，那今天我总结了几个点可以有效提高shopify网站的加载速度。
正常网站打开速度在2-3秒内不会对客户的行为造成影响。
如果你人在国内，记得要用梯子软件打开shopify，因为shopify服务器在国外，用梯子会更快。
如果你想要知道你的shopify网站为什么会慢，以及怎么提升你的shopify网站速度的话，仔细阅读我们的文章，相信一定会对你有帮助。
一、为什么要优化shopify网站加载速度？
1.流量贵
众所周知网站成本里面流量是最贵的。
客户迟迟无法打开你的网站导致刚进入网站就离开，流量白白浪费。优化完成之后可以有效降低网站跳出率。
2.网站跳出率高
客户进入你的shopify网站之后，如果同样的时间打开更快的话那他们就可以查看更多的产品，但是如果你的shopify网站加载速度慢的话，一些客户由于无法耐心等待可能看过一个产品之后就直接关闭网站了。
用户停留网站的时间越长，才更有可能在你的网站购买产品。
3.昂贵的插件
很多用户安装了很多速度优化的插件，一个月花费大几十美金但是速度提升却不大。
不如先按照下面几种方式先测你的网站速度，再看看该如何深度优化你自己的网站速度
二、怎么测试你目前的shopify网站加载速度情况
1.Google speed测速
目前主流的方式通过google speed来进行网站的速度测试，google speed会直接反馈出shopify网站的速度评分情况。目前大部分的老版本的shopify网站速度都在20分左右，一般来说网站速度高于60就是不错的，打开速度就会在2-3秒区间。你可以根据自己的实际情况判断网站速度是否还需要优化。
三、让你shopify网站速度变慢的5大核心因素
3.1 图片尺寸过大
图片的尺寸太大，用户网速不好的时候需要加载更长的时间。
3.2 复杂的模板代码
shopify模板代码太杂乱，大部分情况是由于使用的模板的代码写法过于复杂，或者是有些客户的网站开发过的代码太复杂。亦或者网站没有懒加载，客户一次性加载过多资源所以页面难以加载。
3.3 过多插件的安装
shopify后台装了太多的app，导致app的代码和网站代码不兼容或者app本身的服务器交互显示慢了
3.4 Youtube视频和过大的本地视频
不要上传尺寸过大的视频，如果为了加载速度最好是保障视频大小在20MB以下。此外不要用youtube视频，下面有解释。
3.5 尽量不要用字体包
尽量用shopify自带的原生字体，外部字体或者自己上传的字体会增加外部请求导致速度变慢。
四、2026 年 提升Shopify加载速度 的几个简单快速的方法
在上面看过了导致shopify加载速度变慢的一些因素后，想必你也想要知道解决方案，那我们该怎么优化shopify的加载速度呢?
我们总结了8个有效的优化方案，可以尝试跟着下面的方式去操作，这些方案都是我们自己亲自实操过，通过对于shopify模板的优化，对你的shopify加载速度的提升效果是不错的。
1.图片优化，无损压缩
上传到shopify的图片最好是经过无损压缩再上传的，可以提高shopify加载速度（搜索image compressio)，不仅可以保留图片的画质，也可以让图片变得更小，更容易加载出来。
图像加载往往占网页总比重的50%—75%，并且随着商品增多呈指数级放大：每多一张图，浏览器就会多一次HTTP请求。
2.优化未使用的section
如果一些shopify模板里面的section模块你没有用到的话，其实是可以删除的，删除后会有效提高模板加载。
3.彻底清除shopify模板里面的无效插件代码
第一步先备份你的网站避免自己操作错误导致网站崩溃。
卸载掉shopify插件之后，需要彻底清除模板里面残留的插件代码，否则插件的影响依然存在，在shopify的模板里面找到theme.liquid里面搜索render找到过往不用的app代码删除，这样就可以彻底清除无效插件代码。
4.压缩css和js模块
针对shopify特定的模板可以使用，压缩模板局部代码提高shopify加载速度。
代码示例：
{{ 'theme.css' | asset_url | stylesheet_tag: preload: true }} —— 加上预加载指令。
对于 JS，确保使用了 defer 或 async 属性：<script src="xxx.js" defer></script>，这能防止脚本阻塞页面渲染。
注意：有些 2.0 主题已经默认开启了 minification，手动加参数前请先测试是否会导致布局错乱。
5.优化shopify blocking time代码模块
针对一些必要的插件使用特殊优化去处理响应时间，可以让页面先加载主要部分，一些在本页面不重要的资源就不加载。
在shopify里面，无论是安装插件还是一个模块，基本都是在整站运行的，但是假如说我们弹窗只需要他运行在主页，那么通过优化的形式让代码只在主页运行，那么其他不加载这个弹窗的页面就会相对更快一些。
{%- if template contains 'product' -%}
{% render 'product-special-optimization' %}
{%- endif -%}6.使用更加轻量的视频
尽量不要用youtube视频，传统的 YouTube 嵌入方式存在两大问题：一是代码臃肿，预加载机制会无故消耗带宽，导致网站变慢；二是缺乏灵活性，<iframe> 标签的固定尺寸会在手机或平板上难以完美适配。
解决方式是尽量用shopify的本地视频，并且本地视频最好是小于20MB的。
7.减少302重定向
使用链接检查工具检查网站的链接状态，尽量减少302重定向。
302重定向表示页面被临时移动，302重定向还会触发额外的HTTP请求并延迟数据传输。
可以用尖叫青蛙或者link broken detected插件来排查链接问题。
8.优化移动端结账加载速度
通过启用shopify payments的方式来启用Shop pay结账，通过Shop pay、Google pay结账的转化率比传统支付方式的零售店铺要高出1.91倍，根据一项外部研究，因为客户的支付速度更快。
传统支付方式的话客户要慢慢输入自己的信用卡信息，shopify payment的快速支付会让客户基本秒付。
五、如何深度优化shopify里影响速度加载的代码
如果在历经上述的方法后你还是没法成功的提高你的shopify网站速度，也许你需要更专业的深度代码优化，因为不同的模板写法不同，导致一些相同的方法不一定可以起效，可以随时联系我们获得帮助
速度优化的尽头是追求极致的转化率的提升，主流的模板因为功能复杂，很多客户不一定能用到所有的功能，但是这些功能会导致整体网站速度变慢，针对流量比较大的客户来说，如果加载速度慢，可以考虑通过shopify的Dawn模板原生开发一套适合自己的模板，加载速度最快，最适合自己的客户体验。看我们是如何通过为客户开发原生模板来实现转化率的提升吧~
Jixindesign专注shopify网站装修、开发以及深度的shopify网站优化。
六、留个课题
除了shopify网站的加载速度会影响网站的跳出率和客户转化率之外，另外一个非常影响网站转化率是什么？
延伸阅读
关于我们 · Shopify 官方认证合作伙伴
🔺常见问题
谷歌speed评分并不是越高越好，很多大牌子的网站也没有说会把网站速度优化到满分，优化速度的初衷是提高客户的网站加载体验而不是为了分数。一般速度在60+以上实际客户加载就在2-3秒左右就很不错了。大部分shopify网站速度只有20-30左右
除了通过上述的几种方式优化速度之外，我们会通过优化底层代码提高网站的加载速度，懒加载和DOM元素端的深度优化。重点降低LCP指标和Total blocking time的指标以及speed index的指标。
有一定因素，核心是2个点，1.是图片太大了导致的 2.是图片格式在代码层面需要固定尺寸，比如代码里面要固定1920*800像素，那你上传的图片也是这个规格，就可以降低一些lcp的影响从而优化shopify加载速度。
speed index显示的数字只代表一个参数，在shopify里面不代表实际客户的网站加载速度，比如speed index是8秒，不代表加载这个网站需要8秒，实际速度以实际的设备测速为结果。
通过shopify的底层Dawn模板开发一套适合自己网站的模板是最好的选择，根据需求订制的模板没有乱七八糟的功能，所有功能都是为了用户转化而生，代码的底层都很干净。