Zi 字媒體

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 簡單的使用方式   如果覺得對你有幫助的話. 請幫小弟按個讚吧～