因?yàn)樽约汗竞蛨F(tuán)隊(duì)都是做獨(dú)立站的事情比較多，然后今天剛好有運(yùn)營(yíng)問我關(guān)于Shopify網(wǎng)站速度優(yōu)化的問題，我想了下，就在公司釘釘群里面寫了這個(gè)小教程。同時(shí)也發(fā)到知無(wú)不言上。下述內(nèi)容包含了

- 為什么我說shopify已經(jīng)提供了加速的服務(wù)
- shopify網(wǎng)站慢的話應(yīng)該關(guān)注哪些地方
- 如何判斷到底是什么東西導(dǎo)致網(wǎng)站很慢
?
正文如下：很多人會(huì)通過pagespeed.web.dev（一個(gè)google的網(wǎng)站測(cè)速工具）來判斷自己的網(wǎng)站是不是太慢了。

首先，需要說明的是Pagespeed?insight的評(píng)分是不穩(wěn)定的，你測(cè)試10次，有的時(shí)候可能是80分，有的時(shí)候可能是20分，這都是很正常的。同時(shí)，如果你是Shopify，那么你就已經(jīng)會(huì)面臨一定的局限性。因?yàn)镾hopify本身已經(jīng)盡力他們自己最大的努力去優(yōu)化你的網(wǎng)站。說明如下：


Shopify本身已經(jīng)為網(wǎng)站提供了加速服務(wù)

1?-?圖片加速：

1. Shopify會(huì)使用懶加載，有l(wèi)azyload。
2. 圖片全部都會(huì)經(jīng)過Shopify的CDN，可以看到cdn.shopify.com
3. 圖片經(jīng)過不同寬度的壓縮，可以看到鏈接上的{width}x.png，以及data-widths=[110,160...]



上述情況同樣適用于GIF動(dòng)圖。看下圖：

?
?
2?-?JS文件的加速和異步：

1. 目前大多數(shù)Shopify的JS文件，都是通過自己的cdn的。見下圖。

2. 必要的JS文件則應(yīng)該是async加載，或者是defer加載


3?-?CSS文件壓縮和加速
?
1. 盡量避免使用inline?css。但是Shopify網(wǎng)站的inline?css一般不會(huì)有很多的。這個(gè)是屬于可以忽略的問題。如果是自己寫代碼建站，則需要注意這一點(diǎn)。
?
2. 這里其中一個(gè)最為影響的，也是Shopify無(wú)法干預(yù)的，則是你所使用的主題。下述例子中的主題，是Pipeline?Theme?/?Groupthought?Theme。這個(gè)主題包所生成的css文件抬頭如下：可以看到“An?unminified?version?of?this?CSS?...”，也就是說，目前production中的版本已經(jīng)是被壓縮過的版本。所以該css文件，應(yīng)該不是“很大，但是仍然有優(yōu)化空間”。為什么仍然有優(yōu)化空間呢？因?yàn)楫吘共皇敲總€(gè)主題的每個(gè)css文件你都會(huì)在自己的網(wǎng)站內(nèi)用上。


?
如何查看哪個(gè)文件加載得慢？

1. 你可以打開自己的網(wǎng)站，然后右鍵inspect（審查），點(diǎn)擊Network（網(wǎng)絡(luò)），找到你的網(wǎng)站加載數(shù)據(jù)。這里拿Rankly.cn舉例（該網(wǎng)站是NextJs搭建，并非Shopify。所以速度非常快），你可以看到各類文件和請(qǐng)求的加載速度在1ms至209ms。你可以通過這個(gè)手段查看自己的網(wǎng)站，找到最影響加載速度的圖片/文件，這樣子你就可以基本判斷出“為什么這么慢”的原因了。


?
2. 這里拿Yeti（Shopify?Top100榜單榜首），他的網(wǎng)站速度加載得非常慢。至少，在我的網(wǎng)絡(luò)環(huán)境下是如此的。在通過上面的方式去查看的時(shí)候，我通過waterfall可以看得到，前面的250萬(wàn)ms前都是在加載clarity.ms，也就是說clarity?ms極有可能是導(dǎo)致網(wǎng)絡(luò)加載速度慢的元兇。



3. 通過上述方式去查看網(wǎng)站加載速度慢是比較合理的，也是我們程序員一般會(huì)使用的方式。但是部分請(qǐng)求速度就是會(huì)很慢（例如從后端服務(wù)器檢索產(chǎn)品數(shù)據(jù)）。這類請(qǐng)求可能會(huì)慢至1～2秒。能夠提升這個(gè)速度的方式就是使用邊緣計(jì)算。在Shopify獨(dú)立站領(lǐng)域，我們不會(huì)過多探討例如邊緣計(jì)算等這類前沿加速方式。因?yàn)檫@個(gè)都遠(yuǎn)遠(yuǎn)超出了賣家本身的能力以及資金范圍。更不用提，Shopify本身就已經(jīng)為每個(gè)網(wǎng)站使用了邊緣加速。

如果你不滿意Shopify的網(wǎng)站速度，你能怎么做呢？

1. 第一，我覺得“你不滿意”是一個(gè)很偽命題的事情。因?yàn)槟壳癟op?100的Shopify的PageSpeed?Insight的評(píng)分普遍都只有20分～40分左右。和大部分其它的Shopify網(wǎng)站是一樣的。詳情可以看rankly.cn上的榜單。
?
2. 追求速度極致的，只能自己寫代碼開發(fā)獨(dú)立站，這個(gè)模式是最優(yōu)解，但是需要投入的人力成本非常高昂，完全不值得。正如上述所說的，Shopify并不慢，這個(gè)已經(jīng)得到了非常多網(wǎng)站的驗(yàn)證。慢的可能是你所使用的主題。如果真的決定要自己寫代碼的話，我個(gè)人目前僅推薦NextJs和Gatsby。Gatsby有CMS的整合，而NextJS的速度和整體性能比gatsby更快（尤其是nextjs?v12）。作為一個(gè)使用過各類前端框架的人而言，我能推薦的就是上述二個(gè)，盡管我自己用得最多的是nuxt。

3. 使用Shopify建站的，我是不推薦再使用cloudflare這類proxy增加多一層緩存層的。個(gè)人認(rèn)為必要性不強(qiáng)，甚至可能會(huì)傷害性能。而且同時(shí)可能會(huì)導(dǎo)致過多301重定向的瀏覽器ERROR（重定向是有閾值的，然后cloudflare這類服務(wù)如果開啟了proxy模式，則可能會(huì)導(dǎo)致這個(gè)問題）。很多Top?100的網(wǎng)站有使用cloudflare和cloudfront是因?yàn)樗麄兗虞d了一些其它插件和其它靜態(tài)文件，所以才有使用的必要性。但是對(duì)于一個(gè)全新的shopify網(wǎng)站，我并不認(rèn)為這是必須要做的。但是Cloudflare有一個(gè)很好的功能，能夠自動(dòng)壓縮和緩存你的css/html和js文件，這個(gè)能夠極大的增加你的網(wǎng)站速度。但是Shopify的CDN也是會(huì)做類似的事情的，不同的在于Shopify?CDN可能并沒有提供主題文件css的minify壓縮。