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）；
