為什麼要壓縮CSS與JS語法呢?簡單來說語法每個人都會寫,但是要寫出非常精簡又短的語法真的是要下功夫才行的,而很多人再寫語法時都會用自己的邏輯觀念去撰寫,寫完整個CSS語法後檔案打開來看看語法應該是非常整齊的排列順序,中間還有非常多的空白或是不必要的字元在裡面,這樣整個語法看下來如果語法夠複雜的話還有可能會有上萬行的CSS或JS語法,要怎麼樣把這些不必要的語法行列刪除外,在把CSS、JS語法全部只寫在一行列裡面來加快我們的CSS、JS加載速度呢?這應該會是一個非常頭痛的問題,如果您夠耐心的話可以把上萬行的CSS、JS語法慢慢一行一行的縮短,當然CSS、JS這個問題也是有語法壓縮器的,使用者只要透過線上版的CSS、JavaScript Compressor的壓縮器就可以一秒產生已減少CSS與JS代碼的語法,可以節省非常多不必要的語法行列,來提高節省網頁的加載速度,如果您是ㄧ個網頁設計師,我想這款線上CSS、JS壓縮器一定是不可以缺少的工具之一。
CSS Compressor語法壓縮教學
▼ 首先先進入「CSS Compressor」線上壓縮器網址,在頁面上可以看到下方的下拉式選單內可以選擇要壓縮CSS語法的程度,可以選擇最高、高、標準、低壓縮,預設是選擇「最高」。
▼ 接下來就是把自己網站內的style語法或其它想要壓縮的CSS語法,複製並且貼上在CSS Compressor網頁上的CSS Source Code Input中。
▼ 將要壓縮的語法貼上後,再按下右下角的「Compress」紐,就會開始進行壓縮。
▼ 不用幾秒的時間就可以產生出已經壓縮好的CSS語法,原本INPUT的語法74453字節壓縮減少變成了50266字節,足足節省了48.12%耶。
▼ 在Show advanced options的選項內也有更多進階的選項可以勾選,如果有興趣的朋友們也可以自行摸索看看。
▼ 最後可以看看我們實體壓縮的Style.css檔案,檔案大小從69.0KB壓縮成49.0KB,真的是差很多阿。
JavaScript Compressor語法壓縮教學
▼ 首先先進入「JavaScript Compressor」線上壓縮器網址,一樣的就是把自己網站內的JavaScript語法或其它想要壓縮的JS語法,複製並且貼上在JavaScript Compressor網頁上的JavaScript Source Code Input中。
▼ 將要壓縮的語法貼上後,再按下右下角的「Compress」紐,就會開始進行壓縮。
▼ 不用幾秒的時間就可以產生出已經壓縮好的JavaScript語法,原本INPUT的語法130270字節壓縮減少變成了116333字節,足足節省了11.98%耶。
▼ 在Show advanced options的選項內也有更多進階的選項可以勾選,如果有興趣的朋友們也可以自行摸索看看。
▼ 最後可以看看我們實體壓縮的asalah.js檔案,檔案大小從126KB壓縮成113KB,真的是差很多阿。
值得收藏使用的原因
- 可以加快網站內的CSS、JS加載速度
- 提升優化網站載入檔案流量
- 網頁設計人員必收藏的利器