Re: [問題] 請問有沒有辦法知道blog的開啟速度

[randle (*________*)]

※ 引述《pcmangood (pcman好)》之銘言：
:   我的意思是，我想知道我blog哪個元素開啟的最慢，
:   到底是什麼東西在拖垮瀏覽速度。
:   我自己的原則是我不放音樂、不放大圖、不放奇怪的flash等等，
:   換句話說我希望blog能兼具內容與瀏覽速度，
:   而我也試圖在美觀與速度間取得平衡，不過成效看來似乎不怎樣。
:   我放網誌元件的空間是hinet的個人網頁空間，
:   不論圖片或.js檔都放那邊，對台灣網友而言應該不算慢，
:   我使用的網路是Hinet 10M/2M，可是還是覺得開自己的blog開很慢。
:   我是個很沒有耐心的人，倘使站台開啟的慢，就算他內容再好我也懶得看，
:   所以自然也不希望自己的blog開很慢，讓人懶得點，等了就火大……
:   因此我想請問，有沒有辦法可以測出哪個檔案拖我開啟時間呢？
:
:╔══════════════╗╔壹》請使用FireFox瀏覽器以達最佳瀏覽效果。
:║http://liohimo.blogspot.com/║╠貳》如有亂碼請將編碼改為UTF-8。
:╚══ 歐蒐雷米歐的部落格 ══╝╚參》站名就叫「沒有網頁可以顯示」(′︹`)y=~

研究了一陣，順便整理一下查到的相關工具....

1' Web Page Analyzer
   http://www.websiteoptimization.com/services/analyze/

  這個可以分析讀取不同物件（如圖檔、JavaScript）所耗費的時間，
  並建議需改善的部份。

  它指出讀取圖檔和js較久。
  不過這是美國的網站，所以表示的是從美國讀取該網頁的狀況....

   Pingdom Tools
   http://tools.pingdom.com/

  這個可以以時間軸顯示各元件讀取時間。
  不過這是瑞典網站，同樣有上述狀況。


  圖檔是放在國內hinet，國內讀取速度應快，那問題應該是在js。



2' 我用 Firefox 套件 "lori (Life-of-request info)" 計算總網頁讀取狀況，
   https://addons.mozilla.org/zh-TW/firefox/addon/1743

  讀取總網頁約需 12 秒。網頁有 80 requests。
  取消 js 後約需  2 秒。網頁有 37 requests。
  足以相信大多數時間是耗在 js 上。



3' 到底是哪個 js 在慢呢？要查詢本地端讀取各元件的時間，
   可用的工具是 Firefox 套件 "Firebug"
   https://addons.mozilla.org/zh-TW/firefox/addon/1843

  據說這套件很強大，不過操作介面有點 unfriendly...

  在該網頁分頁，從工具→Firebug→開啟 Firebug
  →主控台分頁→enable Network monitoring
  就可從網路分頁看到讀取過程的圖...也可選擇只看 HTML, CSS, JS 或 Images 等部份

  我不太懂怎麼完整解讀這結果
  不過我想就是 js 太多了

  Firebug 官方文件（http://getfirebug.com/net.html）特別指出，
  JavaScript 檔案一次只讀一個（而不是同時讀很多個）
  所以參考 JS 讀取過程圖來調整 js 的順序，
  有助於避免不重要物件拖延了主要內容的讀取。
  該圖明顯表示從第4個js（近期文章）之後的 js 讀取速度都頗慢，與實際經驗符合。



結論....js 不要放太多......這其實應該已經是老生常談了
或者參考下文建議吧（例如把 js 都放到網頁底部）
http://blog.miniasp.com/post/2008/06/Dont-let-JavaScript-Slow-down-your-website.aspx


ps.我用的是 Hinet 網路, 瀏覽器 Firefox 3.0.1

--
 ╭—                                                       ╮
        使用 wordpress.com 部落格服務的心得筆記.....
    http://randle.wordpress.com/2007/12/27/wordpress-com/
 ╰                                                      -R ╯
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 218.168.201.142
推 pcmangood:感動的推
推 ThisIsNotKFC:推辛苦整理！
推 reke:不過blogspot要加什麼功能幾乎都要用js吧...
→ randle:Blogger的原罪...什麼都可以放 什麼都要自己作.....
推 darren8221:Firebug極為強大 還可以自己改CSS當場看結果
推 chrisQQ:web developer 也可以 :p
※ 編輯: randle          來自: 218.168.200.146      (08/14 21:48)