在搜索引擎優(yōu)化方面，快速的頁面速度和良好的網站性能是在電子商務世界中取得成功的關鍵因素。網頁加載緩慢會導致跳出率變高，用戶參與度降低，流量減少，從而對您的銷售轉化產生不利影響。

從Google / SOASTA研究數據便可看出加載速度減慢的影響：

因此，您的網站需要擁有足夠快的頁面加載速度，避免過高的跳出率和傷害用戶體驗，從而抓住每一個銷售線索。

?

下文內容將介紹如何提高Shopify電商網站的加載速度。

首先我將推薦幾種在線工具，以快速幫您分析網站的速度問題，參考工具給出的優(yōu)化建議將能最大化提升工作效率。

工具一? PageSpeed Insights

PageSpeed Insights工具是Google官方推薦的測速分析工具，GA中報告中“speed suggestion”也是引用的該工具的數據。它可按移動端和桌面端的設備進行劃分，生成對應的PageSpeed得分和PageSpeed建議，盡可能的幫助網站提升加載速度，例如：

●優(yōu)化圖像尺寸和格式

●縮小CSS

●縮小JavaScript

●清除首屏內容中阻止呈現的JavaScript和CSS

●利用瀏覽器緩存，減少服務器響應時間

●避免目標網頁重定向

●Gzip壓縮

示例：移動端端加載速度報告

示例：桌面端加載速度報告

Google還建議通過Test My Site Tool工具來運行您的網站，在這里您可以分析移動設備的友好程度和移動設備的頁面速度。前往“Test My Site”進行嘗試。

輸入您的網站網址，工具會掃描您的網站并花幾分鐘進行評估。您還可以通過點擊“GET MY FREE REPORT”按鈕并輸入電子郵件地址以獲得免費的詳細報告。

工具二：GTMetrix

GTmetrix是另一個比較受歡迎的免費分析工具，他會分析您的頁面速度性能并從A到F對網頁進行評分，然后提供優(yōu)化建議。

通過單擊“waterfall”選項，我們還可以看到頁面每個請求完成的確切時間。

工具三：Pingdom

Pingdom將免費測試您的網站的加載速度，并提供有關如何優(yōu)化加載速度的建議。

Accelerated Mobile Pages（簡稱AMP）是一個開源項目，旨在供任何發(fā)布者在移動設備上創(chuàng)建快速加載的網頁。據調查，超過50％的購物者將使用移動設備進行購物，因此確保您的網站是移動友好型且可快速加載是非常重要的。

?

AMP的工作原理簡單的可以總結為：代碼減負+緩存預加載，所以借助AMP技術，用戶可以在移動設備上快速訪問您的網站。在Shopify中，推薦使用AMP by Shop Sheriff、FireAMP或是RocketAmp等App來快捷輕松的生成AMP頁面，這些應用在Shopify應用商店上均獲得四星級以上的評分。如果不使用App，那您則要考慮創(chuàng)建Shopify API來開發(fā)這些AMP頁面。

Shopify允許您添加以下圖像格式：

●JPEG或JPG

●漸進式JPEG

●PNG

●GIF

圖像壓縮很重要，也是更快加載網頁的必要條件。在進行圖像優(yōu)化時，請確保圖像尺寸在可接受的范圍內，并且不要在單個頁面上添加太多圖像。在執(zhí)行圖像壓縮時，首先確保圖像的質量不被損壞，不影響感官體驗。

?

對于需要新上傳的圖片，推薦使用免費工具如tinypng.com或tinyjpg.com來減小圖像的大小。示例如下圖：這個工具為我節(jié)省了71％，總共節(jié)省了286KB。

用優(yōu)化版本替換所有圖像后，頁面加載時間將自動縮短。

?

對于Shopify商店中的現有圖像，您還可以使用Crush.pics或Image Optimizer等APP壓縮圖像文件而不會造成質量損失。

事實是，網站存儲速度主要取決于網站主題，因此，在選擇安裝主題之前，建議可以檢查以下內容：

●尋找一個快速響應的主題；

●通過Google PageSpeed Insight測試模板的預覽頁（首頁、產品頁等）

確認主題后，請記住需要定期更新，維持最新版本。

通過Shopify下載的大多數應用程序都會向您的商店添加一些JavaScript / CSS文件。這樣就會存在一個問題，如果您不使用該應用程序，JavaScript / CSS文件也會在后臺運行，從而使網站性能降低。

因此，建議盡可能卸載那些不必要的，或效果不佳但忘記刪除的APP。

使用GiftOfSpeed的“HTTP Requests Checker”工具可以找出您的頁面發(fā)出的HTTPS請求總數。您可以通過執(zhí)行以下操作減少HTTP請求：

●合并和內聯CSS腳本；

●內聯較小的JavaScript；

●合并所有JavaScript；

●盡量減少使用設計和功能圖像；

●CSS圖片精靈(Image Sprites)。也就是將多個小的背景整合在一張圖上,這樣就可以減少瀏覽器向服務器請求的次數,可以提高網頁的加載速度；

●將圖像轉換為Base64代碼；

●限制社交按鈕的數量；

如想了解更多，可參考這篇文章How to make fewer HTTP requests。

文章鏈接：https://www.giftofspeed.com/fewer-http-requests/

如果網站存在過多的重定向和斷開的鏈接，那就可能出現性能問題，也會影響爬蟲抓取網站的效率。

針對重定向

不必要的重定向會導致性能和速度問題，這可能會影響網站的整體加載時間。在Shopify中，您可以通過內置的重定向功能“URL redirect”來設置301跳轉。

針對404錯誤鏈接

網站上存在斷開的死鏈會增加不必要的HTTP請求并帶來不良的用戶體驗。那么如何快速查找并修復網站的錯誤鏈接呢？推薦幾款免費的工具，例如Broken Link Checker和Xenu。

通常情況下，您需要為Google Analytics、Google Ads Conversion、廣告平臺像素、事件跟蹤目標和再營銷標簽等添加單獨的跟蹤代碼，或者將其交給網站開發(fā)人員來設置，此過程將耗費很多時間，最終會降低整個網站的性能。

推薦使用Google Tag Manager代碼管理工具，可以方便的統一管理這些第三方代碼，不用網站開發(fā)人員再去一遍一遍改動頁面代碼，直接在GTM中便可修改、測試和發(fā)布。

聯系小編可獲取GA&GTM數據分析的案例和服務。

Slider滑動條已經流行了很長一段時間，電商網站的首頁banner都喜歡添加多張高質量的圖像，但這無疑增加了網站的整體加載時間。

而下面這些研究表明是時候該放棄它了：

●用戶基本不會點擊滑動條，只有1％的人實際點擊了滑動條；

Source：https://www.newdesigngroup.ca/website-design/home-page-sliders-carousel/

●滑動條/輪播會煩擾用戶并降低可見度；

Source：https://www.nngroup.com/articles/auto-forwarding/

●滑動條/輪播對SEO不利；

Source：https://searchengineland.com/homepage-sliders-are-bad-for-seo-usability-163496

●滑動條對于移動端訪問不友好；

Source：https://krogsgard.com/2013/sliders-suck/

●滑動條將您的內容下推（頁面布局算法的改進）；

Source：https://webmasters.googleblog.com/2012/01/page-layout-algorithm-improvement.html

建議大家使用Hero image來代替輪播圖。例如下面這幾個網站都是使用的單個Banner圖：

●Dropbox

●Apple

●Colourpop

什么是hero image？

Hero image是網頁設計中一種特定的術語，也是目前最流行最引人注目的網頁設計趨勢之一。根據Wikipedia的說法，它是“大的網頁橫幅圖像，通常放置在網頁上，通常位于正面和中央。”Hero Image是網站上訪問者的第一個視覺圖像，它概述了該網站最重要的內容內容，通常由圖像和文本組成，并且可以是靜態(tài)或動態(tài)的。

從這些簡單實用的技巧開始，可以立即提高Shopify網站的頁面加載速度。如果您有其他更好的想法，可在評論區(qū)留言分享。