2009/09/11

加速你的Blog-3 優化檔案讀取

前篇文章《加速你的Blog-2 優化Widget》我們已經知道了該如何選擇Widget了,但根據我自己優化的經驗,接下來該優化的就是修改檔案讀取的方式。

所謂的檔案讀取


就是指在測試 Pingdom 時,URL 列表中所有副檔名包括:.jpg .gif .png 等向外的連結,通常 Blog 中向外連結的圖檔包括:
  1. Blog Template、Icon、Hacker;
  2. 文章內的圖檔。
我提出以下幾種方案因應:
  1. 縮小圖片檔案(適用:1、2)
  2. 縮小圖片尺寸(適用:2)
  3. 選擇更快的圖床(適用:1、2)
  4. 改變Template圖片的使用方式(適用:1)

縮小圖片檔案


因為新手在使用部落時,通常會不自覺地使用了尺寸過大的圖片,由於網頁每次更新都會連結到原始來源,檔案過大的圖片就導致了下載時間過久。

因此縮小圖檔能加快重新載入網頁的速度。但在開始縮小圖檔之前,請確認這些圖檔只是要放到網路上的,你也另外作了備份。

除了加快載入網頁的速度,更由於某些「圖床」(泛指在網路可供放圖片的服務)設有空間限制和流量限制,縮小圖檔將減少檔案尺寸後,有效減少流量。

雖然大部份的影片編輯軟體都有縮小圖片檔案的功能,但事實上一個免費、隨時可用、操作簡單的系統才是你真正需要的,所以我要特別推薦:smushit

我在這裏不介紹 smushit 的使用方式,因為以下的文章已經寫得很好了:

縮小圖片尺寸


是對使用者而言,最常被使用的技巧。反正即使你的原圖解析度再高,也會因為部落格的寬度限制,讓你無法隨心所欲的放「原尺寸」的圖片;與其如此,無不如改選較小的圖片尺寸,以增快下載的速度,有興趣的讀者會自己去點大圖看細節、或直接瀏覽網路相簿。

不論是:Picasa 或 Flickr,都能提供了不同圖片的尺寸,讓使用能依照自己的需求連結。以 Picasa 為例,能設定的「選取尺寸」 中包括:「縮圖 144px」、「小 288px」、「中 400px」、「大 800px」。

但實際 Picasa 能使用的解析度包括:32/64/72/144/160/200/240/288/320/400/512/576/640/720/800/1024/1440/1600。以下面這個連結為例:
<a href="http://picasaweb.google.com/lh/photo/EYULKh6S-51LSwUuHcA4tA"><img src="http://lh3.ggpht.com/jose.sun.tw/SPWfyY2441I/AAAAAAAABLw/Lk3OR4rFeu8/s400/HD0472.png" /></a>

其中的「/s400」就是指中型圖片,直接以任何一個可以選擇的尺寸換掉上面 S 後面的「400」,就能切換不同的圖片尺寸。

使用這個技巧後,還可以再搭配類似 Lightbox 的技巧,就能在點選部落格的圖片後,以全螢幕的方式,秀出你希望的圖片尺寸,當然這個技巧也會讓部落格更痴肥一點。

選擇更快的圖床


與錯對的圖床相比,效果差距非常的明顯。

我目前 Blog Template、Icon、Hacker的圖床是 Flickr,我目前也使用 Hinet,由於Hinet 提供了60 Mb的空間能讓使用者放檔案,為了寫這篇文章,我把這些原本放在Flickr的圖片也複製一份到 Hinet 空間作測試,結果如下:
  • 放在Flickr的結果,連結
  • 放在Hinet的結果,連結

從以上的結果可知放在Flickr的速度,大約比放在Hinet快了25%,對其中一個25.6K的圖檔,甚至快了接近100%。

不過,這個測試只能證明把圖片放在 Flickr 比放在 Hinet 的空間好,但在 Flickr 和 Hinet 之外,你還有其他的選擇,請參考以下文章:

改變Template圖片的使用方式


是比較進階的方式。由於一般的 Template 中文和圖都是互相混雜的,只要有一個圖片比較大、流量突然變大、或Server突然沒有反應時,整個 Blog 就會 Hang 住,直到 Timeout 或是 Server 有反應時,後面的文章才會繼續秀出來。

現在,我們只要改變使用圖片的方式,就能讓本文先顯示出來,圖片改為在背景讀入,整體的讀取速度就更快了。

改變圖片的使用方式,依照以下情況略有不同:
  • CSS變數(Variable definitions)
  • JSP使用

在 Abin's Tech Note - 《自訂樣板的變數 (Blogger Template Variable)》一文中,就有針對這兩種使用圖片的方式作了詳細介紹。

由於該篇文章的段落表達得不夠清楚,以致於不容易了解文章的重點。簡單地說,就是利用 Variable definitions 定義變數內容的方式,到了CSS的定義內再使用這些變數;甚至可以到了更後面的 Javascript 內,以 class 的方式使用前面定義變數內的圖片樣式。

不過,這篇文章中使用 class的方式,我發現有點錯,原文是:
<span class=sign-icon title="Sign"></span>實際上,需要在 class 的前後都一定得加上'才行:<span class='sign-icon'></span>
透過這個方式,就可以達到以下優點:
  • 程式碼變的比較短
    因為相同的圖片都使用相同的變數
  • 加快載入的速度
    因為圖片已在背景讀取,根據我的使用經驗,大約能快1/3
  • 修改容易
    直接在檔案前面就能藉由修改變數定義以改變圖片,在變更圖床時特別方便。

小結


雖然我這篇文章是從優化的觀點,切入使用檔案的議題。但在實際使用時,檔案讀取的優化反而不是那些資深/專業部落客所觀注的焦點。

對文章越來越多的部落客而言,他們所關心的是他的文章與訪客留言是否能完整的被保存,並能否在災難(例如:《再見,免費資源網路社群!》)後復原。

所以,當我們在管理這些部落格的圖片時,也都要有一套特別的管理方式(例如:全域變數),這樣你才有輕鬆轉換圖床、災難後復原的能力,至少圖片在上傳圖床前一定要另外備份!

沒有留言:

張貼留言