Shopify 速度最佳化：佈景主題、應用程式與圖片

每家 Shopify 商店都在相同的伺服器和 CDN 上運作，所以商店慢，是因為它載入的東西：佈景主題、應用程式腳本、圖片和影片。Shopify 的速度最佳化就是移除和縮小這些東西，而不是更換主機。在大多數商店中，效益最大的是移除未使用的應用程式程式碼、壓縮主視覺圖片，以及延後載入小工具。

本指南先說明如何正確量測速度，再依通常的效益順序介紹各項修正。它是 Shopify SEO 指南的一部分。

量測正確的頁面

除了首頁，也要測試商品頁和商品系列頁。那些才是會排名、買家會進站的頁面。

Google PageSpeed Insights 提供單次載入的實驗室分數；如果你的商店流量夠大，還會提供 Chrome 使用者過去 28 天的實際網站使用體驗核心指標。Google 使用的是實際使用者的數字。
Search Console 的網站使用體驗核心指標報告會依狀態將網址分組，讓你看出是否所有商品頁都有同樣的問題。
Shopify 數據分析中的網站效能報告會顯示相同的實際使用者指標隨時間的變化，適合用來確認某項修改是否有幫助。

專注在三項網站使用體驗核心指標：最大內容繪製 LCP（主要圖片或文字多快出現）、與下一個畫面的互動 INP（頁面多快回應點按）和累計版面配置位移 CLS（畫面跳動的程度）。實驗室分數每次測試都會波動，不要追求完美的 100 分。

應用程式是 Shopify 商店變慢最常見的原因。每個影響店面的應用程式，都可能在每一頁加入 JavaScript 和 CSS。

列出你安裝的應用程式。解除安裝所有不再使用的。
解除安裝不一定會移除應用程式加入佈景主題的程式碼。在佈景主題檔案中（Online Store > Themes > Edit code）搜尋應用程式名稱，移除殘留的程式片段和腳本標籤。
優先選擇使用佈景主題應用程式擴充功能（在佈景主題編輯器中加入的應用程式區塊）的應用程式。解除安裝時會被乾淨移除，而且只在你放置的地方載入。
對於保留的應用程式，檢查它們是否在每一頁都載入。尺寸表只需要出現在商品頁。

在大多數商品和商品系列頁上，最大的元素是商品照片或主視覺橫幅。讓它變快：

上傳合理的檔案。 上傳前把照片調整到約 2,000 到 2,500 像素寬並壓縮。Shopify 的 CDN 會自動提供調整過大小的版本和 WebP 等新格式，但巨大的原始檔仍會耗費時間。
第一張圖片不要延遲載入。 頁面頂端的圖片應該立即載入。延遲載入是給下方圖片用的。
使用響應式圖片。 較新的佈景主題會用 Shopify 的 image_url 和 image_tag 篩選器，依螢幕提供合適的尺寸。較舊的佈景主題可能對所有裝置都提供同一個大尺寸。
避免在主視覺區自動播放影片。 如果需要影片，先顯示封面圖片，之後再載入影片。

評論、聊天泡泡、彈出視窗、加購輪播和社群動態，很少需要在商品之前載入。

為 Online Store 2.0 打造的佈景主題，包括 Shopify 以 Dawn 為基礎的免費佈景主題，都以應用程式區塊、響應式圖片和較輕量的 JavaScript 為設計核心。幾年前、帶有大量輪播和 jQuery 的佈景主題，不管你移除多少東西都可能很慢。

更換之前，先用 PageSpeed Insights 測試新佈景主題的示範商品頁。在自己的示範中就很慢的佈景主題，換上你的商品也會很慢。

頁面載入時跳動的內容會傷害累計版面配置位移，也會惹惱買家。

隨著你新增應用程式和區塊，速度會倒退。每安裝一個新應用程式就重新檢查一次商品頁，每月查看一次網站使用體驗核心指標報告。網站稽核（例如 zaDojo 的稽核）會標出整個商店中的緩慢頁面和過大圖片，讓你不必一頁一頁測試。

Shopify 的速度會影響 SEO 嗎？ 會，但影響不大。網站使用體驗核心指標是排名信號，但內容和相關性更重要。速度對銷售的影響更大：買家會離開緩慢的商品頁。

Shopify 的速度分數多少算好？ 目標是實際使用者資料中的網站使用體驗核心指標達到「良好」（LCP 低於 2.5 秒、INP 低於 200 毫秒、CLS 低於 0.1）。滿分 100 的實驗室分數只是參考，不是目標。

為什麼我的 Shopify 商店在手機上很慢？ 手機的處理器和網路連線較慢，所以應用程式帶來的大量 JavaScript 在手機上的影響大得多。請先在手機上測試。