SHOPIFY店舖網速優化
最近很多賣家朋友詢問我關於Shopify網站速度相關的問題,我也都針對情景一一做了簡單回答,但未免有些倉促,只言片語,太過簡要,可能未能幫到大家,還請見諒。剛好藉此機會寫了一篇關於Shopify店舖網速優化的總結,希望能解決大家的問題,僅供參考。
在聊具體如何優化網站速度之前,我們先來分析下影響網站速度的因素,之後我們才能從各個影響因素進行針對性的優化。目前多數網站是由域名、空間服務器、 DNS域名解析、網站程序、數據庫等組成。當然,我們今天的主角是Shopify網站,先打個廣告,順便幫大家再熟悉下Shopify:
Shopify作為一個建站SAAS軟件,可以說是做到了極致:為用戶解決了服務器硬件託管、服務器維護、程序代碼維護等問題,用戶只需要提供一個域名就可以發布自己的店鋪,另外,模板建站&自定義代碼修改,豐富的APP市場、CDN加速、SEO友好、規範完備開放的API接口,主流支付、物流等第三方服務打通,多渠道Amazon、Facebook、Messenger同步,FB Pixel & GA接入、完善的Help center文檔+Shopify Academy+Shopify blog內容建設助力賣家成長等等等等,穩定性,可靠性、易用性,擴展性都做到了極致,綜合來說是做獨立站的首選,既適合初級賣家簡單套模板三五個小時完成店鋪搭建,又適合高級玩家各種功能擴展、樣式修改、各種DIY。
劃重點:1)Shopify店舖的服務器是託管式的,由Shopify統一部署和管理,所以服務器角度,我們能做的不多;2)Shopify使用模板建站,即網站程序主要包括模板文件和模板解析這一套程序;3)賣家可以通過安裝APP來實現某些需求;4)賣家可以通過自定義修改代碼來實現某些需求;5)我們需要購買一個自定義域名,然後綁定到店鋪方便用戶訪問。
所以,針對Shopify網站,我們可以從以下八個方面來進行網速優化:
- 選擇性能優異的模板,建議大家在安裝模板前先對模板進行測速,盡量確保在未安裝APP、未填充網站素材前網站速度控制在2.5S以內。 Shopify模板目前主要有兩個來源:1)Shopify模板市場,包括10套免費+64套付費共74套模板,此類模板都是經過Shopify官方審核通過才能發布的,代碼質量以及對theme editor的兼容都做的很好,大家大可不必擔心網速過慢問題;2)非官方模板,比如,來自模板森林的模板,對於此類模板,建議大家在安裝前要進行網速測試。
- 盡量少安裝APP ,由於APP的功能一般都是通過大量JS代碼實現的,而JS代碼則會大大影響網頁打開的速度,所以,建議盡量少安裝APP,除必需APP如Product review、SEO優化類、在線客服類等之外,其他的盡量少安裝;
- 自定義代碼要規範,有時我們需要為實現店鋪某些特定需求而額外開發功能,建議在進行代碼編輯時,盡量在原模板框架基礎之上進行,比如,額外開發的CSS代碼盡量統一放入theme css庫中而不是直接寫到行內,可以重複利用的模塊或功能盡量寫成snippet,後期通過include可以多處調用;
- 壓縮填充網站的素材,比如圖片、視頻和音頻等,Page size主要包括代碼+素材,除代碼size之外,我們需要控制好素材內容的大小。所以,在不影響素材展示效果前提下,我們還是要對素材進行壓縮,比如,圖片素材在上傳至網站前可以使用https://tinypng.com/進行壓縮,盡量保證banner圖單張大小在2M以內,商品圖單張在500K以內;
- 從大廠購買域名,雖然也說不出從不同域名提供商註冊域名有什麼差別,但為了避免後面出現麻煩,盡量還是選擇比較知名的幾家吧:阿里雲【國內知名】、Namecheap【口碑最好】、Godaddy【全球最大】、Namesilo【性價比高】。
- 使用Google Tag Manager收集數據,Google Analytics和FB Pixel或者其他的一些數據/轉化率/用戶路徑收集記錄的JS tracking tags,安裝到網站之後會影響網站的打開速度,建議使用跟踪代碼管理系統(TMS) ,將所有的跟踪代碼壓縮到一個JavaScript請求中,減輕網站時間和資源的負擔。
- 減少重定向和死鏈數量,過多的重定向和死鏈會影響網站速度和SEO排名。 1)對於重定向:建議替換302 redirects為301 redirects(Shopify後台Navigation模塊); 2)對於死鏈:網站圖像,CSS和JS文件的鏈接斷開會增加HTTP請求並影響您的網站速度,建議使用Broken Link Checker移除死鏈;
- 幾項網站內的優化:1)謹慎使用Pop-Up類彈窗如quick view等;2)減小縮略圖尺寸,使用Shopify的內置image size parameters ,另外支持Lazy load和srcset的模板可設置開啟; 3)首頁大banner輪播圖數量不要太多,控制在2-3個左右,過多會影響網站速度。
另外,我說一下關於網站測速,因為使用不同測速工具,在不同環境下進行的網站測速結果都會有差異,我們需要在一套標準/規則一定條件下進行測速。
- 測速工具很多: http:// pingdom.com 、 PageSpeed Insights 、 http:// gtmetrix.com 、uptrends,建議綜合多次測量後取平均作為參考;
- 要選擇你網站目標受眾所在地區的服務器進行測速,假如你的客戶在美國,很顯然,選擇中國地區的服務器來測試就不具有參考價值;
- 有很多客戶反饋,在國內打開自己的Shopify店鋪會很慢,翻牆了也是。大家不用太擔憂,因為在國內測試Shopify店鋪影響因素太多了,比如,網絡環境占主要,其次翻牆/不翻牆測試,使用不同的翻牆軟件,不同設備測,都會有差別。建議還是以測速工具結果為準,如果還是不放心,有條件的可以盡量模擬目標市場的真實用戶進行網站速度測試;
- Uptime check,可以用來檢查你的網站在全球範圍內的運行狀態(up/down);