改善 Shopify 網站速度的幾個要點

前提：Shopify 基礎建設 ( ~ OS 2.0 至今效能持續改善中 )

• CDN

• Local browser cache + Server-side page cache

  顧客端：local storage (永久) → load resources from cache (快) 而非在傳送一次 request (慢)

  後台：提供給每一個檔案非別為一年期的快取 (images, JS , CSS)

無法控制的因素

• 客人的設備, 網路, 地理位置
• 預設在 content_for_header 的 Liquid tag 內建功能 ( performance analytics + optional features EX: 客戶帳戶自動登出等... )

可控制的因素

網站速度 = 功能 / 效能

=> 功能與效能成反比
=> 評估 **online store featur**e VS **speed**

• 移除不必要的第三方套件 (App) 及該相關程式碼

  移除 App 時，有關於此 App 的程式碼也應該要移除

  有些 App 的程式代碼會用 {% comment %} 包著，以方便整理及清除該段落)

  Removing unused app code is a best practice that avoids running code for unused features, and makes your theme code easier to read.

• 過大的檔案大小

  Themes are made up of Liquid, HTML, CSS, and JavaScript code. When you edit or customize themes, file sizes can increase and affect your store speed

  • Consult your theme developer. If you use a free theme from Shopify, then you can contact support for guidance. If you use a third-party theme, then you can contact your theme developer or hire a Shopify expert.
  • Consider installing a theme that's optimized for performance, such as Dawn (OS 2.0)

• 實踐特殊的功能（消耗效能）

  當客人沒有使用到但卻載入不必要(多餘)的資料！

  • quick view pop-ups pre-load information from every product page when a collection page loads (彈窗預覽效果)

  • 可以使用 heatmap tool (熱圖工具 → 解析顧客在頁面滯留的時間及使用到的功能) to see if customers are using certain features. Disable features if they are not being used ！

• 撰寫過於複雜且較無效率的程式碼

  Doing complex operations repeatedly can increase your Liquid render time (Ex: 撰寫過多判斷式)

  • Run the Shopify Theme Inspector for Chrome to identify the lines of code that are slowing down pages in your online store.

• 容量過於龐大的圖片/ 影片

  Shopify adds some safeguards to prevent you from overloading your online store with images or videos. (Shopify 本身有守門員控管)

  • You can't have more than 50 products on a collection page or 25 sections on your home page.
  • Many themes defer loading images that are not currently onscreen.
  • Many themes also load a specific size of an image based on the screen size it's displayed on
  • 壓縮 image 工具 https://apps.shopify.com/crush-pics

  safeguards 並無法全面預防，但可以優化

  • Review the image optimization guide.
  • Keep slideshows of featured images to 2-3 slides, or use one featured image.

• 使用太不普遍的 Font Style

  You can choose from several fonts for the text in your online store. However, if you use a font that does not yet exist on your customer's computer, then the font has to be downloaded before your text can be displayed.

  建議：

  The font that displays on your customer's computer depends on their operating system. Below are some examples of the fonts that might be used to render text when you select a system font family:

  • Mono: Menlo, Consolas, Monaco, Liberation Mono, or Lucida Console
  • Sans-serif: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, or Helvetica Neue
  • Serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, or Source Serif Pro