全站熱門文章

品牌電商網站上線前的全面優化，最重要的五件事(圖片優化篇)

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

2020-12-10

#網頁讀取速度 #停留率 #SEO #動線優化 #使用者體驗 #圖片尺寸調整 #美萃思電商 #MatrixEC #DR.EC #網路開店平台 #品牌官網 #此篇文章圖片皆經由RIOT做過圖片壓縮最佳化 #RIOT #ImageOptim

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

檢視藏在細節裡的魔鬼

讓品牌電商網站透過電商煉金數據重新找回人潮，提升品牌電商競爭力

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

所以在品牌電商網站的前期，營運團隊會投注大量資源來做出吸引消費者的眼球，來提高停留時間及轉換率，並降低消費者的跳出率。

第一眼印象-視覺

品牌電商網站比起線下傳統通路少了面對面的溝通及互動

所以除了網站動線上的安排及文案上的細膩操作，最重要的是第一眼印象-視覺

因此在品牌電商網站的前期，營運團隊會投注大量資源來做出吸引消費者的眼球，來提高停留時間及轉換率，並降低消費者的跳出率。

其實魔鬼藏在細節裡，其中一環就有可能是你的網站載入速度不佳

但是當網站正式上線後，相關的電商營運數據不佳，通常團隊會先檢討整體網站的動線，到商品文案及廣告面，並花了許多時間來做大量的修改

在網路普及下的台灣，消費者使用行動裝置瀏覽且發生購買行為約占瀏覽數據的6~7成，但是行動網頁瀏覽速度還有很大的提升空間。據Strangeloop Networks 統計，在同樣的網路條件下，相同網頁如果使用行動端瀏覽，平均會比電腦瀏覽慢40%！

根據MatrixEC的數據分析庫得出，網頁回應時間可容忍的閥值是2秒，一旦超過3秒，會有40%的使用者放棄瀏覽頁面。

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

在網站的各個圖片上，商家的出發點都是為了消費者能夠擁有最佳的觀看體驗，所以圖片並不會刻意作壓縮，只怕消費者對於網站體驗不佳。

就是在力求美觀的出發點上，消費者將會花非常長的時間去載入網站，尤其在網速不佳的情況下，消費者反而花最久的部分在於網站整體的載入時間，因此失去耐心就離開我們精心經營的網站及內容，即使花了很多心力、時間於網站圖片上。

舉例來說，假設首頁大小以10M來算，圖片可能就佔了90%的網站大小，若有20張近500KB的圖片來說，透過圖片壓縮最佳化軟體處理後，網站的整體大小可能縮減到70%以上，這樣可得知網站圖片優化前後，對於消費者的瀏覽體驗有多大的影響

在這邊，DR.EC將會帶你從頭開始優化圖片上的體驗，讓顧客不再因為載入時間過久而離開你的電商網站。

首先先帶各位使用工具來檢視網站的載入速度，在這邊DR.EC會使用下述網址

Webpagetest :
https://www.webpagetest.org/

1. 之後請輸入網站網址，並且Test Location請設定在Taiwan，除非我們有特定要給其他地區消費者來瀏覽網頁，再來做更改。
2. Browser(瀏覽器)的部分提供Firefox及Chrome各版本做選擇，這邊維持不變，我們選擇Chrome
3. 點擊Start Test，等待時間約2~3分鐘，這個測試網站共會測試三次來取平均值

完成後將會得到如下圖的報表，可點擊進去來了解細部結果

點擊報表後請滑動到Request Details，並點擊Bytes Downloaded，來做網站檔案大小的排序(如下圖)

這樣就一目了然的了解，到底是網站的什麼檔案太大導致使用者體驗不佳導致跳出、離開我們的網站囉

若不需要了解網站的載入速度

DR.EC還有快又有效的檢查方式

1. 首先在Chrome環境下打開網站後，按下鍵盤上的F12 或點擊右鍵後選單中的”檢查”選項

2. 這時會跳轉到Chrome瀏覽器的開發人員選單

3. 這時請按照DR.EC所勾選的點擊的項目來做設定，在這個部分請按順序點擊黃色底線的Network選項並勾選Disable cache，並將Filter設定在Img，完成後請按F5或者快速整理按鈕來重新載入，就會得到網站圖片檔案的大小

4. 之後點擊橘色圓框所框起的”Size”來做排列，就可以找出到底是哪個圖片檔案拖垮了網站載入的速度

DR.EC貼心小叮嚀

1. 網站在載入圖片時，會是多工(多線程)作業的，所以在設計及優化商品圖片時，盡可能將圖檔畫面做適當的大小裁切，這樣子就不會有單一檔案圖片檔案過大的問題

2. 舉例來說，單一圖片檔案10MB的情況下，若適當的切成10個為1MB大小的圖片檔案，後者所舉例的小檔案多圖片載入速度可能會比單一大型圖片檔案快一倍以上!