兩款實用的網頁速度優化輔助工具

網站速度不但對關鍵字排名具有影響,更是一個考驗使用者耐心的重大因素,以當前的行動裝置趨勢來說,網頁速度更是顯得重要,有越來越多使用者是用手機在外面上網,使用者很可能是在搭捷運、正在走路當低頭族,充分利用這些零碎且寶貴的時間上網,若進到了一個網站讀取速度太慢,使用者是不可能有耐心等候網頁載入完畢的!
以下就來介紹兩個好用的網頁速度測試工具, PageSpeed Insights和WEBPAGETEST,透過這兩個工具就可以很容易得知拖慢網站速度的問題根源,就可以對症下藥囉!
第一個Google提供的PageSpeed Insights
(https://developers.google.com/speed/pagespeed/insights/)
Google提供的PageSpeed Insights
進到網頁中只要輸入您的網址,按下分析,很快的就會得到分析結果
Google PageSpeed Insights 分析結果
我們可以發現到,檢測結果頁面預設顯示的是行動版分數,可見行動網頁優化現在是多麼重要啊!
在測試結果上面我們可以看到有三個分類,必須修正的問題、建議修正的問題和通過幾項規則。
Google PageSpeed Insights 修正問題提示
這些問題都根據影響速度程度大小依照優先權排列,點選顯示修正問題的做法,Google還會點出問題發生的所在及原因,點選問題的藍色連結還會有更進一步的說明(不過這些說明通常是英文)
Google PageSpeed Insights 修正問題提示詳細資訊
既然Google PageSpeed Insights提供了很簡易使用的介面與說明,非常容易發現問題,與得到解決辦法,那為什麼還需要介紹另外一個工具呢?
因為好還要更好!快還要更快囉!
後面介紹的這個工具比較進階一些
WEBPAGETEST (http://www.webpagetest.org)
WEBPAGETEST網頁速度測試工具
WEBPAGETEST網頁速度測試工具
同樣是將要測試的網址貼上,下方可以選擇測試主機的所在位置與瀏覽器,按下分析後等待一下就立刻會得到分析結果
WEBPAGETEST網頁速度測試工具 測試結果
上面同樣會顯示有哪些項目需要改善(右上角紅紅綠綠方塊處),中間的表格則顯示第一次執行與再次訪問的時間、檔案大小,下方則有整個頁面執行的時間軸圖表、畫面截圖以及加載過程的慢動作影片,最下方的圓餅圖則可以看到頁面當中各種檔案的比例,功能非常齊全與完整。
測試結果頁面右上角有幾個紅紅綠綠的方塊,這裡如同Google PageSpeed Insight告訴了你網站有做到什麼、沒做到什麼
WEBPAGETEST網頁速度測試工具 優化狀況清單
點選進入後可以看到頁面當中載入的元素詳細的壓縮、緩存及CDN等優化狀態清單
WEBPAGETEST網頁速度測試工具 時間軸圖表
點選時間軸圖表則可以清楚看到各個檔案的載入情形,可以很容易發現到是哪個檔案拖慢了頁面速度。如此一來就可以針對單一檔案進行調整優化,也許Google PageSpeed Insights檢查出的大問題都做到了,但透過WEBPAGETEST則可以更吹毛求疵的找到能夠再優化的細節!