透過Pingdom Tools測試開啟網站的速度

相信大家只要有經營網站或Blog一定都會遇到這個問題,網站架設以後,如何讓網站變得更漂亮 加入Blog小工具是一個辦法,不過加了越多效果會讓網站開的越慢,如果網站開啟的速度慢,相信大家都會覺得很煩吧!搞不好連網站管理員自己都不想開啟這個網站也說不定!

可是該如何評估是哪個元件拖累自己的網站開啟速度呢?
這就得靠Pingdom Tools這個服務了,它是一個網站測速服務,不需安裝任何程式及測速軟體就可以判斷你的網站整體或個別物件開啟的速度快慢

注意:此方法僅適用於安全程度較低的頁面,如果是非公開的網頁(如會員登入的管理介面)可能會因為安全因素不開放使用此服務

Pingdom Tools

讓我們繼續看這整篇教學吧!


透過Pingdom Tools測試網站開啟的速度


1.首先先開啟Pingdom Tools,進入服務首頁

Pingdom Tools 1

網址:http://tools.pingdom.com/fpt/

首先,你必須先進入Pingdom Tools首頁,然後將你想要測試的網址複製下來
按下Test now即可進入測試頁面並開始測試

如不想儲存你的測試報告,你就只要將Save test取消勾選就可以了


2.了解此工具的運作原理

Pingdom Tools 2

網站裡面有原文解說,這個網站特別強調它是如何運作的
如果各位對運作方式有興趣的,請尋找測試頁的How it works單元

這裡先簡單說明一下這個工具的運作原理,以本站為例
當你開啟這個網站時,最先開啟的是這個網頁本身
再來樣版及其他元件(包括圖片)會依序開啟

當用戶端的電腦(你的瀏覽器)要求開啟網頁到痞客邦網站管理伺服器回應你的這段時間以黃色計算(Start→Connection)
綠色表示建立連線的時間,藍色表示資料傳出給你的電腦所需要的時間(Connection→First byte)

如果不懂,那我就繼續說明摟!
本站大部分的圖片都是Flickr的圖片,因此以此空間為例,當你開啟網頁並讀取到Flickr的圖片時
你的電腦(註:以下以”讀者電腦”代替)會要求:「Flickr伺服器,我要開啟XXXXX.jpg這張圖片」,此時黃色連結開始

接者,Flickr伺服器接到你的需求並紀錄IP位置後,回應你說:「知道了,XXXXX.jpg準備傳送資料」,黃色部份結束
然後Flickr伺服器開始回應你了:「XXX(註:讀者電腦的IP位置)你準備好接受資料了嗎?」,綠色部分開始連接

而Flickr透過IP位置將資料回傳給你以後,讀者電腦說:「收到了!開始傳送圖片吧!」綠色部分結束了
當Flickr知道讀者電腦準備好了以後,開始回傳資料到圖片完整顯示的時間,就是藍色區域了(First byte→Last byte)

如此一來大家應該知道其中的因果關係了,註解裡頭的xxxxx.jpg表示網路圖檔名稱,IP位置相當於這台電腦的位置
圖片開啟的原理也適用於javascript或Blog工具,YouTube及網頁上的的Flash元件也算
而每個元件及圖檔都必須用同樣的方式連線,兩台電腦之間的連線過程也必須正常,否則就會發生破圖或元件失效

這些元件越多,網頁開啟的速度當然也越慢瞜!本工具就是測試這些元件的連線時間


3.查看長條圖判定物件開啟的時間

Pingdom Tools 3

知道長條圖的原理以後,你就可以看得懂這些圖表了
原理說的很清楚,它會將你網站裡面的所有物件通通讀出來

包含定義網頁樣版的CSS、文章中的HTML樣式、圖片、自由欄位的javascript
以及動態特效或者YouTube影片等以Flash製作的物件等

這些元件通通都會被這個網站計算連線時間,同時還會顯示原始網址
因為這些資料是由上往下讀取,因此建議等網頁跑完再看圖表比較準確


4.查看網頁資訊

Pingdom Tools 4

這裡會顯示所有資料查詢完畢以後的報告,紅線標示的區域是Total loading time
表示”全部載入網頁的時間”,一般建議最好別超過30sec (秒)

一旦超過30秒表示網頁需要載入的元件或者特效太多了,建議移除一些元件或程式
一般網站的合理連線範圍應該是15~30秒之間,這是考慮到網路塞車或尖峰時間的量表

而這範圍也是一般人對於開啟網站的合理接受範圍,你總不希望一個網頁開了30~60秒才開啟成功吧!


5.取得歷史報告

Pingdom Tools 5

如果你需要將此報告放在網頁中,那就建議你將此報告的網址貼到網站上供人查閱
而Test archive是查詢的報告,你曾經在什麼時候查詢此報表,順便給你資料載入的秒數


後記


隨者網路的發展,越來越多人架設網站或Blog了,如果你是網站經營者或者Blog的版主,應該會想要加強網頁的可看性而加入一些Blog元件吧!合理的擺放Blog元件是可以,但別擺太多造成網頁開啟速度變得很慢,而這個工具只是參考而已,數值會隨者網頁的尖峰與離峰時間而有所差異,如果大家對這個工具有任何問題或意見,歡迎留言討論!本站會盡快回應你,謝謝。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料