加速你的Blog-2 優化Widget - 通達人驛站
2009/9/10

加速你的Blog-2 優化Widget

在前面的文章《加速你的Blog-1 找到關鍵元件》,我已經介紹了如何了解拖慢Blog的主因。

但根據我自己調校Blog速度的經驗,最常需要被調校的通常就是Widget,也就是這些形形色色、功能不一的Widget。

因為這些Widget提供者的伺服器效能,往往決定了Widget使用者Blog的Load Time,所以慎選使用Widget的方式,就成了優化Load Time的重點。在這篇文章中我會舉幾個常見的例子,說明如何優化Widget以提昇Blog的速度。

Feedburner Icon



是最常被Blogger使用的Widget,因為Bloger通常使用這個Widget追蹤使用Feedburner RSS訂閱部落格的人數。

其實根據我的發現,Feedburner Icon有兩種使用方式,第一種是:
<a href="http://feedproxy.google.com/prudentman"><img border="0" alt="訂閱我的 Feed" src="http://feedproxy.google.com/%7Efc/prudentman?bg=99CCFF&fg=444444&anim=0"/></a>
我也建議用這個,它的特色是:
  • 連結到http://feedproxy.google.com/prudentman
  • 資料更新頻率較慢
  • 僅能定義Feedburner內外圖框的顏色。

第二種是:
<a href="http://feeds2.feedburner.com/prudentman"><img width="88" style="border:0" alt="" src="http://feeds2.feedburner.com/~fc/prudentman?bg=99CCFF&fg=444444&anim=0&label=readers" height="26"/></a>
它的特色是:
  • 連結到:http://feeds2.feedburner.com/prudentman
  • 資料能即時更新
  • 除了能定義Feedburner內外圖框的顏色,還能定義圖框的大小、圖框內顯示的文字(但不支援中文)

在測試了15次後,我發現前者的速度比後者平均快0.2秒,所以如果你不介意訂閱人數的資料是否即時、而且希望更快下載,我個人建議使用前者。

部落格觀察



是最國內的Blogger最常使用的Widget之一,Bloger通常會使用這個Widget追蹤自己的部落格目前受歡迎的程度。

根據我的發現,最常被使用的部落格觀察 Icon有兩種使用方式,第一種是:
<a href="http://look.urs.tw/display.php?hl=94647" target="_blank">
<img src="http://images.look.urs.tw/images/look_rank.php?BlogID=94647" width="88" height="31" alt="Blog Look Score and Rank" border="0"></a>

它的特色是:
  • 連結到圖像版本
  • 能定義圖框的大小

第二種是:
<script type="text/javascript" language="JavaScript" src="http://look.urs.tw/java/look_rank.php?BlogID=94647"></script>
我建議用這個,它的特色是:
  • 連結到JavaScript版本
  • 不能定義圖框

在測試了15次後,我發現後者的速度比前者平均快0.7秒,所以我個人建議使用後者。

在調整Widget之前


有一些經驗可供你參考:
  1. 先確認才安裝
    以我為例,剛開始時我只要看到別的Blog裝了什麼,我覺得不錯也就直接拿來裝了,但久而久之,整個Blog就變得又肥又慢;但現在,我會先想想到底有沒有必要一定得安裝,如果有,Load Time即使長了點,也是值得的。
  2. Load Time都要多測幾次
    以我為了寫這個文章內的兩個案例為例,每個案例都測試了大約15次,甚至有少數幾次和其他的值差距頗大,我通常會視為特例,因此,只測一次就決定採用那個方案,風險實在有點高。
  3. 效能優化積少成多
    減少Load Time的效果,是積少成多的。以我為了寫這個文章內的兩個案例為例,兩個案例加起來大約只減少0.9秒,看起來不太明顯,但我的Total Loading Time也只有4.6秒,幾乎改進了1/5的效能。
  4. 多參考別人的實例
    最保險的方式,就是看那些知名Blogger如何使用Widget,尤其是有能力自己修改Template的Blogger,因為他們的Blog瀏覽人數多,訂閱人數也多,通常他們會自行優化必要的Widget,以增進讀取Blog的效率。

如何參考別人如何使用Widget


其實很簡單,以Firefox為例:
  1. 選取目標網站的Widget
  2. 按滑鼠右鍵,選「檢視選取範圍原始碼」
  3. 就會出現「選取範圍的 DOM原始碼」視窗,就能看到其他人的程式碼了。
 Related Posts with Thumbnails 

0 意見 :

張貼留言