改善線上商店速度

此頁面列印時間為 Jan 27, 2021。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/online-store/os/store-speed/improving-speed。

有一些因素會影響線上商店速度，您可以控制其中部分因素。

如果您不知道線上商店目前的執行速度，您可以檢視線上商店速度報告。

您無法控制的因素

顧客的裝置、網路和地點

造訪您商店的顧客來自全球各地，且使用不同裝置和網際網路連線。這表示您的商店可能會因這些因素不同，造成顧客載入速度較快或較慢。

如果顧客就商店速度問題與您聯絡，不妨請對方檢查是否使用最新版本的瀏覽器、最近是否已清除快取，以及網際網路服務供應商並未中斷服務或降低效能。

Shopify 基礎架構

Shopify 將您的線上商店託管在快速的全球伺服器上，且不限制商店頻寬。您可以在「Shopify 狀態」上查看您 Shopify 商店的狀態。

Shopify 不斷針對程式碼和基礎架構進行修正。這些改善過程可能會影響到您的速度分數。

以下是一些會影響您線上商店速度的功能。

內容傳送網路 (CDN)

CDN 代表內容傳送網路。Shopify 為商家提供由 Fastly 營運的世界一流 CDN，確保您的線上商店可在全球快速載入。您可以在「Fastly 狀態頁面」上查看 CDN 狀態。

本機瀏覽器快取

您商店會暫時在顧客本機儲存空間中快取或儲存一些元素。下次顧客造訪您線上商店時，瀏覽器便可從快取載入資源，不需向伺服器傳送新的要求。

Shopify 設定瀏覽器可快取您商店中可快取的資源，每個檔案最多一年。可以快取的檔案包括圖片檔案、PDF、JS 檔案和 CSS 檔案。

伺服器端頁面快取

除了本機瀏覽器快取，Shopify 也會快取伺服器端的頁面。由於顧客日後收到的將是快取複本，因此雖然首次載入頁面時可能較慢，但日後頁面載入速度會加快。

content_for_header Liquid 標籤內的資產

{% content_for_header %} 許多線上商店功能會使用 Liquid 標籤插入資產，包括效能分析和選用功能 (如動態結帳按鈕)。載入此標籤和相關資產會影響您商店的速度。Shopify 正在最佳化該標籤和其資產，以加快其速度。

您可以控制的因素

以下是一些會影響您線上商店速度的因素以及處理方法。

應用程式

若您新增應用程式來變更線上商店的功能或外觀，這些應用程式會新增程式碼至佈景主題中，以確保正常執行。您可以移除或重新排序部分程式碼，藉此改善網路商店的成效。如果您未使用某個應用程式，則可將其移除。

如果您認為應用程式會降低您的商店速度，請採取以下步驟：

  • 停用您不想使用的應用程式功能，或如果您不需要某應用程式，可將其移除。請將線上商店功能和速度間的平衡列入考慮。

  • 若您要移除一項應用程式，可以將安裝應用程式過程中所加入的程式碼一併移除。有些應用程式會透過將程式包裝在提及應用程式名稱的{% comment %}標籤中來協助進行安裝過程。

    移除未使用的應用程式碼是最佳作法，可以避免執行未使用的功能的程式碼，讓您更易於閱讀您的佈景主題程式碼。

  • 請洽詢您的應用程式開發人員。

  • 聘請 Shopify 專家 獲得進一步協助。

佈景主題

佈景主題由 Liquid、HTML、CSS 和 JavaScript 程式碼共同組成。在您編輯或自訂佈景主題時，檔案大小可能會增加並影響您商店的速度。

如果您認為佈景主題中的某些部分會降低您的商店速度，請採取以下步驟：

佈景主題或應用程式功能

啟用特定功能後，可能也會影響您商店的速度。舉例來說，某些快速檢視彈出式視窗會在載入商品系列頁面時，從各產品頁面預先載入資料。載入顧客不需要的額外資料可能會在無法增加價值的情況下，影響您的商店速度。

如果您認為有項功能會降低您的商店速度，您可以採取下列步驟：

  • 使用熱點圖工具來查看顧客使否使用特定功能。如果顧客未使用，請停用該功能。
  • 若您不需要特定功能，請停用。請將線上商店功能和速度間的平衡列入考慮。
  • 向您的佈景主題和應用程式開發人員諮詢，並詢問是否會預先下載資料。
  • 聘請 Shopify 專家 獲得進一步協助。

複雜或無效率的 Liquid 程式碼

幾乎所有用來轉譯您商店的 Liquid 都可供您編輯。撰寫 Liquid 程式碼分為有效率和無效率。重複複雜操作可能會提高您 Liquid 的轉譯時間，這會影響您的整體商店速度。

舉例來說，如果您要依價格來排序商品系列中的產品，則應在程式碼依序通過商品系列之產品前先行操作，而非將其作為迴圈程式碼的一部分。這是因為產品順序不會隨產品改變，而計算產品順序會增加處理要求的時間。

如果您擔心無法最佳化您的程式碼，則可以採取以下步驟：

請注意：The Shopify Theme Inspector for Chrome 的適用對象為熟悉閱讀和編輯程式碼的商家和合作夥伴。如果您不熟悉閱讀和編輯程式碼，您可以聘請 Shopify 專家來協助指導。Shopify 專家還可以使用此工具的結果來幫助您改善商店成效。

圖片與影片

過大的圖片和隱藏不供瀏覽的圖片可能會對載入其他更重要的頁面部分造成干擾。如果使用者必須等待大型圖片載入，他們可能會認為您的商店速度過慢。

Shopify 新增一些保護措施，防止您的線上商店超載圖片或影片。舉例來說：

  • 您不可以在單一商品系列頁面上擁有超過 50 種產品，或首頁上擁有超過 25 個區段。
  • 許多佈景主題會延遲載入目前不在畫面上的圖片。
  • 許多佈景主題也會載入特定大小的圖片，以配合螢幕尺寸顯示。

然而，這些保護措施無法完全避免圖片或影片影響您線上商店的成效。

如果您認為圖片會降低您的商店速度，請採取下列步驟：

  • 查看圖片最佳化指南。
  • 請將輪播的精選圖片維持在 2-3 張，或使用一張精選圖片即可。
  • 諮詢您的佈景主題開發人員，以取得如何將圖片用於佈景主題的最佳方式之建議。
  • 聘請 Shopify 專家 獲得進一步協助。

字型

您可以為線上商店中的文字選擇不同的字型。不過如果您使用的字型不存在於顧客的電腦，就必須先下載字型才能顯示文字，這會影響您商店的載入時間。

若要避免系統將新字型下載到顧客的電腦，您可以使用系統字型，系統字型是多數電腦已安裝的字型。

您可以選擇等寬字型、襯線體或無襯線體字型系列。另外，您在使用這些字型系列時，仍可以使用粗體或斜體等字型樣式。

在您顧客電腦上顯示的字型會依其操作系統而定。以下範例為選擇系統字型系列時，會用來轉譯成文字的字型：

  • 等寬字型：Menlo、Consolas、Monaco、Liberation Mono 或 Lucida Console
  • 無襯線體：BlinkMacSystemFont、Segoe UI、Roboto、Ubuntu 或 Helvetica Neue
  • 襯線體：Iowan Old Style、Apple Garamond、Baskerville、Times New Roman、Droid Serif、Times 或 Source Serif Pro

疑難排解工具

以下是您可以用來調查線上商店速度的工具。

Lighthouse

Shopify 的線上商店速度報告使用 Lighthouse 來測量商店速度。您可以使用 Google PageSpeed Insights 執行您的專屬 Lighthouse 報告，以檢視更詳細的商店頁面指標。若要深入瞭解這些指標的意義，請參閱 Google Lighthouse 性能評分文件。您也可以聘請 Shopify 專家協助您瞭解指標和取得改善建議。

請注意：由於 Google PageSpeed Insights 執行時的測試條件不同，您的評分可能會與線上商店速度報告列出的評分不同。深入瞭解 Shopify 測試環境。

Shopify Theme Inspector for Chrome

Shopify Theme Inspector for Chrome 是一款分析工具，使用火焰圖表來顯示 Liquid 轉譯成效。此工具可協助您找出降低線上商店頁面速度的程式碼行。瞭解如何使用Shopify Theme Inspector。

請注意：此擴充功能的適用對象為熟悉閱讀和編輯程式碼的商家和合作夥伴。如果您不熟悉閱讀和編輯程式碼，您可以聘請 Shopify 專家來協助指導。Shopify 專家還可以使用此工具的結果來幫助您改善商店成效。

取得支援之處

如果您使用 Shopify 的免費佈景主題，Shopify 支援服務或許能協助您改善基本功能的成效。

如果您使用第三方佈景主題且需要協助，則您必須聯絡您的佈景主題開發人員或聘請 Shopify 專家。

如果您擁有開發團隊或代理商合作夥伴，您也可以聯絡對方以取得進一步協助。

準備好開始透過 Shopify 銷售商品了嗎？

免費試用