加速(Speed UP)你的Blog讀取速度 - 更新 I am here. 心得分享!


不知道你有沒有發現,當你的部落格安裝越來越多所謂的【外掛套件】時,整個讀取的時候變得越來越慢?或是妳在寫Blog的時候,有沒有針對圖片作最佳化的調整呢?

最近發現 I am here. 的讀取速度越來越慢,只好著手來調整一下Blog的效能,以下是幾點心得分享,希望對大家有幫助:)

以下分成心得建議區、工具推薦區實際調整區三大塊。心得建議區中,我會提供幾個基本的概唸給大家參考;工具推薦區則是會提供幾個好用的工具來測試、觀察我們的部落格運作情況,以供實際調整使用;最後的實際調整區則是開始著手加速部落格。

  • 心得建議區

  1. 安裝部落格外掛前記得停看聽

  2. 拖慢部落格速度第一名就是各式各樣的部落格外掛。很多時候我們看到一個很酷炫的外掛,加上現在外掛的作者們都很體貼,通常都有【懶人安裝法】,幾個複製貼上的動作就完成了,殊不知一兩個外掛也許無傷大雅,但數量一多時,就會造成整個部落格的讀取速度變得相當慢,甚至不當的Javascript寫法還會使得CPU的使用率飆高,不知情的人還以為瀏覽器怎麼這麼差呢!

    所以在安裝外掛前,記得先仔細想想這個外掛的用途是什麼,或是在Google裡面找找看這個外掛的相關評價,有沒有可以替代或調整的部分。

  3. 人人都喜歡看大圖,但是不喜歡等待大圖讀取

  4. 大家都喜歡看解析度高、美美的大圖片,但是這樣的圖片就是拖慢部落格讀取速度的另一個殺手。在截取圖片、製作Logo、設計部落格樣式時,記得個原則,就是【化繁為簡】。截圖的時候,只選取需要的部分,不要每一張圖都是全螢幕;儲存時,挑選適當的格式並且進行壓縮,在不破壞閱讀及美感的情況下,儘量的縮小圖片的尺寸。

  5. 慎選檔案放置區

  6. 在部落格中,除了文字以外,你的圖片、Flash動畫、Javascript、CSS檔案等等,有很大的機會需要外連到其他地方進行讀取。這時候挑選一個快速、穩定的檔案放置區就很重要了。如果你放置檔案的主機三不五時就掛掉,或是效能低落,連帶的也會嚴重影響你的部落格讀取速度。

  7. 慢吞吞的元件擺最後

  8. 瀏覽器在讀取網頁時,大致上是按照順序讀取的。如果你有一個Javascript或元件要花費很久很久的時間,那使用者可能就會等得不耐煩了。所以嚐試把需要花費大量時間的原件擺在網頁的最後再讀取,重要的內容先呈現。下面幾篇都有類似的概念,大家可以參考:



  • 工具推薦區

  1. Pingdom:http://tools.pingdom.com


  2. Pingdom 是一個線上幫助你檢查部落格每個元件讀取速度的服務。輸入網址之後,按下【Test Now】就可以開始檢測。檢測的結果會顯示如下:



    在這裡我們可以觀察,黃色的線段代表網站開始發出要求之後,第一次得到回應的時間。比如你打電話要去訂pizza,黃色區塊就是只撥電話後,到對方接起電話為止。綠色表示建立連線的時間,就像是你告訴對方要訂什麼pizza,對方和你確認完畢的時間。藍色則是傳輸的時間,也就是在你掛掉訂Pizza的電話之後,pizza最後順利送到你家所需要的時間。

    經由Pingdom,你可以找到最花時間的元件。可能是圖片、Javascript或CSS,總之找出那個關鍵元件,就是你要著手解決的部分。




  3. Firebug + YSlow + Google Page Speed - 查看哪個環節出了問題!


  4. 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】就可以了:





    同樣的,這兩個工具也是用來幫你找出哪個元件是需要花最久時間去讀取的。同時他也會給你一些改善的建議,你可以根據這些建議來進行修正:





      這裡也有一些好文章可以參考:



  5. Smush.it - 圖片瘦身利器:http://www.smushit.com/ysmush.it/


  6. 在寫部落格時,要用哪一種圖片格式比較好呢?如果你還在用JPG的話,不妨改用PNG試試看,尤其是經常抓取系統截圖的讀者,更應該使用PNG作為你的圖片格式。詳細的解釋可以參考Browny Walking的這篇文章:


    簡單來說,JPG對於照片、風景圖片等的壓縮力較好;PNG對於處理文字、線條、輪廓等圖片叫強。

    在抓取好圖片之後,如果還想要進一步的幫圖片瘦身,不妨嘗試看看Smush.it這個服務。選擇【UPLOADER】之後,一次可上傳多張圖片,它會幫你縮減圖片的尺寸,選擇【Download Smushed Images】下載壓縮完:



  • 實際調整區

  1. 移除不必要的外掛


  2. 把不必要的部落格外掛移除當然是加快讀取速度關鍵之一。在幾經考量之後,我把Plurk的外掛給移除了。大家可以考量自己部落格的情況來進行這個步驟。



  3. 挑選更快速的檔案放置區


  4. 如果你看得懂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函式庫如下:


    官方參考文件在此:


  5. 縮小圖片


  6. 把首頁可能會讀取到的圖片進一步壓縮處理,可以增加讀取速度。

  • 進階區塊


下面這是一些其他比較進階的方法和自己蒐集的筆記,等到將來有機會在慢慢實作並且介紹給大家:



在修改之後,I am here. 現在的執行速度只需要三秒到四秒之間,速度上有長足的進步。希望各位讀者在閱讀的時候,能夠有更好的體驗:)

如果你有任何技巧或問題,也歡迎留言大家討論。

Share this post!

Bookmark and Share

2 意見:

WFU 提到...

感謝用心整理,非常實用的一篇文章。

kevingo 提到...

不客氣:)