但根據我自己調校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內外圖框的顏色，還能定義圖框的大小、圖框內顯示的文字（但不支援中文）
部落格觀察
是最國內的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版本
- 不能定義圖框
在調整Widget之前
有一些經驗可供你參考：
- 先確認才安裝
以我為例，剛開始時我只要看到別的Blog裝了什麼，我覺得不錯也就直接拿來裝了，但久而久之，整個Blog就變得又肥又慢；但現在，我會先想想到底有沒有必要一定得安裝，如果有，Load Time即使長了點，也是值得的。 - Load Time都要多測幾次
以我為了寫這個文章內的兩個案例為例，每個案例都測試了大約15次，甚至有少數幾次和其他的值差距頗大，我通常會視為特例，因此，只測一次就決定採用那個方案，風險實在有點高。 - 效能優化積少成多
減少Load Time的效果，是積少成多的。以我為了寫這個文章內的兩個案例為例，兩個案例加起來大約只減少0.9秒，看起來不太明顯，但我的Total Loading Time也只有4.6秒，幾乎改進了1/5的效能。 - 多參考別人的實例
最保險的方式，就是看那些知名Blogger如何使用Widget，尤其是有能力自己修改Template的Blogger，因為他們的Blog瀏覽人數多，訂閱人數也多，通常他們會自行優化必要的Widget，以增進讀取Blog的效率。
如何參考別人如何使用Widget
其實很簡單，以Firefox為例：
- 選取目標網站的Widget
- 按滑鼠右鍵，選「檢視選取範圍原始碼」
- 就會出現「選取範圍的 DOM原始碼」視窗，就能看到其他人的程式碼了。
沒有留言:
張貼留言