加速你的Blog-1 找到關鍵元件 - 通達人驛站
2009/9/7

加速你的Blog-1 找到關鍵元件

自從我換到Desert的樣式後,你知道我的Blogspot變得有多慢嗎?能慢到Timeout,導致畫面中的圖片不出來!這就厲害了吧!

為了解決這個問題,我開始上網找能加速的方法,雖然我用的是Blogspot,但其實加速Blog的原理都一樣。

所以如果你和我一樣,也嫌自己的Blogspot太慢,那你看這篇文章就對了,而且這篇文章將介紹一系列加速的方法!

確認Blog變慢的原因


方法其實有很多,不過我找到Pingdom,是一個最容易讓你了解自己Blog的好工具。

使用方法很簡單


  1. 進入 Full Page Test 網頁:http://tools.pingdom.com/fpt/,
  2. 在 URL 欄位輸入自己部落格的網址,再按下「Test now」。
  3. 等一下子,你所等待的時間就是自己部落格載入每個物件的時間,
  4. 會自動列出一個物件清單,包含每個物件的載入時間(Load time in seconds)、物件(URL)以及物件大小(Size(KB)。

載入時間(Load time in seconds)


將是我們這篇文章的重點。

Pingdom最棒的地就是用長條來表示載入每個元件所需的詳細時間,而且還用三種顏色表示不同的時間:
Response time example
  • 黃色表示發出連線需求到回應所需花費的時間、
  • 綠色表示建立連線所需花費的時間
  • 藍色表示資料傳輸第一筆資料到傳送完所需花費的時間

光這樣說,我知道初學者可能會有點不太懂,我打個比方好了:就像你要打電話去訂購(很難買到的)黑師傅捲心酥。

如果接電話的人現在正在接別的訂購電話,那妳可能打不進去(這個是真實情況!),所以你得等接電話的人儘快處理完手邊的工作有空了,他才能接你的電話。從你打電話開始到接通的時間長短就以黃色的長條表示,除了表示現在的流量外、也表示伺服器的反應時間和速度

等電話接通後,另一端的人聽到你的聲音後,你開始告訴她你要100箱花生、100箱巧克力、100箱草苺口味的捲心酥,她就開始準備出貨的事宜(前題是要有存貨,但通常都沒有!),準備的時間越短表示她(和公司)的效率越高。從你接通電話到出貨的時間長短就以綠色的長條表示,也同樣表示伺服器的反應時間和速度

接著黑師傅會開始出貨(但真實情況是要等很久!),你收到貨的時間取決於幾個因素:訂購產品的多寡、運送路線以及交通的情況。如果你訂的東西越多,就需要花比較長的時間寄送;如果它走的路只有兩線道,那就要依序排隊;如果正是塞車的時段,即使是十六線的高速公路也塞車了,那就得等一段時間才能收到。所以藍色的長條,表示你所要傳遞的檔案大小、網路頻寬和目前的流量

排序物件(URL)


如果你已經測試完自己的網頁了,就可以點選Sorted by,選擇排序的條件:
  • Load Order:預設值
    從開啟網頁一直到最後完成的順序。
  • Load Time:
    依照載入物件的時間長短排序。
  • File Type:
    依照檔案的類型排序,例如:CSS、圖片、JavaScripts、Widget
  • URL:
    依物件的名稱。
  • File Size:
    依物件的檔案大小,但檔案大小不必然影響載入物件的時間。

當然,你可以再按右邊箭頭:
  • 向下表示降冪(由大到小、由A至Z)預設值
  • 向上表示昇冪(由小到大、由Z至A)

如何找到關鍵元件


在一開始時,你可以使用 Load Time 找到最花時間的物件,但如果沒意外你的Blog網址通常也在其中。倘若你找到比自己Blog網址還要長的物件,別懷疑,這些就是你的頭號目標,首先該作的就是減少他們的Load Time。

寫到這裏,關於Pingdom的簡單介紹就完成了。

至於要如何減少Load Time,我會繼續針對不同的物件寫如何減少Load Time的方法,以增進Blog速度,敬請期待!

有些注意事項


你一定要知道:
  1. Pingdom測出來的時間不全然準確,因為這個和測試的時間、測試的地點、特殊情況(某個widget失效、不正常)會有很密切的關係,所以實際使用者的時間可能會不一樣。
  2. 某些部落格平台,會強迫在Blog內放廣告,這個也是拖慢Load Time的原因之一,但遇到這個問題時除了換平台外,無解!

後記


這是我在《通達人筆記》第一次開始嘗試「連載」,如果有任何疑問或建議,也請留言告訴我!
  1. ABIN'S NOTE- 《Pingdom Tools - 網頁測速服務
  2. 0 與 1 的邂逅-《測量網頁載入速度的最佳幫手 - Full Page Test》
 Related Posts with Thumbnails 

0 意見 :

張貼留言