通達人驛站: 加速你的Blog-4 優化CSS

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

根據我參考其他文章的內容自己試用後，我發現確實有一些方法，能優化CSS：

使用短的CSS屬性
使用CSS縮寫屬性
減少空白
刪掉註釋
使用外部的CSS檔案
簡化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 Compressor、CSS Compressor後，我推薦大家使用CleanCSS，因為CleanCSS的操作步驟非常簡單。

使用CleanCSS

讓一般的使用者都能有機會試著自行壓縮CSS屬性，作法也非常簡單，只要把剛剛已經置換後的屬性：

把介於<b:skin> 和 <b:/skin> tags之間的程式碼全框起來複製
貼到CleanCSS內的「CSS-Code:」下的框中
設定「Code Layout」（初學者建議選「Low (higher reliability)」）
設定「Options」（建議選項如圖）
點選「Process CSS」後會出現：
- Messages：說明壓縮的細節、和發現的錯誤
- 壓縮的結果，包括：壓縮比例、壓縮後的程式碼
把壓縮後的程式碼全框起來複製，貼到原來的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有兩個缺點：

程式碼和使用CleanCSS前的還是不同，尤其會加入階層的內縮（indent）。
有個小Bug。如果你在前一行的尾巴加入了註解，經過了CleanCSS和Styleneat的處理後，註解會跳到下一行。我已經和作者反應這個Bug，不過截至2009/5/20為止他一直尚未修正。

使用外部的CSS檔案

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

如果要使用這個方法：

我建議將自己設定的CSS（如：Blog Hacker）都存一個新的CSS檔名（我這裏是取href_class.css）
上傳至一個internet能讀取到的地方（如：Hinet的網路空間）
在</title>後面一行使用以下的語法呼叫即可。

<link rel="stylesheet" type="text/css" href="href_class.css" />

如果你有二個以上的部落格，而且使用相同的CSS語法，使用這個方法，將有助於你管理CSS檔案。但這個方法，需要「圖床」來放這些檔案。此外，如果「圖床」掛了，也會因讀不到檔案，使頁面看起來不完整。

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

簡化CSS

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

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

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