shopify站加载速度慢的诊断和优化

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

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

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

图片加速:

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

JS文件的加速和异步

  • 目前大多数Shopify的JS文件,都是通过自己的cdn的。
  • 必要的JS文件则应该是async加载,或者是defer加载。

CSS文件压缩和加速

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

2、这里其中一个最为影响的,也是Shopify无法干预的,则是所使用的主题。css文件,应该不是“很大,但是仍然有优化空间”。为什么仍然有优化空间呢?因为毕竟不是每个主题的每个css文件都会在自己的网站内用上。

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

可以打开自己的网站,然后右键inspect(审查),点击Network(网络),找到网站加载数据,可以通过这个手段查看自己的网站,找到最影响加载速度的图片/文件,这样子就可以基本判断出“为什么这么慢”的原因了。

如果不满意Shopify的网站速度,能怎么做呢?

我觉得“你不满意”是一个很伪命题的事情。因为目前Top 100的Shopify的Page Speed Insight的评分普遍都只有20分~40分左右。和大部分其它的Shopify网站是一样的。

追求速度极致的,只能自己写代码开发独立站,这个模式是最优解,但是需要投入的人力成本非常高昂,完全不值得。正如上述所说的,Shopify并不慢,这个已经得到了非常多网站的验证。慢的可能是所使用的主题。

使用Shopify建站的,我是不推荐再使用cloudflare这类proxy增加多一层缓存层的。个人认为必要性不强,甚至可能会伤害性能。而且同时可能会导致过多301重定向的浏览器ERROR(重定向是有阈值的,然后cloudflare这类服务如果开启了proxy模式,则可能会导致这个问题)。很多Top 100的网站有使用cloudflare和cloudfront是因为它们加载了一些其它插件和其它静态文件,所以才有使用的必要性。但是对于一个全新的shopify网站,我并不认为这是必须要做的。但是Cloudflare有一个很好的功能,能够自动压缩和缓存css/html和js文件,这个能够极大的增加网站速度。但是Shopify的CDN也是会做类似的事情的,不同的在于Shopify CDN可能并没有提供主题文件css的minify压缩。

👋 感谢您的观看!

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享