你可能在想,網站速度有什麼大驚小怪?平均網頁加載速度有什麼重要?

Aberdeen Group介紹,頁面加載時間延遲1秒,結果如下:

  • 頁面瀏覽量減少11%

  • 客戶滿意度下降16%

  • CR轉換率減少7%

亞馬遜公司報告說,其網站速度每100毫秒提高1%,而沃爾瑪則增加了1%的頁面速度,導致轉化次數增加了2%。

Google自2010年以來已經將網站速度視為SEO排名演算法的重要指標,甚至繼去年2016年Mobile Only的口號,更改今年2017年的口號和工作目標為Speed, speed, speed!!!

為了提供更好的UX體驗,Google甚至針對Mobile手機版網站創造了Google AMP;網站速度會深深地影響SEO的排名。

六個方法調整網站,可以加快網頁的下載速度:

一、調整圖片大小、並設定延遲載入

所有網站平均圖片佔據下載流量的63%,是網頁下載速度緩慢最大的元兇,

根據從2015年5月的數據顯示,網頁平均大小為2MB,是三年潛得2倍

建立網頁的時候,如果預先將頁面縮小成所需要的大小,頻寬的佔用可以顯著減少。

ex. 標題圖片原始尺寸2048*1365、321KB,調整成768*512之後,容量只使用68.5KB,差了將近5倍

除了在編輯文章的時候上傳已經壓縮過得圖片以外,著名CMS架站系統都有現成的工具可以輔助作業,如WordPress可以使用WP Smush it外掛,或者Joomla!可以使用Imgen元件。

 

另外一個方法是延遲圖片的下載,不要在網頁打開得時候就下載所有的元素和圖片,而是依據瀏覽進度、位置判斷所需要的圖片,這樣子網站的點擊開啟速度會大大增加,也可以減少流量成本,帶來更高的瀏覽量、轉換律,創造更好的UX體驗。

二、使用瀏覽器快取,暫存再利用已經下載過得檔案

設定網站參數,允許瀏覽者可以暫存指定的CSS、JS、圖片等資料,下次再瀏覽時可以不用重新下載取得檔案。

如果是動態網站系統,如Joomla!、WordPress等CMS系統,也可以安裝外掛程式,生成靜態的網頁副本供使用者瀏覽,這樣可以減少伺服器運算等候時間。

 

三、壓縮網頁內容

1.GZip壓縮

現在新的Chrome、FireFox、Safari、Edge等都有支援GZip功能

可以將網站開啟GZip,將網頁內容先壓縮之後再傳送給瀏覽者,可以節約大幅的下載時間

GZip檢測網站,可以檢查網站是否有開啟Gzip

2.css JavaScript 壓縮

可以開啟css、js壓縮,將檔案合併、縮減,減少伺服器交握、溝通傳送過程所消耗的時間

 

四、優化CSS

CSS語言是改變網站設計的關鍵里程碑,這是一個很棒的東西,但是如果寫得不好,會造成瀏覽器、下載的延遲,確保品質良好的程式碼、安排好下載資料的主次,可以幫助讓網頁更快呈現出來。

 

五、選擇更好的伺服器供應商

大多數人的網站都不是自己建立、架設伺服器,而是託管在主機服務商,不論是虛擬主機、VPS主機、託管機房等

以往選擇主機商的時候主要都會是著重在容量、流量、對外頻寬、價格等規格參數上,有些人會看保證可持續服務時間等;現在除了這些以外,主機本身的硬體規格配置、容納客戶量等也都需要注意,好的主機運作速度較快、對外頻寬也充足,可以保證使用者瀏覽網站不會被主機的效能所困囿。

除了這個以外,也要選擇主機商的機房地點,如Google的GCP在彰濱工業區就有機房,如果服務客戶在台灣,那會非常有利。但是如果客戶在中東、歐洲、東南亞等,如果選擇台灣機房、或者中華電信的機房服務,那就會是一個悲劇,台灣對東南亞、中東等地的頻寬很小,而對歐洲的線路則節點太多、繞行太遠。這些都會影響使用者下載的速度和操作的UX感受。

 

六、停用不使用的插件

WordPress安裝太多插件,會嚴重影響網站的速度,非常消耗系統資源,一定要仔細審視,關閉、刪除不需要使用、或者不是很重要的插件。對於其他非主要插件也可以測試一下,在功能和速度之間尋求一個平衡點。

Joomla!會影響速度的是外掛,Joomla!的外掛Plugin是隨時都在運行的,不論這個頁面是否有相關的項目都會運作,所以適當地檢視外掛項目,關閉、停用不是很重要的項目非常重要。或者選擇外掛要測試評估,我之前就有安裝過一個Social類型外掛,這個外掛本身就造成網頁下載延遲增加超過5秒。

 

使用者瀏覽體驗UX是一個非常重要得事情,面對現在碎片化、匆促的手機使用時間,以及受限手機的效能、行動網路的頻寬,網頁要仔細設計建設,確保有優秀的速度和使用者需要的內容、好用的設計。