這是個分秒必爭的時代

記得有個數據顯示,普偏人對網頁等待的門檻是2秒鐘,

平均若是超過2秒有不好的體驗(例如2秒仍是空白),就會直接關閉離開,

另外如果網頁的反應太慢,操作LAG的話,也會大大的提高離開率


影響到UX使用者體驗的網頁速度,主要分為兩種指標

1.讀取速度 - 流量

2.處理速度 - CPU

 

如果網頁裡有一堆大檔,肯定會開的很慢,這是常識了!

但處理速度呢?如果頁面中有FLASH,或者Javascript,在前端運算的語法,佔用的是操作者裝置的CPU速度,

可能是電腦,可能是手機,大概的感覺就是人們說的"很卡",

 

以下分享兩個測速網站

 

第一個可以將所有網頁中的元素通通依照讀取順序速度排出列表,

你可以很直覺得知道哪個元件佔用多少頻寬及反應速度

Pingdom Website Speed Test
http://tools.pingdom.com/fpt/

 

第二個就很強大了

除了跟前一個功能差不多外,還增加了CPU的分析!

WEBPAGETEST
http://www.webpagetest.org/

 

請看上圖的CPU Utilization是處理器的佔用率,剛開啟網頁會佔用CPU就不看,預載meta是這樣的,

但繼續往右看並對照上面,很明顯是第35項開始的元素,原來jquery的css讀取時會吃CPU?

而第二行的 Bandwidthin是流量,很明顯21的bootstrap佔很大,還好是放在CDN裡~

 

使用者體驗最佳化,不僅只是"視覺"與"習慣"的調整,

速度相對的是人的耐性,開google首頁跟開yahoo首頁的感覺就大不同,

為了視覺而犧牲了速度觀感,相信對使用者體驗還是有影響的~

 

善用此工具,如此即可自己判斷卡在哪,慢在哪~


發表自: 九五二七九五二七
愛漫畫愛遊戲愛上網愛星爺,小時摸到阿羅士與AppleII後註定宅一輩子,從紅白機玩到PS4,從386打到Xeon,沒日沒夜的打電動;待過所有宅產業,從光華混到NOVA,從遊戲滾到動漫,從攝影器材爬到網路電信,喜愛學習多於睡覺,無時無刻散發一股宅味,但號稱長的像梁朝偉XD

覺得讚想推薦或分享嗎?