Shopify 速度優化：11 種有效方法（2023 年）
在電子商務世界——網站速度很重要！
無論客戶是在電腦上還是在移動設備上瀏覽您的網站，他們都希望在整個購買過程中獲得無縫體驗。
是的，人們在手機上耐心等待網站加載的 2G 互聯網時代已經一去不復返了。在過去幾年中，互聯網速度顯著提高，您的客戶的期望也隨之提高。
考慮到這些趨勢，Shopify 速度優化已成為所有店主取得成功的關鍵因素。
本文將幫助您了解如何衡量 Shopify 頁面速度、優化您的 Shopify 商店的重要性以及提高您的 Shopify 商店速度的有效方法。
目錄
為什麼要提高 Shopify 頁面速度？
如何測量 Shopify 頁面速度？
提高 Shopify 商店速度的 11 種有效方法
Shopify 速度優化：重要說明
準備好加速您的 Shopify 商店了嗎？
關於 Shopify 速度優化的常見問題解答
為什麼要提高 Shopify 頁面速度？
您的 Shopify 商店速度會影響兩個重要方面：
- 用戶體驗 (UX)：現在沒有人喜歡等待。如果頁面加載時間過長，客戶可能會失去耐心並放棄購買、離開您的網站或在購買過程中產生負面情緒。
所有這些方面都會直接影響以下一些關鍵因素：
- 轉換率
- 跳出率
- 品牌認知
- 谷歌搜索排名 (SEO)：谷歌的 Core Web Vitals 是一個信號指南，它決定了影響網站搜索排名的因素。速度是影響 SEO 的因素之一，可以使用 Google PageSpeed Insights 工具對其進行驗證。但這並不是說您在 SEO 工作中應該只關注頁面速度。請記住，您網站內容的相關性在 Google 搜索排名中仍然扮演著重要角色。
Unbounce對 750 名消費者進行了一項調查，發現近70% 的消費者表示網站速度會影響他們從在線商店購買的意願。
在另一項對 188 名營銷人員進行的有趣研究中，Unbounce 發現85% 的營銷人員登陸頁面速度低於谷歌建議的 5 秒或更短的 3G 連接速度。
如何測量 Shopify 頁面速度？
在考慮 Shopify 的速度優化時，您首先需要檢查的是網站速度的持續趨勢。
不僅要為電腦測量網站速度，還要為移動用戶測量網站速度。以下是 Skilled 基於多項研究的有趣發現：
64% 的移動用戶希望網站在四秒內完成加載，而 47% 的在線購物者希望網站在兩秒內完成加載。
現在，有多種方法可以檢查您的 Shopify 商店的速度得分。讓我們帶您了解幾個重要的方法：
通過 Shopify 後台檢查您的商店速度
您可以按照以下步驟在 Shopify Admin 中查看您的商店速度：
1. 轉到Shopify 後台並點擊在線商店>主題。在當前主題部分上方，您將能夠看到您商店過去 7 天的速度得分，以及與 Shopify 上其他類似商店相比的速度得分（好/慢）。
2. 要獲得更詳細的報告，請點擊當前主題上方顯示速度分數的選項卡。您將能夠通過以下方式查看詳細報告：
- 頁面類型明智的報告
- 隨時間變化的速度得分（過去 7 天/30 天）
- 事件的每日得分
Shopify 的分數基於 Google Lighthouse 性能指標，具體如下：
- 90 到 100：好
- 50 到 89：需要改進
- 0 到 49：差
使用 PageSpeed Insights 測試您的商店速度
Google 的 PageSpeed Insights 是最流行的商店速度分析工具之一。2018 年，谷歌宣布 Pagespeed Insights 將由 Lighthouse 提供支持。因此，您可以在 PageSpeed Insights 工具中獲取 Lighthouse 分析。
如何使用 PageSpeed Insights：
1. 轉到 Google 的PageSpeed Insights工具
2. 輸入網頁的URL
3. 點擊“分析”按鈕
現在，讓我們以同一家 Shopify 商店為例，根據 Shopify 的在線商店速度報告，該商店的速度得分為 31。
正如您在上面所看到的，它給出了您網站的性能、可訪問性、最佳實踐和SEO分數的總體概念- 包括移動版和桌面版。
提高 Shopify 商店速度的 11 種有效方法
在我們跳轉到優化 Shopify 商店速度的不同方法之前，重要的是要知道影響 Shopify 頁面速度的因素有很多，而且並非所有因素都在您的控制之下。
因此，這些因素分為兩大類：
不可控因素：
- 客戶的設備、網絡或位置問題
- Shopify 的基礎設施
- 本地瀏覽器緩存和服務器端緩存
- content_for_header Liquid 對象裡面的資產
- 內容分發網絡 (CDN)*
- *注意：雖然這對大多數 Shopify 店主來說是不可控因素，但如果您使用GemPages，則可以消除此問題。GemPages 與 UploadCare 和 AWS 合作以加速您的內容。
可控因素：
- Shopify 應用及其功能
- 主題及其特點
- 複雜或低效的 Liquid 代碼
- 圖片和視頻
- 字體
現在，讓我們看看如何根據可控因素，使用一些最佳實踐來提高 Shopify 商店速度：
1.刪除您不使用的 Shopify 應用
Shopify 應用程序必不可少。它們有助於添加功能、增強風格並提高商店績效。
但是擁有太多應用程序會降低您的網站速度。特別是用於在您的網頁上顯示信息的面向客戶的應用程序，可能會影響您的商店速度。
所以，問問自己一個問題——您真的需要安裝的所有應用程序嗎？
然後，保留所有必備的 Shopify 應用程序。重新評估那些只添加花里胡哨的東西，如果有的話。並刪除那些不會為您的業務增加任何價值而只是向您的網站添加一些代碼行的內容。
2.為您的 Shopify 商店安裝一個快速加載、響應式主題
為您的 Shopify 商店選擇正確的主題必須是最關鍵和深思熟慮的決定之一。為什麼？因為您的 Shopify 主題是影響網站速度的關鍵因素之一，並且您不會每天都更改主題。
以下是選擇主題時需要考慮的一些事項 –
- 風格與性能之間的平衡：
雖然速度顯然是一個重要因素，但事實是，您還需要考慮與品牌風格和內容要求相匹配的主題。查看演示商店的樣式和速度和性能的評論。確保您的主題在所有設備上都能完全響應。
- 嘗試並測試您的主題：
在您最終確定您的主題之前，您必須測試它是否符合您的期望，尤其是當您購買付費主題時。Shopify 主題商店的好處是您無需購買主題，直到您發布它。
如果您正在尋找免費主題，Shopify 最近推出了許多具有 Online Store 2.0 功能的免費主題。Dawn是專注於速度的免費主題之一，它旨在為所有瀏覽器創造出色的體驗。
- 安裝最新的許可版本：
這看起來很明顯，但一些新的 Shopify 店主仍然犯了這個錯誤。如果您僱用某人來創建和設計您的商店，請確保他們安裝的是最新版本的主題，而不是高級主題的過時或盜版副本。
- 升級你的主題：
定期檢查主題開發人員更改日誌，並在啟動任何重大更新時升級您的主題。
3.上傳前優化圖片和視頻
圖片和視頻可幫助您表達品牌信息和情感。
雖然您希望通過圖像和視頻使您的網站和內容看起來更加豐富，但您還需要注意它們如何影響您商店的速度。
圖像優化
推薦的圖像格式
使用圖像格式轉換器：
如果您沒有 WebP 格式的圖像，您可以使用 CloudConvert.com 之類的 WEBP 轉換器將 PNG 或 JPG 圖像轉換為 WEBP 圖像文件。
使用 JPG to WebP Converter，四張總大小為 830 KB 的 JPG 圖片被縮減為總大小為 327 KB。
壓縮和調整圖像大小：
如果您想使用 JPG 或 PNG 文件格式，但圖像文件太大，可能會影響您的頁面加載速度。強烈建議在需要時壓縮或調整圖像大小。要壓縮 PNG 圖像，您可以使用compresspng.com和compressjpeg.com等在線工具來壓縮 JPG 圖像。
視頻優化
首先，讓我們看看基礎知識。在 Shopify 中為您的產品上傳視頻有兩種方法：
1. 上傳視頻文件
2. 嵌入 YouTube 或 Vimeo 視頻連結
對於上傳視頻，以下是 Shopify 標準：
- 視頻長度：最長 10 分鐘
- 視頻大小：最大 1 GB
- 視頻分辨率：高達 4K（4096 x 2160 像素）
- 視頻文件類型：.mp4 或 .mov
但是，我們建議嵌入 YouTube 視頻，因為它不需要滿足這些條件，而且還可以幫助您優化存儲速度。
4.使用系統字體
我們中的許多人都喜歡使用特定的字體。但請記住，當您最喜歡的字體不常見時，您可能不得不犧牲頁面加載速度。
當客戶正在瀏覽您的網站，而您使用的字體未預裝在客戶的設備中時，系統將必須下載字體以顯示文本。
從技術上講，這只需要幾分之一秒，但它仍然會影響頁面加載速度。因此，如果您優先考慮 Shopify 商店速度，請考慮僅使用系統字體。
系統字體有助於提高頁面加載速度，因為它們在全球大多數係統上都可用，因此，它消除了下載字體這一小步驟。以下是 Shopify 分享的關於當您選擇系統字體系列時可以顯示哪些字體的示例：
- 單聲道：Menlo、Consolas、Monaco、Liberation Mono 或 Lucida Console
- 無襯線字體：BlinkMacSystemFont、Segoe UI、Roboto、Ubuntu 或 Helvetica Neue
- Serif：Iowan Old Style、Apple Garamond、Baskerville、Times New Roman、Droid Serif、Times 或 Source Serif Pro
5.使用英雄橫幅代替幻燈片
在網站主頁的頂部，通常有兩種類型的部分：
1.自動或手動顯示不斷變化的圖像的幻燈片（又名滑塊或旋轉木馬）。或者
2.英雄橫幅，這是一個單一的靜態圖像。
作為 Shopify 店主，您可能有一種誘人的衝動，想要添加包含多張圖片的幻燈片，以涵蓋您的企業必須提供的所有內容。
但是在您的網站上顯示幻燈片是個好主意嗎？
好吧，對於您的網站速度和用戶體驗而言，這可能不是一個好主意。由於幻燈片使用多個圖像文件，它會增加整體頁面加載時間並降低您的網站速度。
YouSea 使用英雄橫幅圖片代替幻燈片，不僅避免了分心，而且主頁加載起來也很容易。
6.減少重定向和失效連結
重定向是一種將網站訪問者發送到不同 URL 而不是訪問者輸入或點擊的原始 URL 的技術。
重定向在許多情況下都很有用，例如當您需要將頁面從一個 URL 移動到另一個 URL、刪除頁面、將網站移動到新域、合併重複的網頁等時。此外，重定向有助於將高排名頁面與新創建的內容聯繫起來。
唯一的問題是重定向會影響您商店的速度。同樣，如果您的網站有太多損壞的連結，它可能會成為優化商店速度的障礙。您必須修復損壞的連結並減少重定向以達到您想要的速度分數。
7.用谷歌標籤管理器組織你所有的跟踪代碼
Google Tag Manager 是一種解決方案，可讓您在網站上管理和部署不同的代碼片段。通過這樣做，它允許您將跟踪信息從您的網站傳輸到 Google Analytics。
注意：請注意，並非所有 Shopify 套餐都提供 Google Tag Manager，僅適用於 Shopify Plus 套餐。您可以詳細了解在 Shopify 上使用Google 標籤管理器的注意事項。
8.考慮使用延遲加載
延遲加載是一種通過在客戶向下滾動頁面時緩慢加載圖像或媒體文件來提高網站速度的技術。這可確保不會立即加載任何非關鍵資源，而是僅在網頁實際需要時才加載它們。
當您使用延遲加載內容時，瀏覽器需要的資源更少，並且會增加頁面加載時間。這也可以為您的客戶提供更好的用戶體驗，並有助於搜索引擎優化。
如果您使用的是GemPages 頁面構建器，則此功能在所有付費計劃中都是開箱即用的，起價為 29 美元/月。
9.使用 AMP 讓你的頁面快如閃電
AMP 代表加速移動頁面。它是一個開源項目，最初由谷歌創建，旨在優化移動網絡瀏覽並使其更快。
您可以使用 AMP 來加速您的 Shopify 網站，有兩種方法可以做到這一點：
1.使用自定義編碼創建 AMP
此方法需要紮實的技術知識，因為通過自定義代碼創建 AMP 非常複雜。它需要添加備用液體模板，您可以在此處找到更多信息：如何在 Shopify 主題開發中使用備用模板。
如果您不精通這些技術方面，您可以聘請Shopify 專家或自由開發人員。
2.為 AMP 使用 Shopify 應用
現在，讓我們談談更簡單的選擇，那就是使用 Shopify 應用程序。有多個 Shopify 應用程序可以幫助您創建 AMP 以提高商店速度並通過 Core Web Vitals。
Shopify 應用商店有不同的應用來幫助您創建 AMP。我們推薦的一些應用程序是 Shop Sheriff 的 AMP、AMP 應用程序和 Fire AMP。
10.優化 CSS、JavaScript 和 HTML
通過查看 CSS、JavaScript 和 HTML 等技術術語；您可能已經知道這裡的事情正在變得技術化。
簡而言之，您可以縮小商店的 CSS 和 JavaScript 以優化您的 Shopify 商店速度。使用 CSS Compressor 和 JavaScript Minifier 等在線工具，您可以壓縮商店的 CSS 和 JavaScript。
但是，這整個活動需要您從商店下載 CSS 和 JavaScript 文件並用壓縮文件替換它們。
除非您自己是編碼員，否則不建議在沒有 Shopify 專家或自由開發人員幫助的情況下嘗試這些技術活動。
11.安裝 Shopify 速度優化應用
因此，以“刪除未使用的應用程序”以加快 Shopify 網站速度開始的列表現在將以一些專門為提高 Shopify 網站速度而創建的 Shopify 應用程序的建議作為結尾。
TinyIMG 是滿足所有網站性能和 SEO 需求的一站式商店。
該應用程序專注於提高網站性能，其主要功能包括：
- 圖像壓縮
- 搜索引擎優化 (SEO)
- 腳本控制
- 斷開連結的重定向
使用 AMP 應用提高網站流量和銷售額。
AMP 應用旨在幫助 Shopify 商家通過 AMP 吸引更多流量，並通過提高網站加載速度來降低跳出率。其主要特點包括：
- 增強“核心網絡活力”
- 自定義主題編輯器
- 與用於 SEO 的元數據和 JSON-LD 集成
Swift 使用先進的技術提高您的頁面速度。
Swift 應用程序使用人工智能 (AI) 系統來優化 Shopify 頁面速度。其主要特點包括：
- 通過預加載內容進行速度優化
- 具有最佳質量的圖像壓縮
- 壓縮 CSS、JavaScript 和 HTML
- 速度分析和建議
Shopify 速度優化：重要說明
1.始終優先考慮“移動優先”方法。
為什麼？因為大多數用戶使用移動設備瀏覽您的商店。來自Insider Intelligence的這些統計數據將讓您很好地了解“移動優先”方法的重要性：
- 2021 年零售移動商務銷售額為 3593.2 億美元，比 2020 年增長 15.2%。
- 更有趣的是，到 2025 年，這一數字預計將增長一倍以上，即 7282.8 億美元，這將占美國零售電子商務銷售額的近 44.2% 。
2.關注轉化率的所有重要因素
Shopify 速度優化很重要。但是，請記住，這只是有助於改善銷售和會議的眾多因素之一。
- 在努力加快 Shopify 商店速度的同時，不要忘記其他重要因素，例如詳細的產品描述、社會證明、引人注目的網站副本和標題等。
- 閱讀有關Shopify 轉化率：新手指南的更多信息。
3.為商業的未來做好準備
電子商務的未來要求您為增強移動用戶的體驗做好準備。這就是GemPages為您帶來Instant Landing Page（測試版）迷你應用程序的原因！
Instant Landing Page (ILP) 是 GemPages 的一項舉措，旨在提高您的商店性能，幫助您達到加載速度基準，並為您提供流暢的頁面構建體驗。
但最重要的是，它旨在幫助您構建和啟動快速加載且針對移動設備優化的登錄頁面，以便您可以通過移動和社交媒體活動推動銷售和轉化。
準備好加速您的 Shopify 商店了嗎？
既然您知道所有因素都會影響您的 Shopify 商店速度以及如何優化您的 Shopify 頁面速度，那麼是時候採取行動了！
從衡量您的持續速度得分開始。看看是否有改進的地方。如果是，請分析您的 Shopify 商店中需要改進或改進的地方。
在整個博客中，如果您注意到，許多影響您網站速度的因素也是以某種形式或某種程度出現在您的商店中所需要的因素。所以，你不能完全刪除或更改所有這些，但你可以做的就是盡可能地優化它們。
關於 Shopify 速度優化的常見問題解答
什麼是好的 Shopify 商店速度？
Shopify 的分數基於 Google Lighthouse 性能指標。良好的 Shopify 速度得分超過 50，超過 90 的速度得分非常棒。
如何測試我的 Shopify 速度？
您可以通過 Google 的 PageSpeed Insights 工具測試您的 Shopify 速度。此外，您可以轉到在線商店> 主題，直接從 Shopify 後台查看您的 Shopify 速度分數，您會在當前主題部分的正上方看到分數。了解更多如何衡量 Shopify 頁面速度。
什麼會影響 Shopify 的速度得分？
影響 Shopify 速度得分的幾個因素包括：
可控因素：Shopify 應用程序、圖像、視頻、字體和您的主題。
不可控因素：客戶的設備、網絡、位置、Shopify 基礎設施、內容分發網絡 (CDN) 等。