2008-12-17

Pingdom Tools - 網頁測速服務

常常在網路上瀏覽的人,不知道對連到某網頁,發現對方很慢、很耗系統資源、或是跑出一堆不知所謂的外掛和元件會有什麼感覺?我自己是覺得很不舒服啦,太誇張的網站,我就直接列入拒絕往來戶。網路上面的資訊那麼多,誰有多餘的時間等你把整個網頁載完,更何況是把時間和頻寬是花在和內容無關的廣告、Flash、Javascript 或元件上面。自從用了 BloglinesGoogle Reader 這類 RSS 閱讀器來訂閱網站,由於資訊是直接來自 RSS Feed,很多無謂的元件自動會濾掉,只會有文章標題和內容,即使對方只提供部份文章的節錄,至少我也能夠依照個人意願,自己決定要不要連過去看完整文章。也因為這樣,除非我連到對方網站看完整文章,對方在自己的首頁或網站上搞什麼玩意基本上都與我無關、也不會影響平常瀏覽的速度。但隨著社群服務的流行,大家在自己的 Blog 上掛些有的沒的狀況越來越誇張,以前是喜歡掛什麼 Flash 時鐘、天氣預報或播放音樂(還有養桌面寵物 ..@$%&!),現在則是搞什麼推文、社群留言和賺錢的廣告,當然在個人的 Blog 和首頁裡面、自己高興放什麼誰都管不著(不爽看就不要來),但隨著頁面越來越「豐富」,有沒有想過這堆外掛對自己首頁的影響?是不是讓頁面載入多花了幾倍時間、是不是連到該頁面就吃掉讀者系統多少的資源?或許大部分人並不在乎(或也不能怎樣),但我自己卻很在意。對於這類外掛嚴重、但內容文章也還不錯的網站,我不是站長,只能消極地用過濾的方法來避免載入,像上面提到利用 RSS Reader 閱讀摘要,或是利用 Firefox 的 AdBlock PlusStop AutoPlay 這類套件直接擋掉特定網址的內容和元件,至少可以還讀者一個乾淨簡單的版面(可是辛苦搞外掛的站長就會哭哭了~),這樣在閱讀和瀏覽的時候,才能更有效率、更能專注在有興趣的文章內容上面。當然站長有權利胡搞自己的網站,但讀者也有權利決定自己要看的內容吧~

回到正題,如果自己是網站的主人,希望能兼顧版面的豐富、又不希望影響到頁面載入的效率,那勢必就要有所調整和犧牲。之前有提到一個 Firefox 的外掛套件:Firebug,這玩意是網頁程式設計的好幫手,因為它能幫你檢視每項元件載入的大小和時間,還能 Detail 到是用哪種方法(GET、POST),不過我玩了一段時間,實在是太詳細了、詳細到很難看懂,而且要安裝、在本機瀏覽檢視,以自己的電腦等級、網路速度作為評量標準,好像也不大客觀。後來看到文章介紹,有個網頁的測速服務:Pingdom ToolsFull Page Test,不用什麼裝什麼元件,只要敲入想測試的網址,該服務就會試著發出連線要求、逐步去檢視連到該網站會載入的所有資料,包括了文字、CSS、圖片、Javascript 外掛服務、Flash 等一堆玩意的載入時間和資料大小,而且會顯示成一目了然的表格,一眼就能看出是哪個玩意拉長了網頁載入的時間。該服務的反應時間也能作為指標(對方沒故障的話),用來比較網站載入的時間當作測速標準(像是我的網站載完只需要五六秒、你的網站載完卻要二三十幾秒,代表掛的東西是不是太多啦...Orz)。它下方也提供 WebSite Information,能讓你知道所有元件總的容量和所佔比例,可以作為網頁內容調整的參考。

這個是我的 Test Information(完整紀錄在此):

每個元件載入還有詳細的資料,用三種顏色的 Progress Bar 來表示載入的狀況:橘色表示發出連線需求到有回應所需的時間、綠色表示建立連線所需時間、最後的藍色表示時間資料傳輸交換所需時間,如果愛用一堆站外的外掛、而外掛可能只是個 Javascript(檔案較小),那麼橘色和綠色的時間則表現了提供該外掛的伺服器反應,如果是塞一堆大圖照片或音樂外掛在網頁裡,那麼藍色的 Progress Bar 可能就會長一點啦!實際看圖示,右邊這個是 Progress Bar 的說明。如果橘色和綠色的 Bar 比較長,表示該檔案或元件花比較多的時間在「連線」,連帶反應的是對方伺服器和網路的反應速度。如果是藍色的比較長,代表你放太多大圖檔、或是該程式檔案計算和反應花太久,反覆測試幾次如果不是偶發狀況,那麼該元件或服務就是你網頁載入的瓶頸啦!

當然這些資訊也是用來檢視網頁內服務狀況的重要指標。舉例來說,有天我看自己的 Blog,怎麼好像內容都載完了,頁面卻一直好像在載入中(就 IE 裡右上角的 M$ 旗子一直在飄揚)?偏偏有些外掛(像是留言板、Google Analytics)都是背後載入,我那知道是哪個外掛特慢、慢到讓瀏覽器一直在重試載入(就算 Reload 也沒用)?這時馬上用 Pingdom 的 Full Page Test、列出所有元件的狀況,哇!原來是 Cbox 的留言版連線突然超慢、慢到 Timeout,抓到始作俑者、進到 Blogger 後台拿掉外掛,果然問題就解決啦!再舉個例子,國內很多人愛用 FunP 的推文貼紙、愛給它嵌入到頁面內,之前有次 FunP 在改版時,那個貼紙的外掛 Script 突然死掉、導致一堆人網頁載入都受到影響(其他內容都出來了,就貼紙沒出來、頁面卻一直在載入中),對站長來說,實際上要抓出那個外掛出狀況很麻煩,但用 Pingdom 測一下,馬上就知道誰掛啦!除此之外,每次測試的結果它也提供紀錄的功能,透過一個連結 (Permalink)、可以幫你把該次結果 Archive 起來,提供不同時間網站反應變化的比較。

雖然現在的網路速度頻寬越來越大、電腦速度越來越快,但相對的,浪費頻寬和系統資源的事情也越來越多,雖然很多人搞網站、Blog 的目的本來就是自己爽、或是交朋友,因此搞了一堆玩意讓頁面更生動、更強大,但掛了這堆東西是不是反倒會影響架站分享的初衷、或是讀者真的關注的文章內容閱讀,或許是加掛後自己該檢視的。透過 Pingdom Tools 這類客觀的服務提供網頁速度的測試指標,除了讓訪客知道該站反應速度的瓶頸為何,也可以讓站長找出拖慢頁面的元兇,對在乎反應速度和效率的人來說,算是相當值得參考的工具。

參考文章:Joaoko 的 「測量網頁載入速度的最佳幫手 - Full Page Test

回應: 2

riceone 提到...

我也是前天才用這網站測速以去除網誌上太過佔用時間的外掛,個人跟Abin兄一樣無法忍受過多無用的外掛出現在網站中,有些新功能總是好奇的玩幾天就拿下,基本上要安裝前便會仔細篩選過,所以我特別喜歡你在另一網誌上的教學文章

Abin 提到...

To riceone:
是啊,我根據連結也看了你的 Blog,果然也是精簡、有效率,有時候也搞不清楚搞外掛一堆的人,人家連到網站,倒底是要看文章內容,還是來玩外掛或簽到的,真是不大能理解。

張貼留言

歡迎隨便亂哈啦留言或發表意見,不過要理性不做人身攻擊~匿名的朋友得到回應的速度會比較慢喔~
請注意發問相關的禮貌和規矩,不當留言、和本文無關的回應可能會被直接刪除無視喔!