Shopify CDN解釋：如何運作以及如何使用

Carol Lin -

Shopify CDN（Shopify內容分發網路）是一個由Cloudflare驅動的雲端伺服器系統，用於全球各地的Shopify商店託管和傳送靜態文件。無論您的客戶身處何地，它都能確保您的在線商店以最快速度加載。

最棒的是，您不需要為Shopify CDN支付額外的費用！想了解更多有關Shopify CDN及其工作原理的資訊嗎？繼續閱讀。

我將解釋所有您需要知道的內容，包括它是什麼、它如何運作，以及如何將圖片託管在Shopify CDN中。

從基本概念開始。

目錄

  • 什麼是CDN？
  • 什麼是Shopify CDN？
  • Shopify CDN如何運作？
  • Shopify CDN的5大關鍵優勢
    • 1. 文件壓縮
    • 2. 文件格式轉換
    • 3. 動態編輯
    • 4. 實時性能增強
    • 5. 更好的負載平衡
  • 如何使用Shopify CDN動態編輯您的商店圖片
  • 如何檢查您的商店是否使用了Shopify CDN
  • 如何將文件移動到Shopify CDN
  • 您可以與Shopify使用其他CDN嗎？
  • 最後的想法：Shopify CDN讓您的商店飛起來
DTC Insider 是亞洲頂級的 Shopify Plus Agency

什麼是CDN？

CDN，全名為內容分發網路（Content Delivery Network），是分布在全球各地的伺服器網路，用於存儲和傳遞網絡內容，如圖片、影片和網站文件。與其依賴單一伺服器，CDN使用多個位於不同位置的伺服器。

這裡有一張圖示說明CDN如何工作：

CDN的工作原理。（圖片來源：DTC Insider）

CDN的內部運作比這要複雜得多。

但簡單來說：當使用者訪問網站時，CDN會從最近的伺服器提供該站點的靜態文件，從而加快交付速度，減少延遲並改善線上體驗。

舉例來說，假設您從英國訪問該網站。與其從網站託管的美國提供內容，我們的CDN會從其位於倫敦的雲端伺服器提供內容，這將有助於節省帶寬、最大限度減少延遲，並在幾秒鐘內加載頁面。

CDN的主要功能包括內容複製、DNS解析、CDN路由、內容交付、緩存和負載平衡。然而，一些CDN還提供DDoS保護、Web應用防火牆和分析工具。

現在您了解了CDN的基本知識，我們來討論Shopify的CDN。

什麼是Shopify CDN？

Shopify CDN是由Cloudflare驅動的雲端伺服器系統，用於託管和傳送Shopify商店的靜態文件，如HTML、CSS、JS和圖片。Shopify CDN會從最接近用戶的伺服器傳送內容，以減少延遲並提高性能。

Shopify CDN是Shopify平台基礎架構的一個重要組成部分，並免費提供給所有Shopify使用者。它為全球超過430萬個Shopify商店提供支持，並處理每分鐘約2500萬個請求。

最棒的是，儘管託管了超過200億個文件，Shopify CDN仍可免費使用，並包含在所有Shopify方案中。您可以享受無限的帶寬和存儲，且不會產生額外費用。這對於初次建立Shopify商店時非常有幫助。

Shopify CDN如何運作？

Shopify CDN的工作原理。（圖片來源：DTC Insider）

Shopify CDN通過緩存您的靜態文件，將它們存儲在全球分布的雲端伺服器網路中，並在每次瀏覽器請求進來時，從最近的伺服器將它們提供給客戶。

Shopify還使用Brotli和Gzip壓縮來減小文件大小，並通過HTTP/3和TLS 1.3來提高安全性和性能。

此外，當您將文件上傳到Shopify商店時，Shopify使用asset_url託管文件過濾器來將版本號附加（添加）到託管文件URL。例如，當您上傳名為_white-tee.jpg_的文件時，Shopify會為其添加版本號，如?v=123456789。

當您下次更新或編輯該圖片時，Shopify會為圖片URL添加新的版本號，告知CDN其緩存中的文件已過時。CDN隨後會刪除舊文件並緩存帶有新版本號的更新文件，並在全球範圍內為客戶提供服務。

值得一提的是，截至2023年，Shopify大部分靜態內容仍從cdn.shopify.com域呈現，除了加載在店面上的圖片或樣式表，它們使用{shop}.myshopify.com/cdn格式，以最大化連接重用並提高性能。

然而，從2023年開始，Shopify已經更新了大多數CDN URL，改用//example.com/cdn/shop/files/...格式。

現在您了解了Shopify CDN的運作原理，讓我們來討論它的優勢。

Shopify CDN的5大關鍵優勢

Shopify CDN的優勢。（圖片來源：DTC Insider）

Shopify CDN不僅僅是一個內容分發服務。它是Shopify基礎架構的一個基本組成部分，確保全球範圍內的Shopify商店可以快速可靠地訪問。

以下是Shopify CDN為您帶來的五大好處。

1. 文件壓縮

當您將文件上傳到Shopify時，這些文件會自動優化，變得更小。這種優化肉眼無法察覺，但它顯著提升了您的網頁加載速度。

2. 文件格式轉換

Shopify會檢查訪客設備的文件格式兼容性，並向每位用戶傳送最佳格式，確保每個人都能獲得最快的體驗。例如，它可能會將圖片轉換為WebP格式提供給某些用戶，而向其他用戶提供JPG格式，總是以最快的加載時間為目標。

3. 動態編輯

Shopify CDN還允許您即時編輯圖片而不更改原始文件。這就像變魔術！您可以使用簡單的URL命令裁剪、轉換或調整圖片，變更立即生效，且不會損壞原圖。

4. 實時性能增強

Shopify CDN的所有功能都是即時的。無論是動態編輯、壓縮還是文件格式轉換，當有人點擊您的網站時，他們不必等待很久。Shopify的全球伺服器確保您的內容以超快速度傳遞。

5. 更好的負載平衡

Shopify CDN不僅僅讓您的網站更快；它還確保其保持穩定。它通過在伺服器之間調整流量分配來維護性能和精確度，這都得益於Cloudflare負載平衡在網路邊緣做出的決策。

如何使用Shopify CDN動態編輯您的商店圖片

動態編輯是Shopify CDN最好的功能之一。它保留了原始圖片，並即時應用如裁剪和填充的變換。

Shopify甚至為您提供免費工具來動態編輯圖片，並複製相關代碼片段以粘貼到您的主題代碼或產品頁面的自定義字段中。

使用Shopify CDN動態編輯圖片的步驟。（圖片來源：DTC Insider）
按以下步驟使用Shopify CDN動態編輯您的Shopify商店圖片：
  1. 訪問Shopify Imagery網站，並粘貼您的Shopify託管圖片的URL。
  2. 輸入寬度、高度和裁剪選項。可選擇顏色填充裁剪創建的任何空白區域。
  3. 從相應的區塊中複製URL、Liquid代碼或Hydrogen代碼，然後將其粘貼到您的主題代碼中，以將動態編輯的圖片添加到您的商店中。

這就是全部。Shopify CDN現在將根據您選定的參數編輯圖片，而不影響原圖。它還會以更小的文件大小和最佳化的格式向兼容的瀏覽器傳送圖片。

如何檢查您的商店是否使用了Shopify CDN

所有Shopify商店默認使用Shopify CDN。 然而，您可以按照以下步驟驗證您的商店是否使用了Shopify CDN：

檢查商店代碼以查看是否使用Shopify CDN。（圖片來源：DTC Insider）

  1. 在網絡瀏覽器中打開您的Shopify商店頁面。
  2. 右鍵點擊頁面，選擇檢查。
  3. 在_元素_選項卡中，使用Ctrl + F或Cmd + F搜索cdn.shopify.com或cdn/shop。
  4. 您應該看到一行或多行包含<link href="//cdn.shopify.com/s/files/...">或cdn/shop的代碼。
  5. 可選擇打開_來源_選項卡，並查找名為cdn.shopify.com或cdn的文件夾。
  6. 如果在_元素_和_來源_選項卡中出現cdn.shopify.com或cdn，這證明您的商店正在使用Shopify CDN。

注意

Shopify以前大部分靜態內容都是從cdn.shopify.com加載的。自2023年起，Shopify開始使用/cdn/shop/...URL格式。您的商店可能包含其中一個或兩個URL。

如何將文件移動到Shopify CDN

Shopify託管和提供大部分靜態資源，包括主題資產和圖片。雖然它不會自動提供外部代碼依賴項或硬編碼圖片，但您可以手動將它們添加到Shopify CDN中，以減少連接開銷。

將文件添加到資產文件夾以移動到Shopify CDN。（圖片來源：DTC Insider）

按照以下步驟將文件移動到Shopify CDN：

  1. 打開Shopify管理面板，進入銷售渠道 > 在線商店 > 主題。
  2. 選擇省略號（…），即三點圖標，然後選擇編輯代碼。
  3. 在左側邊欄中找到_資產_文件夾，選擇添加新資產。
  4. 上傳您的圖片或選擇創建空白文件以添加代碼文件。
  5. 最後，在主題代碼中更新代碼文件引用，如下方代碼片段所示。
  6. 保存您的更改，並驗證前端一切正常。

做得好！您已成功將自定義代碼文件和圖片移動到Shopify CDN。這一小變動應該會立刻提升您商店的性能。

您可以與Shopify使用其他CDN嗎？

您可以通過編輯主題代碼添加引用外部託管CDN代碼和圖片文件來與Shopify使用其他CDN。然而，使用第三方CDN會增加額外的連接開銷，這可能會對Shopify商店的性能造成負面影響。

另一種方式是使用Cloudflare的Orange-to-Orange（O2O），這是一種特殊的流量路由配置，適用於Cloudflare企業用戶。您可以通過創建一個指向shops.myshopify.com的Cname DNS記錄來設置它。

有關在Shopify上設置O2O的更多詳細資訊，您可以閱讀Cloudflare的指南。

最後的想法：Shopify CDN讓您的商店飛起來

這就是全部。我已經解釋了什麼是Shopify CDN、它如何工作、它的好處以及如何使用它。簡單來說，Shopify CDN是一個強大的工具，可以通過使文件更小、改變它們的格式以及提高它們在網站上的加載方式來改善頁面加載時間。

最棒的是，Shopify CDN可免費使用，並默認包含在所有Shopify方案中。您不需要手動設置；一切從第一天起就可以開箱即用。這再好不過了。

如果有任何問題，歡迎留言，並註冊 Shopify 電子報以了解最新的Shopify發展。