最近發現 I am here. 的讀取速度越來越慢，只好著手來調整一下Blog的效能，以下是幾點心得分享，希望對大家有幫助:)
以下分成心得建議區、工具推薦區和實際調整區三大塊。心得建議區中，我會提供幾個基本的概唸給大家參考；工具推薦區則是會提供幾個好用的工具來測試、觀察我們的部落格運作情況，以供實際調整使用；最後的實際調整區則是開始著手加速部落格。
- 心得建議區
- 安裝部落格外掛前記得停看聽
- 人人都喜歡看大圖，但是不喜歡等待大圖讀取
- 慎選檔案放置區
- 慢吞吞的元件擺最後
拖慢部落格速度第一名就是各式各樣的部落格外掛。很多時候我們看到一個很酷炫的外掛，加上現在外掛的作者們都很體貼，通常都有【懶人安裝法】，幾個複製貼上的動作就完成了，殊不知一兩個外掛也許無傷大雅，但數量一多時，就會造成整個部落格的讀取速度變得相當慢，甚至不當的Javascript寫法還會使得CPU的使用率飆高，不知情的人還以為瀏覽器怎麼這麼差呢！
所以在安裝外掛前，記得先仔細想想這個外掛的用途是什麼，或是在Google裡面找找看這個外掛的相關評價，有沒有可以替代或調整的部分。
大家都喜歡看解析度高、美美的大圖片，但是這樣的圖片就是拖慢部落格讀取速度的另一個殺手。在截取圖片、製作Logo、設計部落格樣式時，記得個原則，就是【化繁為簡】。截圖的時候，只選取需要的部分，不要每一張圖都是全螢幕；儲存時，挑選適當的格式並且進行壓縮，在不破壞閱讀及美感的情況下，儘量的縮小圖片的尺寸。
在部落格中，除了文字以外，你的圖片、Flash動畫、Javascript、CSS檔案等等，有很大的機會需要外連到其他地方進行讀取。這時候挑選一個快速、穩定的檔案放置區就很重要了。如果你放置檔案的主機三不五時就掛掉，或是效能低落，連帶的也會嚴重影響你的部落格讀取速度。
瀏覽器在讀取網頁時，大致上是按照順序讀取的。如果你有一個Javascript或元件要花費很久很久的時間，那使用者可能就會等得不耐煩了。所以嚐試把需要花費大量時間的原件擺在網頁的最後再讀取，重要的內容先呈現。下面幾篇都有類似的概念，大家可以參考：
- 工具推薦區
- Pingdom：http://tools.pingdom.com
- Firebug + YSlow + Google Page Speed - 查看哪個環節出了問題！
- YSlow：https://addons.mozilla.org/zh-TW/firefox/addon/5369
- Google Page Speed直接下載：https://dl-ssl.google.com/page-speed/current/page-speed.xpi
- Google Page Speed 網站最佳化建議工具，讓網站更快、更省流量！
- YSlow，Yahoo網站效能評分工具，99分測試，CDN圖文教學
- 另一個最佳化網站的工具 - Google Page Speed
- 網頁加速開源實用工具：GOOGLE Page Speed
- 如何提高網頁的效率（下篇）——Use YSlow to know why your web Slow
- Smush.it - 圖片瘦身利器：http://www.smushit.com/ysmush.it/
Pingdom 是一個線上幫助你檢查部落格每個元件讀取速度的服務。輸入網址之後，按下【Test Now】就可以開始檢測。檢測的結果會顯示如下：
在這裡我們可以觀察，黃色的線段代表網站開始發出要求之後，第一次得到回應的時間。比如你打電話要去訂pizza，黃色區塊就是只撥電話後，到對方接起電話為止。綠色表示建立連線的時間，就像是你告訴對方要訂什麼pizza，對方和你確認完畢的時間。藍色則是傳輸的時間，也就是在你掛掉訂Pizza的電話之後，pizza最後順利送到你家所需要的時間。
經由Pingdom，你可以找到最花時間的元件。可能是圖片、Javascript或CSS，總之找出那個關鍵元件，就是你要著手解決的部分。
Firebug是Firefox中相當好用且重要的一個套件，主要用來針對網頁原始碼進行除錯的工具，你可以很方便的用它來針對網頁進行觀察、修改、除錯。在這裡安裝它：
Firebug：https://addons.mozilla.org/en-US/firefox/addon/1843
基本的使用方式可以參考：
YSlow和Google Page Speed分別是Yahoo和Google推出的網站分析工具。由於這兩款工具都是Firebug的【外掛工具】，所以一定要先安裝Firebug之後才能使用。
在安裝完之後，打開Firebug就會看到多了一些項目可以選擇，包含了Page Speed和YSlow：
要進行測試時，點選到該頁面，選擇【Analyze Performance】或【Run Test】就可以了：
同樣的，這兩個工具也是用來幫你找出哪個元件是需要花最久時間去讀取的。同時他也會給你一些改善的建議，你可以根據這些建議來進行修正：
這裡也有一些好文章可以參考：
在寫部落格時，要用哪一種圖片格式比較好呢？如果你還在用JPG的話，不妨改用PNG試試看，尤其是經常抓取系統截圖的讀者，更應該使用PNG作為你的圖片格式。詳細的解釋可以參考Browny Walking的這篇文章：
簡單來說，JPG對於照片、風景圖片等的壓縮力較好；PNG對於處理文字、線條、輪廓等圖片叫強。
在抓取好圖片之後，如果還想要進一步的幫圖片瘦身，不妨嘗試看看Smush.it這個服務。選擇【UPLOADER】之後，一次可上傳多張圖片，它會幫你縮減圖片的尺寸，選擇【Download Smushed Images】下載壓縮完：
- 實際調整區
- 移除不必要的外掛
- 挑選更快速的檔案放置區
- Prototype：http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js
- JQuery：http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js
- Dojo：http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dojo/dojo.xd.js
- 縮小圖片
把不必要的部落格外掛移除當然是加快讀取速度關鍵之一。在幾經考量之後，我把Plurk的外掛給移除了。大家可以考量自己部落格的情況來進行這個步驟。
如果你看得懂Google Page Speed或YSlow的分析結果，你會發現瀏覽器在要求網頁的時候，會到很多其他的地方抓取必要的Javascript、CSS檔案，如果能夠把這些外部的程式碼儘量放在一起，是不是會比較快？如果你把這些外部資源散落在各地，就好像你打電話去Pizza Hut訂了一個海鮮Pizza、又打去達美樂訂一個夏威夷Pizza一樣，打電話的次數(瀏覽器要求資源)越多，速度當然越慢。
你可以觀察每一個你安裝的外掛，通常這些小東西會去要求外部資源的機率很大。如果你在程式碼中看到類似【】這樣的區塊，就代表他有嚐試要去外部抓取Javascript的動作：
在這裡我挑選Google Code當成我的外部檔案放置區，把可能會用到的javascript上傳到Google Code，並且更改原來外掛中呼叫Javascript的路徑：
不過在執行這些步驟時，一定要注意【備份】原來的程式碼！因為將原來的Javascript位置更改之後，很有可能會造成外掛無法使用，請在有把握的情況下進行，或是隨時備份可以正常運作的程式碼以便能夠隨時回覆。
另外，Google在之前推出Ajax Library API同時幫忙維護了幾個知名的Javascript Library，同時幫忙維護了幾個知名的Javascript Library，如果你的網站有使用JQuery、Prototype、Dojo等知名Javascript函式庫，不妨把位置換到Google的空間，通常會有意想不到的速度喔！
一些比較有名的JS函式庫如下：
官方參考文件在此：
把首頁可能會讀取到的圖片進一步壓縮處理，可以增加讀取速度。
- 進階區塊
下面這是一些其他比較進階的方法和自己蒐集的筆記，等到將來有機會在慢慢實作並且介紹給大家：
- 加速你的Blog-1 找到關鍵元件
- 加速你的Blog-2 優化Widget
- 加速你的Blog-3 優化檔案讀取
- 加速你的Blog-4 優化CSS
- 測量網頁載入速度的最佳幫手 – Full Page Test
- Pingdom Tools - 網頁測速服務
- Smush.it 幫網站圖片批量大瘦身，節省空間流量、加速網頁載入
- 如何提高網頁的效率（上篇）——提高網頁效率的14條準則
在修改之後，I am here. 現在的執行速度只需要三秒到四秒之間，速度上有長足的進步。希望各位讀者在閱讀的時候，能夠有更好的體驗:)
如果你有任何技巧或問題，也歡迎留言大家討論。
1 意見:
不客氣：）
張貼留言