GTmetrix - 網頁效能測試

 

現在上網的人胃口越養越大

ㄧ個網頁如果打開超過3秒後沒有出現畫面

使用者馬上點擊右上角"關閉視窗"

實在很難想像

以前撥接的時代還能忍受打開IE還要等五分鐘才開始有畫面的情境...

下面跟大家介紹ㄧ款網頁效能測試工具 GTmetrix

使用前先來介紹一下 GTmetrix 的優點

1. 不需安裝任何軟體、不需植入任何程式,直接線上使用 ( 這點足以讓許多網站企劃或非工程師的工作人員大大減少工作負擔 )

2. 不需申請帳號 ( 比起其他免費線上工具,會要求使用者註冊來的好太多了 )

3. 除分析之外,還提供具體建議,告訴你如何優化來解決效能問題

4. 使用 Page Speed 、 YSlow 兩大搜尋引擎(Google、Yahoo)的檢測標準來分析

5. 單ㄧ檔案分析 ( 記錄每ㄧ個嵌在網頁中的js檔、圖片檔...等檔案的下載時間 )

6. 可下載PDF檔

7. 簡單好用

( 這也可以列成一點 ? 真的!! 網站企劃或是網頁測試人員只要會用,公司的工程師ㄧ定對你又愛又恨!! )

講那麼多,還是先來看看如何使用吧~

Step 1:

連上 GTmetrix  http://gtmetrix.com/

Step 2:

在欄位填上你要測試的網址,按下GO

 GTmetrix_1   

過約ㄧ分鐘...

GTmetrix_2  

就會出現如上圖的測試結果

紅框處就是使用 Page Speed 、 YSlow 分析出來的結果

GTmetrix_4      

上面這張圖告訴你分別用了 Page Speed 、 YSlow 分析後的細部項目

GTmetrix 會把需要優先優化的項目依序向下排列,所以在最高的位置,也就是必須優先優化的項目

接下來我們來看看 GTmetrix 告訴我們如何優化

先看下圖這個項目 Minify CSS ( 將CSS檔最小化 )

GTmetrix_css   

1. 項目名稱 :逐項列出需要最小化的CSS檔

2. 要修改的CSS檔,點下就可以看到原始CSS檔,也是網站正在使用的CSS檔

3. 優化後的CSS檔,點 Optimized version 就可以看到優化後的版本,也可以建議工程師(或設計師)使用優化後的圖檔

說明:在未經優化的狀態下,瀏覽器在解讀時必須過濾許多空白字元、換行,且檔案會變的比較大

再看ㄧ個範例,Optimize images

GTmetrix_image  

1. 項目名稱 :逐項列出需要優化的圖片檔

2. 要修改的圖片檔,點下就可以看到原始圖片檔,也是網站正在使用的圖片檔

3. 優化後的圖片檔,點 Optimized version 就可以看到優化後的版本,也可以建議設計師使用優化後的圖檔

說明:ㄧ般設計師剛做好的圖,圖片品質最好、解析度最高、檔案也最大,但是有些情況下,網頁不需要用到這麼好的圖檔

(例如:按鈕圖、小icon...等圖;碎碎念:看懂就好了嘛,Retina也不一定分的出來阿)

接著,我們看一下檔案的載入速度

 GTmetrix_timeline  

1. 點擊 Timeline

2. 載入檔案的時間

3. 檔案的路徑與名稱

說明:從這裡可以看到那ㄧ個檔案載入的時間最長,因為檔案載入時間越長,就影響網頁速度,可以依據這個標準再去做更深入的檢查,那這邊就得請工程師去做測試了

最後,測試完總得給老闆個交代

但總不能叫他自己來測試,所以得留個報告,因此 GTmetrix 也提供PDF下載功能,夠佛心了吧!!

GTmetrix_pdf   

也要請大家注意:

數值只是參考,並非絕對 !! 因為會影響數值的狀況很多,包含網路狀況、伺服器狀況都有可能

筆者甚至發生過,同一段時間內測出2、3種數據,只要不是落差太大,取平均值參考即可

重要的是,下面的項目有沒有做優化,那才會是直接影響效能的因素

以上就是 GTmetrix 簡單的使用方式

 

如果覺得對你有幫助的話. 請幫小弟按個讚吧~

 

 

arrow
arrow

    newaurora 發表在 痞客邦 留言(0) 人氣()