提升您的網路商店效能

您的網路商店由一系列功能組成，例如佈景主題程式碼、app、圖片、影片、輪播、社群媒體動態，以及分析。這些功能可提升訪客體驗，並擴充網站功能。

不過，您新增的每項功能都可能影響商店的效能。有些功能會拖慢網站或造成非預期行為，進而影響用戶體驗。

網站效能著重於最佳化用戶體驗。目前網站效能主要聚焦三個面向，也反映在 Core Web Vitals：

載入速度，以最大內容含量繪製 (LCP) 測量
版面穩定性，以累積版面位移 (CLS) 測量
對使用者互動的回應能力，以使用者互動至下一次繪製時間 (INP) 測量

最佳化網站效能可提升顧客留在網站並完成轉換的機率。

本頁內容

網路商店最佳化

您的網路商店內建網站最佳化，新增功能也同樣內建。您不需特別設定，即可受益於以下功能：

您的網路商店架設在快速的全球伺服器上，且不會限制商店的頻寬。您可以在 Shopify Status 檢視您的 Shopify 商店狀態。
您的網路商店搭配由 Cloudflare 維運的內容傳遞網路 (CDN)，可確保全球各地載入快速。您可以在 Cloudflare 狀態頁面查看 CDN 狀態。
為維持載入速度，系統會透過圖片 CDN自動最佳化圖片。搭配佈景主題程式碼，圖片 CDN 可提供最適合的圖片格式，並調整尺寸與壓縮，以縮小檔案大小。

影響網站效能的因素

對 Shopify 商店而言，下列項目對網站效能影響最大：

您的網路商店佈景主題
您已安裝的 app
您手動新增到商店的其他第三方程式碼，包括標籤管理工具及其中的標籤

因此，若要提升網站效能，建議著重以下幾點：

使用最新且最佳化的佈景主題。所有 Horizon 系列主題與 Shopify 推出的 Online Store 2.0 主題皆為免費，並已針對網站效能最佳化。此外，許多其他第三方主題也同樣針對網站效能進行最佳化。您可以查看最新的主題效能資料。
如果您的主題提供頁面轉場或其他動畫，請在啟用前後比較網站效能。動畫可能會拖慢頁面。
避免在主題的頁面範本中加入過多區段。頁面區段過多會降低網站效能。
若某些商品系列包含大量商品，請考慮啟用分頁，限制單次載入的商品數量。
評估已安裝的 app 與第三方程式碼，確認其帶來的價值足以彌補可能的效能損失。
稽核您的標籤管理工具，移除未使用或價值不高的標籤。瞭解詳情：標籤與標籤管理工具的最佳做法。

測試工具

您可使用下列工具檢視網路商店效能：

網站效能報告：Shopify 的網站效能報告使用 Core Web Vitals 衡量真實用戶在您的網路商店的體驗。
PageSpeed Insights：您可使用 Google 的PageSpeed Insights產生自己的報告，查看商店頁面的更詳細指標。

瞭解第三方效能建議

第三方效能掃描工具可能會建議異動來提升商店速度。不過，許多建議 Shopify 已經代為實作，或不適用於 Shopify 商店。

Shopify 已內建的最佳化項目

您的 Shopify 商店已自動包含下列效能最佳化：

內容傳遞網路 (CDN)：Shopify 提供世界級的 CDN，無需額外付費，確保全球載入快速。所有資源均透過 HTTP/2 傳送，與舊版協定相比可降低額外負擔。

瀏覽器快取：Shopify 將可快取資源的瀏覽器快取設定為 1 年，為可設定的最長期間。這代表再次造訪您商店的訪客會有更快的載入時間。

gzip 壓縮：Shopify 對 CSS、JavaScript、文件與頁面採用 gzip 壓縮，以降低頻寬並改善載入時間。也啟用了 keep-alive，以便擷取多個檔案。

圖片最佳化：Shopify 會以進階演算法自動壓縮 JPG 圖片，兼顧壓縮率與視覺品質。圖片經常以 WebP 格式提供，以取得更佳壓縮與更快載入。

檔案精簡化：當您的線上店面請求這些檔案時，Shopify 會自動精簡 CSS 與 JavaScript 檔案，在不影響功能的情況下縮小檔案大小。

第三方建議不適用的情況

第三方掃描工具可能會建議一些與 Shopify 商店無關的變更：

伺服器層級設定：關於伺服器設定、HTTP 標頭或快取策略的建議，Shopify 的基礎架構已經完成最佳化。
CDN 實作：建議新增 CDN 並非必要，因為 Shopify 預設包含高效能的 CDN。
壓縮設定：啟用壓縮的相關建議，Shopify 平台已全面落實。

採行適用的建議

請著重於與您的商店特定內容與功能相關的建議：

圖片最佳化：請確保上傳的圖片尺寸適當，並使用建議的格式。
評估 app：考量已安裝的 app 是否帶來足夠價值，足以抵銷對效能的影響。
佈景主題最佳化：選用已針對效能最佳化的佈景主題，並限制頁面範本中的區段數量。

疑難排解載入緩慢的頁面

如果您的商店載入速度很慢，請依下列步驟找出並解決問題：

步驟 1：確認問題

請在不同裝置與網際網路連線下，親自測試商店的載入速度。
請他人也測試您的商店，以確認問題不是您端的網際網路連線所致。
使用 PageSpeed Insights 等測試工具，以取得具體的效能指標。

步驟 2：找出原因

檢查是否有過多 app：過多的 app 在您的線上店面載入資源，會拖慢效能。檢視已安裝的 app，移除對銷售非必要的項目。

檢視大型圖片：包含大量高畫質圖片的頁面可能載入較慢。請最佳化圖片，或減少顯示的圖片數量。瞭解詳情建議的圖片尺寸。

找出速度慢的指令碼：如果您的網站會先停留在空白頁面一段時間，之後才一次載入所有內容，請使用瀏覽器的開發人員工具找出載入較慢的指令碼。請聯絡 app 或佈景主題的開發人員協助解決。

步驟 3：採取行動

移除不必要的 app：解除安裝 app 並不會自動從佈景主題移除其程式碼。您可能需要聯絡該 app 的開發人員，取得完整移除的指示。

最佳化圖片：使用合適的檔案格式 (JPG 用於相片、PNG 用於透明圖形) 並將圖片尺寸調整為與實際顯示大小相符。

評估佈景主題的效能：若目前的佈景主題造成明顯變慢，可考慮改用已針對效能最佳化的佈景主題。

取得網路商店效能相關支援

若您使用 Shopify 提供的免費佈景主題，Shopify 支援服務可能可協助進行基本的效能改善。

若您使用第三方佈景主題且需要協助，您必須聯絡您的佈景主題開發人員，或聘僱 Shopify 網站效能專家，或聘僱專精網站效能與速度的 Shopify 合作夥伴。瞭解詳情聘僱 Shopify 合作夥伴。

若效能問題源自某個 app，您可以聯絡您的 app 開發人員。

若您有開發團隊或代理商合作夥伴，也可與他們聯絡以取得進一步協助。

疑難排解的技術資訊與資源

若您是開發人員，想要改善 Shopify 線上店面、佈景主題或 app 的效能，您可以針對各項 Core Web Vital 參考下列資源。瞭解詳情 Shopify 佈景主題的效能最佳做法。

載入速度

最大內容含量繪製 (LCP) 會依據畫面上最大元素變得可見的速度來衡量載入速度。首位元組時間 (TTFB) 與首次內容繪製 (FCP) 為輔助指標，可協助您更清楚判斷問題根源。瞭解詳情在 Shopify Liquid 線上店面中偵錯常見的載入變慢原因。

視覺穩定性

累積版面配置偏移 (CLS) 會依據載入過程中內容非預期位移的幅度來衡量視覺穩定性。若要深入瞭解如何針對 CLS 進行偵錯，請閱讀 How to optimize Cumulative Layout Shift (CLS) on Shopify sites。

互動性

互動至下一次繪製 (INP) 會依據頁面對多數使用者操作變得可回應所需的時間來衡量互動性。例如，點擊連結或按鈕等操作。

如果您的 INP 表現不佳，最可能的情況是商店中來自佈景主題程式碼、app 程式碼或第三方/標籤管理工具的 JavaScript 過多。請優先清理影響最嚴重的部分。瞭解詳情 3 ways to find your worst JavaScript offenders for page load。若 INP 仍有問題，請前往 web.dev 參考更多資源。