Shopify是一站式SaaS模式的电商服务平台，为电商卖家提供搭建网店的技术和模版，管理全渠道的营销、售卖、支付、物流等服务，而网站性能会直接影响你的网站转化用户的能力，如果你的网站速度越快，你就越有可能转化更多的用户，所以网站速度将影响来自所有这些不同渠道的用户，那么我们将如何提升Shopif独立站打开速度？
一、为什么网站速度很重要？
多项研究表明，网站速度会影响转化率（即用户完成目标操作的比率）。与速度较慢的网站相比，不仅更多用户停留在快速加载的网站上，而且他们的转化率也更高。许多公司发现页面加载时间减少几毫秒都会增加转化率：
- Mobify发现将其首页的加载时间减少100毫秒会导致基于会话的转换次数增加1.11％
- 将页面加载时间缩短一半后，零售商AutoAnything的销售额增长了12-13％
- 沃尔玛发现，将页面加载时间缩短一秒，可以将转换率提高2％
因此提高站点性能是优化转换率的重要组成部分，网站速度的好处还能体现到：减少用户弃单，更好的用户体验，提升站点在搜索引擎中的排名，减少用户跳出率等。
二、如何优化Shopify网站的速度？
通过执行下面这些步骤，你可以大大加快Shopify网站的打开速度:
- 选择一个轻量级的Shopify主题
- 减少大图片的尺寸
- 压缩图片
- 用静态图片取代GIF
- Lazy Load延迟加载图片
- 限制第三方JavaScript和Shopify应用程序
- 迁移跟踪代码到谷歌标签管理器
- 通过履行Google PageSpeed Insights指南来运行您的商店
1. 选择一个轻量级的Shopify主题：
选择一个轻量级的Shopify主题可立即让你的网站在性能上处于一个很好的位置，有些主题代码层面非常多，导致您的网站使用后直接影响速度。相反，更换一个更轻量的主题将为您的网站速度提升数倍。
2. 减少大型图片的尺寸：
调整大型图片大小是加快Shopify网站的最佳方法之一，在评估Shopify网站的时候，我们注意到很多网站都有使用大尺寸的图片，对于电商的主打产品，高清图片是有利于转化，在B2C当中更是如此，图片是突出产品的必需品。
虽然图片是改善商店用户体验和品牌形象的绝佳方式，但它们往往伴随着性能的折衷，图像文件通常比标准的HTML或CSS大得多，在页面上使用大量图片的结果可能是一个非常沉重的页面容量，与图片密集度较低的页面相比，用户需要更长的时间来下载。
解决方法：我们应该针对网站展示的尺寸，尽量不要全部使用没经调整的尺寸图片上传至网站。
3. 压缩图像：
当图片没有被压缩时，它们也可能是未被优化的。很常见的是，Shopify商店没有对上传的图片进行压缩，这导致了图片的大小超过了实际所需。
通过压缩图片，你可以确保你的图像文件大小比原始图像小得多。较小的文件大小将使浏览器更快地加载您的网站内容。
当涉及到图像压缩时，我们更喜欢使用这两种方法的组合。
Optimizilla：这允许你在上传到你的网站之前手动压缩大型图片资产。
Tinypng：在线图片压缩工具，使用智能有损压缩技术来减小图片文件的大小。
4. 用静态图片取代GIF：
不要使用GIF图片，GIF图片可以表示非常生动，因为它们为用户提供了更多的互动体验，而且可以帮助网站管理员从用户体验和品牌角度改善你的网站，但GIF图片过大也是导致影响Shopify速度之一
5. 懒惰的加载图像：
当通过PageSpeed Insights运行我们的Shopify网站列表时，我们发现最常见的建议之一是 “懒加载”。
由于许多Shopify网站使用大量的图片，使用懒加载是非常有用，这可以加快你的Shopify网站的速度，因为你的网站的所有图片不会一次性加载，只在用户向下滚动页面时加载。
6. 限制第三方JavaScript和Shopify应用程序：
如果一个Shopify商店使用大量的应用程序和第三方资源。这必然会导致浏览器进行大量的请求，类似于WordPress的插件，Shopify有 “应用程序”，可以让网站所有者轻松地将各种功能添加到他们的网站。
三、Shopify 速度为什么会慢？
1、代码脚本层面
统计代码过多
有一些统计代码必须要放在页面头部，否则无法完整监测用户行为，例如GA，如果我们要完整监测例如：跳出率等数据，它就必须要在页面内容呈现之前加载，根据上面的原理，它会阻塞页面内容加载。
举例：shopify中我们常见的一些统计代码有
Google Analytics (GA)：Google 最常用的数据统计工具
Google Tag Manager：更方便灵活的埋点管理，直接后台定义埋点行为，而不用每次新增埋点行为都在GA中发生，相当于GA升级版本，但是在shopify中，只有 shopify plus 才支持使用对交易行为进行监测，普通版本不支持。
Google optimize：Google AB Test 工具，用于控制页面跳转、页面内容AB版本显示（需要放在页面）
存在冗余代码
不要放在head中的脚本可以挪到 body 下
插件卸载以后，仍然有残留的代码，需要单独清理
2、内容层面（视频、图片）
图片
- 没有进行压缩、文件大小不合理，一般不超过 200kb
- 格式尽量使用 jpeg（有损压缩，体积小），不要使用png（无损压缩，体积大）。图片压缩工具通常可以使用 https://tinypng.com/
视频
- 资源过大需要压缩，页面商品陈列视频，尽量不超过 10mb
- 主图视频长图控制在 10s 内，< 5mb 最佳
- 尽量不直接引用 youtube视频，耗费网络请求资源较大；一定需要引用的，请减少数量。
文件引用服务器位置
- 尽量使用 shopify 自带的文件服务器，因为可以复用shipify 自己的cdn功能，提速网站，而不是复制一个网络资源路径
页面pc和移动端内容重复冗余
- 使用shopify构建页面，特别是使用类似 pagefly 等自定义页面工具，在做pc和移动版本是撇的时候，特别容易出现的一个现象是，将pc和移动版本分别做一套，然后使用隐藏属性去做自动呈现。在页面整体内容结构不多的情况下问题不大，但是一旦内容特别多，这会导致资源的翻倍引用，不仅页面dom模块暴增影响渲染性能，最大的时间支出会发生在网络资源请求上，因为虽然元素不显示，但是如果其中引用了资源，该资源仍然会被请求，占据网络加载时间。
不必要的内容过多
- 产品的内容表现，并不是堆砌内容，选取有最有价值的内容表现，来增强页面转化率。这需要借助一些用户行为分析工具，去观察哪些内容是有效，哪些是无效的，移除无效内容，减少页面资源。
- Shopify 每个页面实际上是有最大内容大小（文本+代码标签）限制的，最大是：256KB
