2009/09/12

加速你的Blog-4 優化CSS

在前面的文章《加速你的Blog-3 優化檔案讀取》,我已經介紹了如何透過優化檔案提昇Blog的速度,如果你已經看過且執行過,仍對自己的Blog仍然不滿意的話,那你可以繼續看這篇以透過優化CSS以提昇你的速度。

根據我參考其他文章的內容自己試用後,我發現確實有一些方法,能優化CSS:
  1. 使用短的CSS屬性
  2. 使用CSS縮寫屬性
  3. 減少空白
  4. 刪掉註釋
  5. 使用外部的CSS檔案
  6. 簡化CSS


使用短的CSS屬性


不論你使用的是預設的Template或是自己從網路上抓的,你都可以把原始檔案打開後,看是否有這兩個屬性:
<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
如果有,那表示你的CSS有簡化的機會。

這是設計師為了讓一些由右至左的國家(如:阿拉伯文或希伯來文)也能很容易地藉由修改CSS達到變更文字排列方式所作的設計。但對使用漢文的部落客而言,幾乎不會有這樣的需求。因此,我們可以藉由這類的屬性縮小CSS的體積,達到加快CSS的目的。

在這個步驟中,你要作的就是「置換」以下的這些屬性:
  • margin-$startSide -> margin-left
  • margin-$endSide -> margin-right
  • padding-$startSide -> padding-left
  • padding-$endSide -> padding-right

使用CSS縮寫屬性


讓你能利用CSS的縮寫規則將同類型的屬性對(property/attribute pair)合併,例如將以下的CSS 碼.numberingcomments
{
  margin-top: 15px;
  margin-right: 20px;
  margin-bottom: 15px;
  margin-left: 20px;
}

變成這樣.numberingcomments
{
margin:15px 20px 15px 20px;
}

要合併同屬性CSS的步驟非常簡單,直接使用一些網路上既有的工具就能作到。我在試用過CSS CompressorCSS Compressor後,我推薦大家使用CleanCSS,因為CleanCSS的操作步驟非常簡單。

使用CleanCSS


讓一般的使用者都能有機會試著自行壓縮CSS屬性,作法也非常簡單,只要把剛剛已經置換後的屬性:
  1. 把介於<b:skin> 和 <b:/skin> tags之間的程式碼全框起來複製
  2. 貼到CleanCSS內的「CSS-Code:」下的框中
  3. 設定「Code Layout」(初學者建議選「Low (higher reliability)」)
  4. 設定「Options」(建議選項如圖)
  5. 點選「Process CSS」後會出現:
    • Messages:說明壓縮的細節、和發現的錯誤
    • 壓縮的結果,包括:壓縮比例、壓縮後的程式碼
  6. 把壓縮後的程式碼全框起來複製,貼到原來的xml 位置,就完成了!
一般而言,透過這個方式能縮小CSS的部份10%~20%的體積,但對於提昇速度,我利用pigdom測試的結果,估計大約只有1%-3%。

但有個小地方要特別注意,如果你的CSS 碼屬性不齊全,例如:.numberingcomments
{
margin-right:5px;
margin-top:-12px;
}

少了margin-bottom、margin-left。理論上,經過Clean CSS重排後的CSS屬性值應該要依照:上、右、下、左這樣順時針排列、並自動補 0 變成這樣.numberingcomments
{
margin:-12px 5px 0 0;
}
但最後經我測試的結果卻是維持原樣。

我認為這有可能是考量這類屬性不齊全的個案,未設定的數值可能會繼承父元件的值,為了避免自動補0的數值和父元件的數值造成不一致,它就直接略過不處理。當你想要手動修改這類屬性時,必須事先確認屬性的值是否繼承了父元件了再修改。

減少空白


是另一個減少CSS樣式表大小的方法,也就是將原本分行的CSS屬性,刪掉「換行符號」和維持視覺效果的「退縮」(indent),全部都放在同一行內,但這樣在未來再維護這些CSS屬性時,可能就要特別處理,不然有些較長的屬性全擠在一起,真的很難一下就看懂。例如:.numberingcomments
  h1 {
  font-size: x-large;
  font-weight: bold;
  color: #FF0000;
  }
變成這樣:h1 {font-size: x-large; font-weight: bold; color: #FF0000}
這個方式,可以利用稍後會介紹的「Clean CSS進階壓縮」來達成。

刪掉註釋


是將原本CSS屬性中作者解釋CSS的註釋拿掉,CSS的註釋會放在 /* */中。例如標示CSS結構的註釋:/* Links
----------------------------------------------- */

/* Blog Header and Site Name
----------------------------------------------- */

/* Posts
----------------------------------------------- */
這個方式,也同樣可以利用稍後會介紹的「Clean CSS進階壓縮」來達成。

Clean CSS進階壓縮


如果你確定未來修正CSS的機會等於0,那我會建議你在使用CleanCSS時,選擇「Highest (no reliability, smallest size)」,縮小CSS的比例能再提昇5%~10%,達到25%~30%的比例。但只要一被改過,就很難再改回來了。

不過,如果你真的要改回來,其實還是有辦法的,使用Styleneat就能把原來的CSS碼,轉成階層式的程式碼,以利於觀看。不過,使用Styleneat有兩個缺點:
  1. 程式碼和使用CleanCSS前的還是不同,尤其會加入階層的內縮(indent)。
  2. 有個小Bug。如果你在前一行的尾巴加入了註解,經過了CleanCSSStyleneat的處理後,註解會跳到下一行。我已經和作者反應這個Bug,不過截至2009/5/20為止他一直尚未修正。

使用外部的CSS檔案


使用外部的CSS檔案,雖然第一次的讀取的時間相同,但到了第二次以後時,瀏覽器會自動偵測連結檔案的版本是否變動,如果沒有變動,就不會再下載而直接採用已下載過、存於瀏覽器內快取的檔案,除了縮小了原本的xml或html檔的大小,也節省重覆下載所需的時間。

如果要使用這個方法:
  1. 我建議將自己設定的CSS(如:Blog Hacker)都存一個新的CSS檔名(我這裏是取href_class.css)
  2. 上傳至一個internet能讀取到的地方(如:Hinet的網路空間)
  3. 在</title>後面一行使用以下的語法呼叫即可。
<link rel="stylesheet" type="text/css" href="href_class.css" />
如果你有二個以上的部落格,而且使用相同的CSS語法,使用這個方法,將有助於你管理CSS檔案。但這個方法,需要「圖床」來放這些檔案。此外,如果「圖床」掛了,也會因讀不到檔案,使頁面看起來不完整。

因此,慎選「圖床」,也是這個方法的另一項重點。

簡化CSS


如果要使用這個技巧,請確信自己對CSS有一定的了解,不然,你可能會弄巧成拙。

我這裏所謂的簡化,就是將非必要的CSS作移除或是整併,除了減少CSS的檔案大小,也減少執行的時間。

像我在重新規畫「通達人筆記」時,就一筆將右邊的Sidebar的刪減圖片,也共用了部份設定,這樣就能有效提高讀取的速度。

小結


以上的方法,都是我親自試過,也證實有效的方法,但有些作了之後可能會比較看不出效果(如:「刪掉空白」)。
  1. webcredible -《Ten ways to speed up the download time of your web pages
  2. G-Loaded! -《Optimize and Compress CSS Files
  3. Yahoo Developer Network -《Best Practices for Speeding Up Your Web Site
  4. 网页设计:使用CSS缩写给你的网站加速
  5. CSS的优化技巧
  6. 从三方面加速CSS样式作用网页速度

1 則留言:

  1. Hi, Jose

    我們設計阿拉伯網頁發生一部份從左到右不知如何修正
    您是否可幫我修改阿拉伯文網頁

    拜託 感謝

    回覆刪除