Pingdom Tools - 網頁測速服務

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

回到正題，如果自己是網站的主人，希望能兼顧版面的豐富、又不希望影響到頁面載入的效率，那勢必就要有所調整和犧牲。之前有提到一個 Firefox 的外掛套件：Firebug，這玩意是網頁程式設計的好幫手，因為它能幫你檢視每項元件載入的大小和時間，還能 Detail 到是用哪種方法（GET、POST），不過我玩了一段時間，實在是太詳細了、詳細到很難看懂，而且要安裝、在本機瀏覽檢視，以自己的電腦等級、網路速度作為評量標準，好像也不大客觀。後來看到文章介紹，有個網頁的測速服務：Pingdom Tools 的 Full 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」