很多人会通过pagespeed.web.dev（一个google的网站测速工具）来判断自己的网站是不是太慢了。

首先，需要说明的是Pagespeed insight的评分是不稳定的，你测试10次，有的时候可能是80分，有的时候可能是20分，这都是很正常的。同时，如果你是Shopify，那么你就已经会面临一定的局限性。因为Shopify本身已经尽力他们自己最大的努力去优化你的网站。说明如下：

Shopify本身已经为网站提供了加速服务

1 - 图片加速：

1. Shopify会使用懒加载，有lazyload。
2. 图片全部都会经过Shopify的CDN，可以看到cdn.shopify.com
3. 图片经过不同宽度的压缩，可以看到链接上的{width}x.png，以及data-widths=[110,160...]

JS文件的加速和异步：

1. 目前大多数Shopify的JS文件，都是通过自己的cdn的。见下图。
   
2. 必要的JS文件则应该是async加载，或者是defer加载
   

3 - CSS文件压缩和加速

1. 尽量避免使用inline css。但是Shopify网站的inline css一般不会有很多的。这个是属于可以忽略的问题。如果是自己写代码建站，则需要注意这一点。

2. 这里其中一个最为影响的，也是Shopify无法干预的，则是你所使用的主题。下述例子中的主题，是Pipeline Theme / Groupthought Theme。这个主题包所生成的css文件抬头如下：可以看到“An unminified version of this CSS ...”，也就是说，目前production中的版本已经是被压缩过的版本。所以该css文件，应该不是“很大，但是仍然有优化空间”。为什么仍然有优化空间呢？因为毕竟不是每个主题的每个css文件你都会在自己的网站内用上。

如何查看哪个文件加载得慢？

1. 你可以打开自己的网站，然后右键inspect（审查），点击Network（网络），找到你的网站加载数据。这里拿Rankly.cn举例（该网站是NextJs搭建，并非Shopify。所以速度非常快），你可以看到各类文件和请求的加载速度在1ms至209ms。你可以通过这个手段查看自己的网站，找到最影响加载速度的图片/文件，这样子你就可以基本判断出“为什么这么慢”的原因了。

2. 这里拿Yeti（Shopify Top100榜单榜首），他的网站速度加载得非常慢。至少，在我的网络环境下是如此的。在通过上面的方式去查看的时候，我通过waterfall可以看得到，前面的250万ms前都是在加载clarity.ms，也就是说clarity ms极有可能是导致网络加载速度慢的元凶。

3. 通过上述方式去查看网站加载速度慢是比较合理的，也是我们程序员一般会使用的方式。但是部分请求速度就是会很慢（例如从后端服务器检索产品数据）。这类请求可能会慢至1～2秒。能够提升这个速度的方式就是使用边缘计算。在Shopify独立站领域，我们不会过多探讨例如边缘计算等这类前沿加速方式。因为这个都远远超出了卖家本身的能力以及资金范围。更不用提，Shopify本身就已经为每个网站使用了边缘加速。

转自-牛津小马哥