如何用免備案CDN加速解決Shopify頁面速度慢的問題？

Shopify網(wǎng)頁打開速度慢會增加訪客的跳出率。我們可以用一些專業(yè)的網(wǎng)站測速工具來檢測網(wǎng)站打開速度，繼而有針對性地采取優(yōu)化提速措施。

影響網(wǎng)站打開速度的因素除了網(wǎng)站本身之外，還和服務(wù)器有很大關(guān)系。我們先介紹一下Shopify的服務(wù)器吧。教用免備案CDN加速解決Shopify頁面速度慢？

1Shopify的服務(wù)器

Shopify硬件服務(wù)器主要在美國華盛頓和芝加哥，同時(shí)云服務(wù)器是在亞馬遜云和谷歌云上，但是這些服務(wù)器的位置，對網(wǎng)站的訪問速度影響不大，因?yàn)镾hopify整個(gè)框架是建立在免備案CDN（Content Delivery Network）上的。有了CDN之后，Shopify會把它所有的網(wǎng)站資源推送到各地有CDN服務(wù)器的部署點(diǎn)上。全世界所有有CND服務(wù)器的地方，都會有Shopify的相關(guān)資源。

比如一個(gè)來自美國加州的客戶訪問你的店鋪時(shí)，他其實(shí)是從加州的CDN的服務(wù)器上去下載所需要的內(nèi)容，并不是在店鋪?zhàn)运诘亍?/span>

上面就是免備案CDN內(nèi)容分發(fā)服務(wù)器的作用。它保證了所有全球各地的客戶都能從就近的服務(wù)器上打開你的Shopify店鋪，也就是說，大部分情況下，你的Shopify店鋪在全世界的訪問速度都是有保證的，只要那個(gè)地方部署了免費(fèi)CDN服務(wù)器。

2網(wǎng)站的測速工具和使用方法

Shopify的加載速度整體偏慢一些，一般來說測速會發(fā)現(xiàn)評分都不高，那么我們就要著手進(jìn)行優(yōu)化網(wǎng)站訪問速度了。我為大家介紹五個(gè)常用的測速工具。這些工具的操作流程大體類似，我將以Google pagespeed insights為例。

1.Google pagespeed insights

Page Speed Insights是根據(jù)”載入不需卷動(dòng)位置時(shí)間”及”載入完整網(wǎng)頁時(shí)間”來評測網(wǎng)頁打開速度，針對PC端和移動(dòng)端會有不同的數(shù)據(jù)。

https://developers.google.com/speed/pagespeed/insights/

第一步：進(jìn)入PageSpeed Insighs網(wǎng)站首頁，輸入網(wǎng)站網(wǎng)址，點(diǎn)擊“分析”。

第二步：查看檢測結(jié)果和優(yōu)化建議

Pagespeed insights從“速度”和“最佳化”兩個(gè)維度給出評分。有四個(gè)指標(biāo)，如下圖。FCP指的是用戶進(jìn)入網(wǎng)站時(shí)看到畫面呈現(xiàn)的第一時(shí)間，即使網(wǎng)站并未完全讀取完畢，能夠看到網(wǎng)站的文字或圖片讀取有所進(jìn)展，能夠讓客戶滿足改善用戶的瀏覽體驗(yàn)。

后面會自動(dòng)給出優(yōu)化方案，大家可以根據(jù)它的方案，具體優(yōu)化加載速度！

2.Tools.pingdom.com

Pingdom從多方面測試網(wǎng)站，可以測試網(wǎng)站加載速度，也可以對頁面和大小進(jìn)行分析。我們可以查看詳細(xì)的測試報(bào)告，幫助用戶找出影響網(wǎng)站速度的因素如圖片、CSS等，并給出詳細(xì)的優(yōu)化網(wǎng)頁性能的方案。

3.Webpagetes

Webpagetest原來由AOL開發(fā)的供內(nèi)部使用的工具，后來開源，總體上說是一款網(wǎng)頁前端性能測試工具。Webpagetes的特色在于可以分國家測試網(wǎng)站加載速度，還可以從瀏覽器和手機(jī)系統(tǒng)（IOS/Android）系統(tǒng)的維度測試網(wǎng)站加載所花費(fèi)的時(shí)間。

4.GTmetrix

GTmetrix也是一款常用的網(wǎng)站測速分析工具，操作頁面簡潔，功能強(qiáng)大，因此受到了很多大型網(wǎng)站的歡迎，比如PayPal、耐克和惠普等。

GTmetrix操作簡單，輸入網(wǎng)址或URL點(diǎn)擊“Analyze”。我們以chinabrands.com為例，測試了該網(wǎng)站的速度。測試結(jié)果以6個(gè)維度的形式呈現(xiàn)，分別是網(wǎng)頁速度、YSlow、瀑布圖、網(wǎng)頁加載速度、頁面加載視頻、和報(bào)告歷史。

非會員可以直接使用GTmetrix測試，默認(rèn)是從加拿大節(jié)點(diǎn)進(jìn)行網(wǎng)站測速。注冊免費(fèi)賬號之后，可以使用的功能更多，可以選擇7個(gè)不同節(jié)點(diǎn)測速，也可以選擇瀏覽器（Chrome或Firefox）查看測試結(jié)果。

5.Dotcom-tools

Dotcom-tools的強(qiáng)大和特別之處即，我們可以在這個(gè)網(wǎng)站查看全球各個(gè)地區(qū)打開我們網(wǎng)站的時(shí)間，可以查看你網(wǎng)站在全球的速度怎么樣。當(dāng)然和上述測速網(wǎng)站一樣，操作簡單，不用注冊會員就可以使用。

3提升Shopify網(wǎng)站訪問速度的技巧

1.優(yōu)化圖片

一個(gè)網(wǎng)站需要提速我們想到的第一條就是優(yōu)化圖片。Shopify應(yīng)用商城有關(guān)于圖片壓縮的app，搜索Image Compression就可以搜到。我們可以將它裝在Shopify后臺,然后定期地對自己店鋪的新圖片自動(dòng)壓縮，壓縮完之后，你的店鋪訪問速度應(yīng)該會提高很多。

2.優(yōu)化JS代碼

這個(gè)可能需要懂一點(diǎn)計(jì)算機(jī)基礎(chǔ)知識才好操作。把一些JS代碼，請求合并成一個(gè)文件或合并在一起，可以減少向JS服務(wù)器發(fā)送請求次數(shù)。

3.卸載過慢的shopify app

有一部分免費(fèi)CDN加速的app，它們的加載速度很慢，我們建議所有賣家安裝免費(fèi)app時(shí)最好進(jìn)行一下測速，安裝之前測一下，安裝之后測一下，再對比一下速度，看一下這個(gè)app有沒有對你的店鋪訪問速度有特別明顯的影響。

4.延緩圖片的加載

我們可以這樣設(shè)置：在客戶翻到了你的圖片時(shí)，才去加載圖片。這也可以提高你的網(wǎng)站的加載速度。