GTmetrix 線上免費分析網站效能缺陷,根治拖慢網頁速度元兇

gtmetrix-00 (by 異塵行者)

「GTmetrix」在首頁開宗明義的說,當你的網頁載入超過4秒鐘的話,將會有很多用戶因此離開你的網站。Google不久前也清楚明白的提到,「網頁速度」是Google搜尋排序的參考指標之一,或許所佔比重不大,但確實已經納入參考。而「GTmetrix」則是一個網站效能分析服務,提供免費的測試與建議工具,指出我們應該如何去優化網頁速度的可行作法。

之前類似的網頁速度免費測量工具,比較知名的有「Pingdom Tools」;不過相較之下,「GTmetrix」在免費、不需註冊的前提中,提供了更豐富的測量結果與「具體的分析建議」;GTmetrix不僅可以讓你觀察網頁中每個元素的載入速度,更重要的是會根據網站目前的效能缺陷,提供實際的網站優化建議,例如會直接告訴你應該延後JavaScript載入、應該壓縮圖檔等等。

對於網站、部落格經營者來說,免費、不需註冊登入但又功能豐富的「GTmetrix」,是用來檢測網站速度優化成果的好工具。

 

  • 內建Google、Yahoo推出的網站效能分析工具:

來到GTmetrix,你只要在網頁中間的輸入欄位,填上你的網站網址,按下〔Go!〕,就可以開始分析自己的網頁載入速度。

這邊GTmetrix使用了兩個知名的工具幫你檢測,一個是Yahoo的YSlow,一個是Google的Page Speed,現在你不用自己額外安裝這兩款測試工具,直接利用GTmetrix,就能獲得Google、Yahoo兩大搜尋引擎所提供的網站效能檢測成果。

前面有提到,網頁速度也是搜尋引擎排序的指標,所以觀察Google和Yahoo如何測試你的網站效能,當然是優化網站非常重要的一環。

 

  • 簡單易懂的網站效能指標評等

開始測試分析後,等待一小段時間就能看到檢測結果,首先你可以在「Summary(摘要)」中,看到兩個總評分數,分別代表透過Yahoo YSlow和Google Page Speed分析後獲得的評等

這裡的等級制度,是透過許多分項指標綜合評比後獲得的,當然「A」級是最好的結果。

gtmetrix-01 (by 異塵行者)

拉到分析網頁的下方,就可以看到網站在每個分項指標中獲得的個別分數(評等),你可以透過標籤分頁查看「YSlow」和「Page Speed」提供的不同評比。

這邊GTmetrix會把網站最需要優化的項目排列在清單的最前面,讓你直接看到應該針對哪些項目對症下藥。而你也可以透過這裡提供的分項指標,去了解優化網站應該顧及的各種層面。

gtmetrix-02 (by 異塵行者)gtmetrix-03 (by 異塵行者)

你可以打開每個分項指標,就可以看到更詳細的相關內容,GTmetrix也透過「what does this mean?」提供了每個分項指標的意義說明。我覺得GTmetrix除了是一個好用的網站效能分析工具外,也可以當做一個優化網站的學習教科書來使用。

gtmetrix-06 (by 異塵行者)

 

  • 測試網頁元素的個別載入速度

在測試結果中切換到〔Timeline〕分頁,可以看到類似Pingdom所提供的「個別網頁元素載入速度」,你可以從清單中,很清楚的看到哪些元素佔用了最多的載入時間,從而你可以決定應該優化哪個部分。

gtmetrix-04 (by 異塵行者)

 

  • 多組網站對比測試

最後,你還可以在單一網站測試分析結果的左方,點選「Compare to another URL」,輸入另外一個網站的網址,就可以透過GTmetrix比較兩個網站在各種層面的效能評比。

gtmetrix-09 (by 異塵行者)

 

  • 小結:

gtmetrix-08 (by 異塵行者)

老牌、免費、不需登入的「Pingdom Tools」,提供的是很直覺的網頁速度測量工具,顯示每個網頁元素的載入時間,讓你知道哪些元件拖慢了網頁速度。

但是「GTmetrix」則更進一步,它不僅僅是一個免費、不需登入的測量工具,而且還具備了分析、建議功能。利用Google Page Speed、Yahoo YSlow這兩大工具的指標評等,GTmetrix能夠從「如何優化」的角度,讓你不只知道哪個元件比較慢,更可以知道應該怎麼去修改。推薦給想要優化網站的朋友試用看看(註冊GTmetrix帳戶後,則可以記錄每次的評比測量結果)。

留言

  1. 超級棒的分析工具,
    謝謝版主的分享^^

    (我的 http://hans543.com ,測試後Page Speed Grade是C,但是Yslow的grade是F...Orz)

    回覆刪除
  2. 這些我網站分析工具,只能作參考
    一個海外網站測試另一個海外
    太多因素影響結果
    DNS query,
    網路有沒有阻塞,等等

    因此不一定能反映現實.

    回覆刪除
  3. 確實如同您說的,就是一個參考,

    這個GTmetrix本身網頁說明也都有提到可能的侷限,

    所以在測試結果上,還是要加上自己的理解與判讀。

    回覆刪除
  4. 測試後Yslow grade是F,Page Speed Grade是B...

    這樣網站速度好嗎....會不會等不及就離開了....
    不太知道要怎麼修改好網站速度的人= =....

    回覆刪除
  5. 這樣還ok啦,因為Yslow grade評比的比較嚴格,
    是適合「網站形式」的SEO到效能的優化評比。

    而Page Speed Grade比較是單純比速度效能,有到B就可以囉~

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Google Maps 我的地圖完全教學!規劃自助旅行攻略

Slack 完整教學與上手心得:找到正確的團隊溝通之道

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

Miro 遠距工作開視覺會議的免費強大白板,專案圖解實例教學

Google 表單自動關閉回覆教學:時間人數到達就過期

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

如何用 AI 工具提升工作效率?三個關鍵步驟讓生成結果更精準有效

Excalidraw 免費 AI 生成流程圖,一鍵畫出知識圖表、專案流程、寫作大綱

ChatGPT Canvas 全新 AI 寫作、程式碼編輯工具,不再只能對話!