史丹利愛碎念

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

過約ㄧ分鐘...

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

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

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

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

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

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

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

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

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

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

再看ㄧ個範例，Optimize images

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

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

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

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

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

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

1. 點擊 Timeline

2. 載入檔案的時間

3. 檔案的路徑與名稱

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

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

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

也要請大家注意：

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

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

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

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

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