請問有沒有辦法知道blog的開啟速度 - 部落格

Table of Contents

※ 引述《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 ╯
--

All Comments

Jessica avatarJessica2008-08-10
感動的推
Brianna avatarBrianna2008-08-12
推辛苦整理!
Necoo avatarNecoo2008-08-13
不過blogspot要加什麼功能幾乎都要用js吧...
Erin avatarErin2008-08-17
Blogger的原罪...什麼都可以放 什麼都要自己作.....
Jacky avatarJacky2008-08-19
Firebug極為強大 還可以自己改CSS當場看結果
Skylar DavisLinda avatarSkylar DavisLinda2008-08-20
web developer 也可以 :p