1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. 網設必知-GTmetrix線上檢測網頁速度與優化

網設必知-GTmetrix線上檢測網頁速度與優化

2012/05/17

梅問題-網頁設計必備-GTmetrix線上網頁速度檢測與優化

  是否覺得網站跟龜速一樣,雖然說透過Firefox的FireBug,可以檢測出拖慢網站的原兇,雖然說已找出兇手,但卻不知該如何解決是好,所以梅干要來分享一個超實用網站,直接線上就可檢測網站,除了找出拖慢網站的原兇外,還會提供相關建議,告訴你要如改善網頁效能,讓網站讀取可以更快速,相當的方便,除此之外也可與別人的網站PK,看看誰卡厲害,現在就來看一看囉!


網頁速度檢測:

網站名稱:GTmetrix
網站網址:http://gtmetrix.com/

Step1
進入網站後,輸入要檢測的網址。
梅問題-網頁設計必備-GTmetrix線上網頁速度檢測與優化


Step2
這時就會開始檢測。
梅問題-網頁設計必備-GTmetrix線上網頁速度檢測與優化


Step3
啊~通通不級格,在評測的部分,越高分越好(A 級),YSlow 的平均得分為 70%,Page Speed 為 79% ,當網站都低於這兩個指標時,就得動手開始優化,而在PRIORITY中,Heigh表示越重要,也需盡快修正。
梅問題-網頁設計必備-GTmetrix線上網頁速度檢測與優化


Step4
先來優化一下圖片。
梅問題-網頁設計必備-GTmetrix線上網頁速度檢測與優化


Step5
當把建議的照片下載,並重新上傳後,總算從C變A啦!雖測評依然還是沒變,再繼續優化。
梅問題-網頁設計必備-GTmetrix線上網頁速度檢測與優化


Step6
經過一番努力後,呼~終於有點進展了,總算向上提昇一個等級了。
梅問題-網頁設計必備-GTmetrix線上網頁速度檢測與優化


Step7
當然也可跟別人PK看看,點右邊的Compare to another URL選項。
梅問題-網頁設計必備-GTmetrix線上網頁速度檢測與優化


Step8
接著輸入要PK的網址。
梅問題-網頁設計必備-GTmetrix線上網頁速度檢測與優化


Step9
哇賽!真不虧是一哥,梅干連車尾燈都看不到。
梅問題-網頁設計必備-GTmetrix線上網頁速度檢測與優化


  這是一個很方便的檢測工具,因此建議身為網頁設計的從業者,可使用看看,且可以的話也盡量提昇網站效能,讓網頁的開啟速度更快,如此一來更能留住訪客,在GTmetrix首頁也提到,當網站在 4 秒內還沒讀取出來,大多數的訪客就會選擇離開,因此這是一個相當重要的課題,不可不重視,也趕快幫自已的網站檢測看看囉!