Shopify独立站速度优化手册，其他建站平台也可以参考

经常有客户跟我们抱怨Shopify的站点移动端分数低，不过我们自己建出来的站移动端可以做到平均分70分以上，这次我们就将优化经验共享给大家，里面也有一些其他建站平台通用的优化方案。

为什么需要做速度优化

速度是影响转化率的重要因素之一

无论是访客进入独立站还是浏览商品进行下单，快速的加载速度可以提高转化率。
根据hubspot的报告，AI 医疗保健软件公司 mPulse Mobile 的测试发现：

• 页面加载时间为 2.4 秒以内时，其转化率为 1.9％
• 3.3 秒时，转化率为 1.5％
• 4.2 秒时，转化率为不到 1.1％
• 超过 5.7 秒时，转化率为 0.6％

其他公司也获得类似的结果：

• 沃尔玛发现，页面加载时间每减少 1 秒，转化数就会增加 2％
• COOK 通过将页面加载时间减少 0.85 秒，使转化数提高了 7％
• Mobify 发现，首页加载时间每减少 100 毫秒，转化率就会提高 1.11％

用户体验是谷歌SEO的重要权重之一，而加载速度是用户体验的重要组成部分

原因也很好理解，Google自创建伊始，就一直以提供最佳用户体验为宗旨，不仅如此，Google还出了“谷歌十戒”作为企业文化的重要组成部分（点击蓝字可以了解关于谷歌SEO的相关内容）。

不过我们一定要清楚，加载速度是用户体验的影响因素之一，而不是唯一，我们的目的是为了用户体验提升而做性能优化，而不是一味的追求高分。

性能评判的依据

无论是Shopify站点还是Google Page Speed，背后都是使用LightHouse这个开源工具进行的打分。

如何看自己站点的分数

第1步：进入Shopify卖家后台

第2步：找到报告入口

第3步：查看速度分数报告

速度报告大意是说，Shopify用的也是谷歌家的LightHouse进行站点速度打分，不过我们是通过3个页面进行加权平均的出来的：主页，访问量最高的商品页，访问量最高的产品系列页面。Shopify也会将站点的速度和其他站点进行比较，如果发现上面说比其他站点的速度慢，那建议是需要优化站点的访问速度。

如何提高分数

在提高Shopify站点的速度评分，我们先要了解LightHouse是如何给站点打分的。

了解影响评分的指标

我们先看下Google测速工具的结果，工具链接可以点击蓝字访问：

从图中我们可以看到，Google速度评分指标主要是由以下组成：

1. FCP（First Contentful Paint）
2. SI（Speed Index）
3. LCP（Largest Content Paint）
4. TTI（Time to Interactive）
5. TBT（Total Blocking Time）
6. CLS（Cumulative Layout Shift）

如果你点击分数下面的“查看计算器”，还可以知道每个指标的权重；知道了权重之后，我们就可以优先处理权重高且分数低的指标，同时也可以知道要达到目标分数，哪些指标是拖了后退的。

如果是技术小伙伴，也可以直接点击每个指标下面的“了解详情”，获取指标背后的技术原理。不过这篇手册的目的是为了能快速将Shopify站点提高到一个标准值，有机会我们单独开技术篇详细拆解每个指标。

优化方向

知道评分指标之后，我们就要开始动手优化了。Google很贴心的提供了优化建议：

接下来我就按照指标的权重的优先级，分别介绍哪些方式可以有效提高Shopify独立站的指标分数，当然，Google提供的优化建议是优先采纳的。

TBT（Total Blocking Time，权重30%）

原文：TBT 测量页面被阻止响应用户输入（例如鼠标点击、屏幕点击或按下键盘）的总时间。总和是首次内容绘制和互动时间之间所有长时间任务的阻塞部分之和。任何执行时间超过 50 毫秒的任务都是长任务。50 毫秒后的时间量是阻塞部分。例如，如果 Lighthouse 检测到一个 70 毫秒长的任务，则阻塞部分将为 20 毫秒。
大白话：减少浏览器工作负担。

常用优化手段：

1. 移除第三方资源或者将第三方资源本地化
2. 减少JS执行时间
3. 最小化主线程工作
4. 优化模板代码。例，liquid避免多个嵌套的for循环

技术说明（可跳过）

根据浏览器的工作原理，浏览器线程工作的几个关键步骤为：

1. 解析页面和内联CSS（Parse HTML&CSS）
2. 构建DOM树
3. 构建CSSOM树
4. JavaScript 编译（Script Parsing&Compliation）
5. JavaScript执行评估（Script Evaluation）
6. 渲染（Rendering）
7. 样式和布局（Style&Layout）

Shopify站点是服务器渲染的，所以像是构建DOM、渲染等流程我们是可以不用太过关注的；这里我们需要关注的就是解析页面和JavaScript。

解析页面

Shopify模板会在服务器将这些变量填充好之后返回给前端，这部分是比较耗时的，所以一定要极力避免存在多个for循环这种复杂逻辑的代码。

JavaScript

另外一个拖慢反应速度的就是JavaScript，这部分内容主要来自于以下几个部分：

• Shopify APP引入。这部分可以通过移除不使用的APP进行解决。
• 第三方JS引入。这部分可以通过将不用的JS进行异步加载（async）或者延迟加载（defer），详细了解请戳
• 自己编写的JS。自己编写的JS相对可控，优化方案也很多，比如尽量使用原生JS语法，少用或者不使用jquery（$）。

LCP（Largest Contentful Paint，权重25%）

原文：LCP度量视口中最大的内容元素何时呈现在屏幕上。这类似于页面的主要内容对用户可见的情况。最大内容绘制 (LCP) 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。
大白话：页面上占位最大的资源越快显示越好。

常用优化手段：

1. 降低网络负载（单页面总资源最好到500kb以下）
   a. 压缩图片
   b. 压缩JavaScript
   c. 压缩CSS
   d. 压缩文本
2. 预先连接到资源服务器
3. 预加载关键请求
4. 提前准备后续页面需要的资源
5. 移除第三方资源或者将第三方资源本地化
6. 最小化关键请求深度
7. 卸载暂时不用的app
8. 清理APP的遗留代码

技术说明

要想让资源优先展示，记住要诀：“小资源，快连接”。获取的资源越小越好，这样浏览器可以快速将必须的资源就绪，越快就绪，展示也就越快；快连接就是提前和服务器资源建立链接，可戳上方蓝字了解详情。

同理，卸载和清理APP，也是为了减少不必要的资源下载和加载。

压缩资源工具推荐

• 压缩图片：TinyPNG，翼店的站点体检功能也有图片压缩小工具
• 压缩JavaScript：JSCompress
• 压缩CSS：CSS Compressor

CLS（Cumulative Layout Shift，权重15%）

原文：CLS 测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数。
大白话：不要出现页面元素抖动。

常用优化手段：

1. 图片元素加上width和height
2. 布局和占位在CSS提前确定好

FCP（First Contentful Paint，权重10%）

原文：FCP度量用户导航到您的页面后，浏览器呈现第一个DOM内容所需的时间。页面上的图像、非白色<canvas>元素和svg都被认为是DOM内容;iframe内的任何内容都不包含在内。
大白话：首屏加载越快显示越好。

常用优化手段同LCP一样，都是遵循“小资源，快连接”原则。

SI&TTI（Speed Index，权重10%;Time to Interactive，权重10%）

这俩指标被上面的解决方案覆盖了，所以谷歌也没有单列这俩指标的优化方案。可以通过详情了解Speed Index和Time to Interactive的指标优化手段。

其他优化小技巧

1. 使用jpg或者webp格式的图片
2. 图片懒加载
3. 脚本延迟或者按需加载
4. 视频延迟加载

总结

当然，如果按照以上常用的优化方式都没有很好的提高，那么可以找我们进行针对性的分析主题进行站点优化，通过博客右边的二维码可以咨询了解。

参考资料（不定期更新）

Shopify在线商店速度报告
提升店铺网站加载速度的四点建议
pagefly 页面速度优化
如何让 Shopify 网站更快