想測試到底什麼元件,在拖慢網頁或部落格的讀取速度嗎?JaveScript?Flash?圖片?憑感覺、目測當然可以,不過這裡有更方便的工具:

線上測試

  • Web Page Analyzer
    這個可以分析讀取不同物件(如圖檔、JavaScript)所耗費的時間,並建議需改善的部份。不過這是美國的網站,所以表示的是從美國讀取該網頁的狀況….
  • Pingdom Tools
    這個能以「時間軸」顯示各元件讀取時間。不過這是瑞典網站,同樣有上述狀況。

本地端測試

  • 瀏覽器 Firefox 套件 “Firebug"
    據說這套件很強大,不過操作介面有點 unfriendly,需要花點時間摸索……不過它的確是功能最完整的最佳選擇啊,若有心仔細研究這個問題,就值得強烈推薦它。

    瀏覽器切換到該網頁分頁,再從工具→Firebug→開啟 Firebug→主控台分頁→enable Network monitoring,就可從網路分頁看到讀取過程的圖…也可選擇只看 HTML, CSS, JS 或 Images 等部份。(重灌狂人亦有 Firebug 教學

    Firebug 官方文件: Network Monitoring 頁面特別指出,JavaScript 檔案一次只讀一個(而不是同時讀很多個),所以參考 JS 讀取過程圖來調整 js 的順序,有助於避免不重要物件拖延了主要內容的讀取。

    Yahoo!有一個加強 Firebug 的套件“YSlow",在 Firebug 會多一個 YSlow 分頁,其中的 Performance 項目可以對網頁各方面表現給予評分(A、B、C…),並給予建議!

  • 瀏覽器 Firefox 套件 “lori (Life-of-request info)"
    這個套件可以在 Firefox 右下角的狀態列上,顯示總網頁讀取狀況的計算結果。若從 Firefox 選項中選擇關掉 JavaScript,會發現許多部落格或網頁都是被 JS 拖慢的。

    大部分狀況….其實只要 js 小玩意兒功能不要放太多就不會慢了……這應該已經是老生常談了,或者參考這篇文章的建議吧(例如把 js 都放到網頁底部):不要讓 JavaScript 拉長你網站的反應時間

ps. 發表於 Ptt 看板 Blog 的原始文章

About these ads