網頁載入速度緩慢?三個技巧輕鬆優化提升網站體驗

明明花大錢做了一個網站,但是網站卻沒有流量,或者網站有流量但網站數據中的跳出率、離開率超高?在這邊會帶你做好品牌電商網站上線前的全面盤點,讓訪客不只是路過經過,還能成功為網站帶來金流轉單率上升。
2022-12-09
適用商家類型:

目錄

  • 1.網頁載入速度會造成的影響?
  • 2.如何檢視網頁速度
  • 3.優化方法一 調整圖片大小
  • 4.優化方法二 壓縮圖片
  • 5.總結
網頁載入速度會造成的影響?

當公司團隊慶祝企業的品牌電商網站終於要上線的同時,並且細心地做了關鍵字操作及優化自然流量,也陸續投放廣告來導入廣告流量,之後利用Google Analytics等網站工具檢視數據後發現訪客停留時間短,並且跳出率異常的高,因此做了很多次的廣告文案及商品調整,但仍是找不到問題?

對於消費者來說,品牌電商網站比起線下傳統通路少了面對面的溝通及互動,所以除了網站動線上的安排及文案上的細膩操作,最重要的是第一眼印象—視覺。

所以在品牌電商網站的前期,營運團隊會投注大量資源來做出吸引消費者的眼球,來提高停留時間及轉換率,並降低消費者的跳出率。但是當網站正式上線後,相關的電商營運數據不佳,通常團隊會先檢討整體網站的動線,到商品文案及廣告面,並花了許多時間來做大量的修改。



在網路普及下的台灣,消費者使用行動裝置瀏覽且發生購買行為約占瀏覽數據的6~7成,但是行動網頁瀏覽速度還有很大的提升空間。據Strangeloop Networks 統計,在同樣的網路條件下,相同網頁如果使用行動端瀏覽,平均會比電腦瀏覽慢40%!根據M2微商城的數據分析庫得出,網頁回應時間可容忍的閥值是2秒,一旦超過3秒,會有40%的使用者放棄瀏覽頁面。

網站載入速度不佳的部分會有許多的原因,撇開品牌電商網站系統上的主機速度不佳,影響最大的部分就是眼前的真凶,就是與消費者第一眼接觸的「圖片」。

在網站的各個圖片上,商家的出發點都是為了消費者能夠擁有最佳的觀看體驗, 所以圖片並不會刻意作壓縮,只怕消費者對於網站體驗不佳。就是在力求美觀的出發點上,消費者將會花非常長的時間去載入網站,尤其在網速不佳的情況下,消費者反而花最久的部分在於網站整體的載入時間,因此失去耐心就離開我們精心經營的網站及內容,即使花了很多心力、時間於網站圖片上。



舉例來說,假設首頁大小以10M來算,圖片可能就佔了90%的網站大小,若有20張近500KB的圖片來說,透過圖片壓縮最佳化軟體處理後,網站的整體大小可能縮減到70%以上,這樣可得知網站圖片優化前後,對於消費者的瀏覽體驗有多大的影響。在這邊將會帶你從頭開始優化圖片上的體驗,讓顧客不再因為載入時間過久而離開你的電商網站。
如何檢視網頁速度

步驟一:1. 首先在Google Chrome瀏覽器下打開網站後,按下鍵盤上的control+F12 或 點擊右鍵後選單中的「檢查」選項。




步驟二:這時會跳轉到Google Chrome瀏覽器的開發人員選單。並請紅框中的項目勾選來做設定,依順序點擊「Network」選項並勾選「Disable cache」,完成後請按F5或重新整理來重新載入,就會得到此頁面圖片檔案的大小。




步驟三:點擊圖中「Size」來做排列,就可以找出到底是哪個圖片檔案過大拖垮了網站載入的速度,單一張圖片尺寸建議不超過1MB。




M2微商城貼心小叮嚀:
1.網站在載入圖片時,會是多工(多線程)作業的,所以在設計及優化商品圖片時,盡可能將圖檔畫面做適當的大小裁切,這樣子就不會有單一檔案圖片檔案過大的問題。
2.舉例來說,單一圖片檔案10MB的情況下,若適當的切成10個為1MB大小的圖片檔案,後者所舉例的小檔案多圖片載入速度可能會比單一大型圖片檔案快一倍以上!
優化方法一 調整圖片大小

以使用Photoshop製作圖片為例
1.產生的圖片尺寸以符合各版面的最佳建議尺寸
2.圖片儲存時,圖片格式請設定為jpg,最佳化請設定為 8 (高)

如下圖所示


優化方法二 壓縮圖片

推薦使用Windows的用戶可下載RIOT (支援批次壓縮),Mac用戶可下載ImageOptim 免費工具。

RIOT網站官方下載點: https://riot-optimizer.com/
ImageOptim官方下載點: https://imageoptim.com/mac


這邊就先以Riot來做舉例
(此文章圖片皆經由RIOT做過圖片壓縮最佳化)

步驟一:圖片格式請選擇jpg,壓縮比可選擇70上下。





以一張106.35KB的圖片來說,透過RIOT最佳壓縮後的圖片尺寸剩下31.4KB,減少了超過70%的檔案大小。




讓我們放大圖片來看,將圖片局部放大到140%的情況下,除非是非常仔細的看,否則在一般情況的瀏覽下幾乎沒有差異。
(左圖為壓縮後,右圖為壓縮前)





批次或者大量圖片壓縮
步驟一:圖片格式請選擇jpg,壓縮比選擇70%




步驟二:完成後請選擇上方的「Batch」按鈕




步驟三:進入批次處理介面「Batch optimizer」後請點選加入圖片「Add images」,選入需要批次處理的圖片檔案。




步驟四:左上角有Additional tasks選項,在這邊能做比較細部的調整及清除工作階段。




步驟五:之後請選擇好輸出路徑資料夾「Output folder」,以上完成後請直接點選 開始按鈕 「Start」,之後RIOT就會開始處理批次圖片檔最佳化壓縮




最後RIOT會告知您壓縮後的檔案約縮小了多少的百分比,這樣就完成了批次圖片壓縮最佳化的部分囉。
總結

分享了那麼多關於圖片優化的內容,讓M2微商城幫大家做懶人包總結。

✔️圖片優化的目標:為在網頁視覺上看起來可接受的情況下,盡可能降低圖片的檔案大小,來改善網站訪客的使用體驗,優化消費者的進站數據

✔️圖片優化的好處:加速用戶開啟網頁的速度,可以大幅降低網頁的跳出率以提升轉換,並節省流量以降低主機費用支出。