因為自己公司和團隊都是做獨立站的事情比較多，然后今天剛好有運營問我關于Shopify網(wǎng)站速度優(yōu)化的問題，我想了下，就在公司釘釘群里面寫了這個小教程。同時也發(fā)到知無不言上。下述內(nèi)容包含了

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

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


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

1?-?圖片加速：

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



上述情況同樣適用于GIF動圖。看下圖：

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

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

2. 必要的JS文件則應該是async加載，或者是defer加載


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


?
如何查看哪個文件加載得慢？

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


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



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

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

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

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