Shopify 頁面載入速度優化:提高頁面速度的 8 個技巧  | 香港開網店|開Shopify網店服務|網店資料遷移至Shopify服務

【Shopify優化教學】Shopify 頁面載入速度優化:提高頁面速度的 8 個技巧

正所謂「時間就是金錢」,這句話亦適用於你Shopify網站的載入所需時間。在之前的文章我們提及過,頁面載入速度將直接影響你網站上收到的實際流量,從而影響轉化率。

顧客更喜歡網上購物而不是於傳統實體店購物的主要原因正正就是方便和節省時間。如果一個網站需要一個世紀才能成功載入,那顧客為何不直接出門走進實體商店呢?試想像一下,你步行到商店,看到吸引的商品,正打算了解甚至購買。怎知道,店主花了很長時間才慢慢走過來,打開他的店門。當你成功進入店鋪,並要求店員為你帶來你想要的物品時,他緩慢地移動並在10分鐘後才將商品從倉庫拿出來。請問你會否傻傻站在那裡等待?還是你會決定直接離開,去另一家可以快速為你提供商品的商店呢?答案是很明顯的。

網購的原理是一樣的。如果你的網站頁面載入時間超過 3 秒,你將損失 40% 的流量。你的潛在顧客甚至可能會切換到其他網站,通常是你競爭對手的網站。因此,一旦你成功吸引人們進入你的商店,請確保不要因為網站速度緩慢而強迫顧客們離開。載入緩慢的網站會降低轉化率和利潤。因此,你為了自己的 Shopify 商店所付出的所有努力都將因為網速這個因素付之東流。

在這篇文章中,我們將會教大家一些簡單的技巧來優化你的 Shopify 網店載入速度。

 

加快 Shopify 電子商務商店的八個簡單技巧

1. 只使用一張高質量商品圖片作為首頁大圖

很多張Slider會令網站看起來很有吸引力,又可以讓顧客了解商店的不同商品。但是您知道嗎,這是會令網站的檔案大小變大的。當用戶點擊主頁連結時,高質量圖像往往都需要很長時間才能成功載入。這對顧客來說,可能是一個很大的障礙。為了使你的網頁載入速度加快,請移除多餘的Slider圖片並使用清晰的號召性用語 (CTA),例如「了解更多」、「馬上購買」等等。

 

2. 壓縮和縮小圖像

圖片是每一間網店的命脈。沒有圖片的商店,就等同於沒有產品的實體零售店。為了使商店看起來有吸引力並讓人們更容易了解商品,賣家通常都會從不同角度拍攝大量的圖片,然後再上傳。雖然這可以讓顧客更了解產品,但每增加一張圖片,都會加長網站的載入時間。這個問題的實際解決方案是壓縮圖像檔案大小,以使其載入速度更快。有許多插件(例如TinyPNG)可以壓縮圖像文件。優化所有圖像後,頁面的載入時間將大大減少。

 

3.選擇一個可以快速載入的主題

無論你建立的是什麼網店,選擇佈景主題設計是商家最關鍵的決定之一。有吸引力的店面將會吸引潛在客戶探索商店,影響轉化率的高低。因此,選擇一個與品牌理念、產品和潛在受眾相類近的主題是很重要的。但是,你亦需要確保你選擇的佈景主題可以快速載入。每個額外的元素都會在你的網頁上增加負載。所以,選擇帶有大量視覺效果、在首頁加入影片等等的佈景主題,是一定會影響網站頁面載入速度。在購買任何佈景主題之前,我們強烈建議你在 Google Page Speed Insights 上先查看主題的速度分數再決定。

 

4. 延遲加載圖片(Lazy Loading of Images)

當你在上網時,看到網頁的圖像永遠都無法載入,你會感到很生氣。這是相當正常的狀況。當產品頁面上的圖片一直無法載入時,必定會讓顧客心情不好,從而離開你的網店。

電子商務網站通常架構都非常龐大,有很多不同的頁面。當顧客點擊網站的連結時,瀏覽器必須採取行動並下載頁面上的所有可用內容,以便為用戶瀏覽網頁做好準備。因此,瀏覽器加載所有內容需要時間,如果時間太長,便會使顧客感到煩躁了。

延遲加載這個技術是基於資訊供求原則而設計出來的。瀏覽器只加載顧客首先看到的內容,即首屏(Above-the-fold)內容。由於瀏覽器不必同時加載整個網站頁面的內容,所以便能夠大大減少頁面加載時間,令顧客更快能查看到頁面的內容

 

5. 為您的網站集成 AMP 頁面

AMP 或 Mobile Accelerated Pages 是指一種標準框架,旨在使商家能夠為手機建立快速載入的網頁。相信大家都知道,智能手機已經不再是奢侈品;相反,它們在這個世界中已經慢慢地變成必需品了。 Shopify 商店提供了許多應用程式,幫助你創建 AMP 網頁以提升移動用戶的用戶體驗。

 

6. 盡量減少安裝的應用程式數量

應用程式非常實用。你只需為網站安裝正確的應用程式,即可在WordPress、Shopify 等等的網店上接駁不少強大的功能。但是,安裝這些應用程序也會有缺點。它們會在你的網頁上增加負載。原因是這些應用程式內包含大量在後台運行的 JS 和 CSS 文件。所以即使沒有人在使用它,網站一樣會越來越慢。

因此,如果網站速度受到影響,請你檢查一下你安裝了什麼應用程式,並刪除一些不再需要的應用程式。你在檢查時,很可能會發現你以前曾經安裝過一些應用程式,但忘記了卸載它們。同樣,如果你不再需要任何應用程式,請將其刪除以減少網頁的負載。

另一個提高頁面速度的有用技巧,便是刪除你認為會增加載入時間的應用程式,同時為這些慢吞吞的應用程式尋找替代方案(例如進行嵌入或找出一個更快的程式)。

 

7.修復無效連結

每個商家都致力為其用戶提供良好的購物體驗,因此請盡量減少重定向和無效連結。 如果你的網站有過多的重定向和損壞的連結,會造成性能問題並降低用戶體驗。 此外,它還會影響你的 SEO,從而阻礙網站在搜索引擎結果頁面上的排名和可見性。

 

8. 分析網頁性能

列表中的最後一個技巧便是在 Google PageSpeed Insight 上分析你的網頁,以確定網站中哪些區域拖慢了你的網站,並根據提供的建議減少加載時間並提高網站速度和性能。

以下是 Google PageSpeed Insights 為移動版和桌面版網站揭示的一些關鍵要素:

  • 縮小 CSS、JavaScript
  • 優化圖片
  • 在首屏網頁內容中刪除阻止渲染的 CSS 和 JS
  • 減少服務器響應時間
  • 使用瀏覽器緩存
  • 消除著陸頁重定向
  • 壓縮

分析在 Google PageSpeed 上的網站性能報告,可以幫助你更容易識別網店無法快速載入的原因。

Related Posts

【快訊】香港Shopify網店可用HSBC PayMe Business收款!|2022香港消費券
【快訊】香港Shopify網店可用HSBC PayMe Business收款!|2022香港消費券
不少店主都認為只有Shopline跟Boutir這類專攻香港的網店平台才能接駁滙豐銀行推出的PayMe電子錢包。但大家知道嗎?原來在不久前,大家已經能在Shopify上使用PayMe Business收取貨款了。
Read More
【Shopify香港】什麼是Facebook Conversion API (CAPI)?為什麼作為店主的你必須知道?
【Shopify香港】什麼是Facebook Conversion API (CAPI)?為什麼作為店主的你必須知道?
作為Shopify網店店主或Facebook廣告平台管理者,你身邊的人一定都在談論 Facebook Conversion API,同時你亦應該已經收到來自 Facebook 的一系列通知,內容大部分都是 iOS 14 更新和實施 Face
Read More
為什麼我的圖片一放上Shopify就變模糊? Shopify處理圖像檔的原理解析
為什麼我的圖片一放上Shopify就變模糊? Shopify處理圖像檔的原理解析
很多人都覺得 Shopify 會修改或壓縮你上傳的圖像檔案。雖然這個講法十分之流行,我們有時亦會跟客戶這樣解釋(溝通上比較省時),但從技術層面來說,這是一個十分常見的誤解。
Read More
×