Shopify 速度優化的 10 個技巧

已發表: 2022-03-31

如何提高 Shopify 加載速度

您是否正在尋找最好的 Shopify 速度優化技巧以使您的網站加載更快？ 繼續閱讀，因為這篇文章是給你的。

購物者加載 Shopify 商店所需的時間非常重要，因為它直接影響您網站的 SEO，從而影響您的轉化率。

人們從傳統購物轉向在線購物的主要原因之一是因為它為他們節省了大量的壓力和時間。 當 Shopify 商店加載時間過長時，客戶可能會非常沮喪地滿足他們對速度的需求。

如果您的商店加載時間超過 3 秒，您可能會損失多達 40% 的流量。

這是來自 Google 的插圖，可以更好地了解加載速度與跳出率之間的關係。

Shopify 速度優化

來源

您不希望潛在客戶在您花費所有時間和精力吸引他們到您的商店後離開。

Shopify 頁面速度優化是管理商店的一個組成部分。 在本指南中，我們將討論 Shopify 速度優化和一些幫助您優化商店頁面的技巧。

什麼是頁面速度？

頁面速度，也稱為頁面加載時間，是指網頁正確加載所需的總時間。 根據谷歌的說法，推薦的頁面加載時間應該在兩秒以下。

為什麼要優化 Shopify 商店的頁面速度？

優化您的 Shopify 商店頁面很重要，原因有幾個。 其中一些包括以下內容：

  • 您的頁面加載時間會影響客戶的購物體驗。 除此之外，您的 Shopify 商店越快，客戶的購物體驗就越好。 更好的購物體驗將提高用戶參與度、客戶滿意度並降低購物車放棄率。
  • 您商店的頁面速度會影響客戶的購買決定。
  • 它會影響您的轉化率。 Shopify 商店的頁面加載時間越快，轉化率就越高。 如果超過 3 秒，您的轉化率就會開始逐秒下降。
  • 它直接影響你的跳出率。 您的 Shopify 商店加載所需的時間越長，訪問者從您的網站跳出的機會就越高。
  • 幫助您的 Shopify 商店 SEO 排名的因素之一是您的網站加載速度。 更快的頁面加載時間可改善您商店的用戶體驗，進而提高您的 Shopify 商店在搜索引擎上的排名和可發現性。

影響 Shopify 商店速度的因素

影響 Shopify 商店速度的因素有很多。 雖然其中一些因素直接在您的控制範圍內，並且您可以對它們採取一些措施，但有些則不是。

你無法控制的因素

以下是一些您無法控制的影響 Shopify 商店頁面速度的因素：

您客戶的位置、設備和互聯網連接

您的客戶可能居住在世界各地的不同地點。 他們還使用不同的設備和互聯網連接強度來訪問您的 Shopify 商店。 這些因素將影響 Shopify 商店加載的速度或速度。

如果客戶對 Shopify 商店的速度有任何不滿，您始終可以建議他們更新瀏覽器版本並清除瀏覽器緩存。 您還可以建議檢查他們的互聯網連接，以確保他們沒有遇到任何停機時間。

本地瀏覽器緩存

Shopify 商店的某些元素會保存或緩存在客戶的本地瀏覽器中。 這減少了加載商店所需的時間，因為瀏覽器可以直接加載緩存的資源，而無需再次從服務器請求它們。

服務器端頁面緩存

您的 Shopify 商店也會緩存在服務器端。 這使您的商店在客戶之前訪問過之後加載速度更快，因為他們將獲得緩存副本。

您可以控制的因素

以下是您可以直接影響的影響 Shopify 商店速度的因素。 在下一節中，我們將討論解決這些因素以提高 Shopify 商店速度的技巧。

應用

您可以在 Shopify 商店中安裝各種應用程序。 每個應用程序都提供不同的功能並改善商店的外觀或功能。 盡量減少您在商店中安裝的應用程序數量將有助於提高您網站的速度。

主題

使用輕量級主題也可以幫助提高加載速度。

主題或應用功能

您選擇啟用的主題或應用功能會直接影響 Shopify 商店的速度。 啟用的主題或應用功能越多，您的商店加載速度就越慢。 允許對您的客戶無用的不必要功能可能會影響您商店的速度，而不會給您帶來任何價值。 您通常希望避免這種情況。

圖片和視頻

大量圖像或視頻可能會導致您的 Shopify 商店加載緩慢。 如果您的商店訪問者等待圖像和視頻加載的時間過長，他們可能會認為您的商店運行緩慢並離開。

字體

Shopify 提供了多種字體類型可供選擇。 雖然這看起來微不足道，但如果您選擇的字體在您客戶的設備上不可用，他們必須先下載它，然後才能查看您網站上的文本。 這會顯著影響您商店的頁面速度。

如何優化 Shopify 商店的速度

您希望將時間和精力集中在您控制範圍內的因素上。 想知道如何通過解決這些因素來優化您的 Shopify 商店速度嗎？ 這裡有10條提示可以幫助你：

1.選擇正確的主題

選擇 Shopify 主題是一個關鍵的決定。 但是，您要確保在選擇與您的品牌相匹配的主題時，確保它也很快並且加載時間最短。 因此，您想選擇一個響應迅速且最新的主題。

Shopify 速度優化

您可以通過禁用所有您未使用或不會為您的客戶提供任何重要價值的模版功能來進一步優化 Shopify 模版的性能。 此外，在選擇主題之前，您可以通過 Google PageSpeed Insights 運行它以了解其性能。

2.選擇正確的字體

要優化您的 Shopify 速度，您需要使用適當的字體類型。 這裡的經驗法則是使用系統字體。 大多數設備默認安裝了系統字體，這意味著您客戶的設備在訪問時不必下載您商店的字體。 這也意味著您的商店通常會加載得更快。

系統字體分為單色、襯線和無襯線類別。 這些類別中有不同的字體，如下所示：

  • Mono ：此類別包括 Liberation Mono、Consolas、Lucida Console、Monaco 和 Menlo 等字體。
  • Serif ：此類別包括 Apple Garamond、Times New Roman、Source Serif Pro、Droid Serif、Iowan Old Style、Baskerville 和 Times 等字體。
  • Sans-serif ：此類別包括 Ubuntu、Helvetica Neue、Segoe UI、BlinkMacSystemFont 和 Roboto 等字體。

Shopify 推薦以下系統字體：Times New Roman、Garamond、Lucide Grande、Courier New、Palatino、Trebuchet MS 和 Monaco。 您可以為您的 Shopify 商店選擇使用其他字體，但如果它們不是常用字體，您商店的頁面可能需要更長時間才能加載。

3. 評估您已安裝的應用程序

Shopify 應用程序提供了多種功能，可以增強客戶的購物體驗、增強商店的功能、提高用戶參與度以及增加銷售額和轉化率。 但是，當您安裝這些應用程序時，它們會在您商店的主題中添加額外的代碼行，並且可能會減慢您商店的頁面速度。

要優化您網站的速度，請定期評估您商店中安裝的應用程序，以確保它們處於檢查狀態。 刪除任何沒有增加價值的應用程序。

4. 簡化您的主頁設計

一般來說，網頁上的項目越多，頁面速度越慢，正確加載所需的時間就越長。 平均而言，客戶只查看商店主頁上全部內容的大約一半。 您不想因為主頁上的客戶不會與之交互的減速元素而冒失去客戶的風險。

理想的 Shopify 主頁設計應僅包含改善用戶體驗並為訪問者提供價值的元素。 您應該使用以下標準評估主頁的每個部分，以確定它們是否必要；

  • 良好的導航：您的商店應該有一個乾淨的界面，訪問者可以輕鬆導航。
  • 願望：主頁上的每張圖片和視頻都應該引起探索商店或購買產品的願望。
  • 價值：您的主頁應包含滿足客戶需求、痛苦、問題和願望的內容。
  • 行動：您的行動號召必須大膽、清晰、易於發現且易於理解。
  • 可信度：社交證明極大地提高了您作為品牌的可信度，並有助於與您的客戶建立基於信任的關係。

為此，請刪除任何不符合這些標準的不必要部分。 您始終可以使用預覽和查看更多鏈接來減少主頁上的元素。 考慮將小部件和社交媒體源從您的主頁移到商店中的其他戰略位置。

您可以利用熱圖來了解訪問者在商店頁面上的行為並更好地對其進行優化。

5.優化收藏和過濾

在優化 Shopify 商店頁面速度時，您應該注意的另一個方面是您的收藏和過濾。 最好創建更具體且產品更少的較小系列，Shopify 使這很容易實現。 您不能在任何產品系列頁面上包含超過 50 個產品。

創建相關且必要的過濾器，使其盡可能少。 如果您的過濾器過多，您的 Shopify 商店頁面將需要更長時間才能加載。 謹慎使用彈出窗口。 它們是在您的產品系列頁面上顯示有關產品的更多詳細信息的絕佳方式。 他們可以幫助客戶決定他們對產品的興趣，並增強購物體驗。

但是，與您網站上的任何其他元素一樣，如果使用不當，它可能會減慢您的商店頁面速度。 如果彈出窗口在產品頁面上的所有信息之前加載，您的網頁可能會變得非常緩慢。

在確定您的客戶是否使用負責觸發彈出窗口的“快速查看”功能時，熱圖可以派上用場。 如果他們幾乎不使用它，請考慮將其刪除。 如果您意識到他們使用它，請嘗試限制您在彈出窗口中顯示的信息量。

6. 最小化重定向並修復損壞的鏈接

在您的網站上進行大量重定向會增加 HTTP 請求的數量，從而延遲數據傳輸過程。 要減少您網站上的重定向次數並將其對您商店頁面速度的影響降至最低，請刪除任何不必要的重定向。 您還應該避免重定向循環——將頁面重定向到其他重定向頁面。

與重定向一樣，斷開的鏈接也會觸發額外的 HTTP 請求，這會直接影響您商店的頁面速度。 為避免這種情況，請考慮使用站點審核工具來檢查損壞的鏈接並修復它們。 您還可以選擇創建自定義 404 頁面，以幫助不小心輸入錯誤 URL 的訪問者。

7.優化您的圖像和視頻內容

高質量的產品圖片對您的商店很重要； 但是，它們可能很重並且會降低您的網站速度。 這使得有必要在不犧牲頁面速度的情況下為客戶提供最好的產品圖片。 您可以通過多種方式優化圖像以提高商店的頁面速度。

首先是減少您在 Shopify 商店中的圖片數量。 您可以通過刪除任何不必要的圖像來做到這一點，這將有助於減少 HTTP 請求的數量。 您可以檢查代碼中的任何空圖像源並將其刪除。

另一種選擇是壓縮圖像。 努力將您的圖像文件保持在 70kb 以下，並保持在 PNG 和 JPEG 文件格式內。 您還可以編寫簡短的描述性圖像文件名和準確描繪產品圖像的 alt 標籤。 圖像文件名和圖像 alt 標籤也有助於您的商店的排名和可發現性。

您不應忽視 Shopify 商店中視頻的重要性。 但是，您可以通過將視頻託管在 Vimeo 和 YouTube 等外部資源上或使用 lite 嵌入來優化視頻。

8. 選擇英雄佈局而不是輪播和滑塊

滑塊和輪播看起來是顯示產品圖片的有效方式，但它們會顯著增加網站的權重並使其加載速度更慢。 更少的客戶可能會與輪播和滑塊進行交互，尤其是在移動設備上。

因此，是時候放棄輪播和滑塊以支持英雄佈局了。 英雄佈局只是一個帶有醒目的文字的大圖像。 它通常放置在主頁的頂部，並立即引起訪問者的注意。 這會顯著影響他們在您網站上的購買行為。

Shopify 速度優化

一個有效的英雄佈局應該具有三個主要方面：

  • 高質量圖像：您使用的圖像應該是高質量的迷人圖像。 不要忘記使文件大小盡可能小。
  • 一個明確的信息：一旦訪客進入您的商店，您的英雄佈局必須產生重大影響。 為此，它必須包含明確的信息，並且應該向訪問者傳達您的品牌價值。
  • 號召性用語：您的英雄佈局應該激發訪問者的一些行動，您可以通過添加明確的號召性用語來實現這一點。

9. 通過在您的網站上實施 AMP 來提高移動性能

隨著移動設備的廣泛使用，您需要針對移動設備用戶優化您的 Shopify 商店。 您可以通過將 AMP 集成到您的 Shopify 網站來實現此目的。

AMP 代表加速移動頁面。 它指的是一種標準框架，旨在讓您創建在移動設備上加載速度更快的網頁。 它們易於使用，可讓您輕鬆優化 Shopify 商店，使其更易於在移動設備上訪問。

Shopify 上有多個應用程序可用於創建 AMP 網頁，以改善移動訪問者的商店用戶體驗。 其中一些應用程序是：

  • 商店警長的 AMP
  • 消防放大器
  • AMP by Ampify Me

10.利用谷歌標籤管理器來組織你的跟踪代碼

跟踪代碼會顯著降低商店的頁面速度。 您可以使用 Google Tag Manager 之類的標籤管理系統來有效地處理這個問題。

Google Tag Manager 是一種工具，可幫助您在一個請求中設置標籤並在一個地方管理您的所有跟踪代碼，包括您的分析。 Google 跟踪代碼管理器還以異步方式加載 JavaScript 文件。 這意味著它不會阻止您的內容被呈現。

請注意，Google 跟踪代碼管理器僅適用於 Shopify Plus 商家。

結論

在本指南中，我們討論了您可以採取哪些步驟來優化 Shopify 商店並提高頁面速度。 實施這些步驟可能需要一些時間，但您幾乎會立即註意到結果。

使用 Adoric Shopify 應用程序可以輕而易舉地在 Shopify 上進行銷售。 它可以讓您通過在 Shopify 商店中展示引人注目的活動來提高轉化率。 Adoric Shopify 應用程序非常直觀，您無需具備任何編碼或圖形設計知識即可使用它。

立即在您的 Shopify 商店中安裝它，看看您的銷售額會增加多少。

安裝 Adoric Shopify 應用