提高網路商店成效

有些因素會影響網路商店成效,而您可以控制其中幾個因素。

若要瞭解您的網路商店今天的成效,請檢視您的 網站成效 報告。

您無法控制的因素

這些因素可能會影響商店成效,但您無法透過在 Shopify 商店進行的任何設定或調整來加以控制,這包括源於顧客的因素 (如裝置或網路速度) 和源於 Shopify 的因素 (如更新 Shopify 基礎架構)。

顧客的裝置、網路和地點

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

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

Shopify 基礎架構

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

Shopify 會不斷修正程式碼和基礎架構,而部分改善事項可能會影響到您的成效指標。

以下幾項功能會影響網路商店速度。

內容傳送網路 (CDN)

CDN 是指內容傳送網路。CDN 會儲存您的圖片和其他檔案,例如 Shopify 管理介面「內容」>「檔案」頁面中的內容。CDN 是 Shopify 為商家提供由 Cloudflare 營運的世界一流 CDN,確保您的網路商店可在全球快速載入。您可以在 Cloud 變更狀態頁面上查看 CDN 狀態

本機瀏覽器快取

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

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

伺服器端頁面快取

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

content_for_header Liquid 物件內的資產

`` Liquid 物件可插入許多網路商店功能會使用的資產,包括成效分析和動態結帳按鈕等選用功能。載入此物件和相關資產會影響您商店的速度。Shopify 正在最佳化標籤和其資產,以加快速度。

您可以控制的因素

以下是一些會影響您網路商店成效的因素和應對方式。

應用程式

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

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

  • 停用您不想使用的應用程式功能,但要是您不需要某應用程式,可將其移除。請考量在網路商店功能和速度之間取得平衡
  • 若您要移除一項應用程式,可以將安裝應用程式過程所加入的程式碼一併移除。大多數應用程式都會自動移除這些程式碼,但您可以洽詢該應用程式的開發人員來加以確認。有些應用程式會透過將程式碼包裹在提及應用程式名稱的{% comment %}標籤中以利完成安裝過程。移除未使用的應用程式碼是最佳做法,可以避免執行未使用的功能程式碼,讓您更易於閱讀您的佈景主題程式碼。
  • 請洽詢您的應用程式開發人員。

佈景主題

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

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

佈景主題或應用程式功能

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

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

複雜或無效率的 Liquid 程式碼

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

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

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

  • 執行 Shopify Theme Inspector for Chrome,以找出會降低您網路商店頁面速度的程式碼行。
  • 聘僱 Shopify 合作夥伴協助您找到效率不高或無用的程式碼。

圖片與影片

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

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

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

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

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

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

字型

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

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

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

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

  • 等寬字型: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

疑難排解工具

您可以使用以下工具來調查網路商店的成效。

若您為開發人員,則您可以使用 Shopify 工具和最佳做法,進一步最佳化您佈景主題的成效。請在 Shopify.dev 上瞭解詳情。

PageSpeed 深入分析

Shopify 的網站成效控制面板報告會使用網站體驗核心指標來衡量真實使用者在您網路商店的用戶體驗。您可以使用 Google PageSpeed Insights 執行專屬報告,以檢視更詳細的商店頁面指標。

Shopify Theme Inspector for Chrome

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

取得有關網路商店成效的支援

如果您使用 Shopify 的免費佈景主題,Shopify 支援服務或許能協助您進行基本的效能改善作業。

如果您使用第三方佈景主題且需要協助,則您必須聯絡佈景主題開發人員,或聘僱 Shopify 合作夥伴。深入瞭解如何聘僱 Shopify 合作夥伴

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

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

免費試用