• EN
香港:(852)3749 9734
廣州: (020) 3808 3267
[email protected]

新聞資料

深度解讀網站用戶體驗的要素

用戶都是喜歡偷懶的,如果你的網站操作效率很低,就會令用戶煩躁,進而導致不好的體驗,甚至出現壞口碑。用一個粗略的說話是,完成任務的難度與其所需步驟的平方成正比,那麼,縮短完成路徑就是幫用戶偷懶,就是好的用戶體驗。
 
舉個正面的網站實例來說明。登陸美國亞馬遜網站,當你進入一個商品頁面之後可以無刷新切換商品的規格,比如我要購買一臺蘋果筆記本電腦,我打開了商品頁(如下),商品右側會有個版本切換的選項,在這裏我可以快速查看不同配置的電腦價格,只需將滑鼠移動上去,商品圖片、價格等資訊就會自動發生變化。這種人性化的設計,為想要比較商品的多個版本的用戶提供了極高的操作效率,用戶自然喜歡。
 
1、減少HTTP請求數
 
用戶在打開一個網頁的時候,後臺程式回應用戶所需的時間並不多,用戶等待的時間主要花費在下載網頁元素上了,即HTML、CSS、JavaScript、Flash、圖片等,統計顯示,每增加一個元素,網頁載入的時間就增加25-40毫秒(取決於用戶的帶寬情況)。
 
所以,想要提高網頁打開速度,就要減少HTTP請求數,方法有3種:
 
1)減少不必要的HTTP請求,例如用CSS圓角代替圓角圖片,減少圖片的使用。
 
2)合併檔,對於文本檔,可以直接合併內容。例如將多個JS(JavaScript的簡稱)檔合併成一個,將多個CSS檔合併成一個。
 
3)優化緩存,對於沒有變化的網頁元素(如頁頭、頁尾等),用戶再次訪問的時候沒有必要重新下載,直接從流覽器緩存裏讀取就可以了。
 
2、使用CDN(Content Delivery Network,內容分發網路)
 
CDN由一系列分散到各個不同地理位置上的Web伺服器組成,它根據和用戶在網路上的靠近程度來指定某臺伺服器回應用戶的請求。當你的網站圖片很多事,就一樣要使用CDN了,比如現在的電商網站,幾乎都在使用CDN。
 
3、壓縮網頁元素
 
網頁中的每個元素越小,下載所需的時間就越少,這個很好理解。現在比較成熟和流程的壓縮網頁的方式,是通過Gzip,我自己的實操經驗來看,一般可以將網頁文本內容減少70%以上。
 
4、樣式表放在網頁Head部分
 
這也是我實際操作過的案例,把樣式表(CSS檔)移到網頁的Head部分,可以提高頁面的加載速度,讓頁面元素順序顯示。
 
5、把JS檔放到網頁底部
 
網頁打開時,所有元素是順序顯示的。由於JS檔的特殊性,其相比其他元素來說,會加載的很慢,在JS檔下載完成之前,其他後面元素的順序顯示將被阻塞,因此把JS檔儘量放在底部,意味著內容能被快速顯示。
 
6、把樣式表和JS腳本放到外部檔中
 
儘管將樣式表和JS腳本直接寫入網頁HTML中,可以減少外部檔調用數量,但是,這樣做會增加網頁的檔大小。綜合來看,將樣式表和JS腳本放到外部檔中,也許用戶首次訪問時會有點慢,但是後續在訪問網站時,用戶直接通過流覽器緩存就可以用,從而達到減少HTTP請求數的目的,為最優的做法。
 
寫在最後的話:
 
在提升網頁打開速度經常被忽視的一個問題是回應。對於用戶來說,每次的操作,不管返回結果是慢,還是快,都要及時予以回應,最典型的例子就是:當用戶點擊打開一張圖片時,是否有百分比數字顯示的進度條,就是一個典型的回應設計。