CSS & JavaScript Compressor 線上程式碼壓縮工具，有效提高網站速度

在更新網站時，經常透過網站檢測工具來檢查網站有沒有可以改進的部份，例如我個人相當常用 PageSpeed Insights 和 Think With Google，通常會出現 CSS、JavaScript 程式碼可以被壓縮的最佳化提示資訊。如果沒有特別設定，大部分情況下會維持程式碼的可讀性，對於開發者在編輯來說會很有用，但其實放在網路上只要求能夠越快被下載越好，利用壓縮方式將不必要的空格、註解或換行清除，讓檔案盡量維持在最小狀態，不僅可提高下載效率，也能節省網站流量耗費。

本文要介紹的「CSS Compressor」是一款 CSS 樣式表壓縮工具，類似服務不少，運作原理大同小異，只要找一個自己習慣的使用即可。使用方法非常簡單，將你網站使用的樣式表和 JavaScript 程式碼丟入網站，選擇要壓縮等級，就能將程式碼精簡、最小化，無論是什麼類型的網站或部落格我建議上線時至少進行一次檔案壓縮，就能讓網站速度有更好的表現。

如果使用 WordPress 架站，也有很多外掛程式可直接壓縮、最小化檔案，例如之前介紹的 Breeze 免費快取外掛就內建最小化功能；若要更簡單的作法，Cloudflare 架站者必備免費 CDN、DNS 托管加速功能就有提供壓縮選項，開啟就會在雲端自動幫你的 HTML、CSS 和 JavaScript 最小化。

網站名稱：CSS Compressor
網站鏈結：https://csscompressor.com/

使用教學

STEP 1

使用 CSS 壓縮各種 CSS 樣式表，支援 CSS 1、CSS 2、CSS 2.1 和 CSS 3，可減少 CSS 程式碼大小，讓你的網站載入速度更快！壓縮等級（Compression Level）提供四個不同的級別，最高級別會撇開任何的可讀性，但能獲得最小尺寸；依照不同級別也會有不太一樣的壓縮效果，如果日後還會編輯，我建議可拆分成壓縮及未壓縮兩個檔案。

STEP 2

若沒有要做其他設定選項，把要壓縮的 CSS 樣式表複製、貼上，點擊「Compress」綠色按鈕即可立即壓縮。

STEP 3

CSS Compressor 壓縮等級包括最高、高、標準和低，最高壓縮級別能獲取最小的檔案尺寸，依照等級逐步遞減，但相對來說也會有更好的易讀性。CSS Compressor 會處理的項目除了將不必要的空格和換行去除，還會處理色碼、字重、移除用不到的符號等等。

STEP 4

壓縮後 CSS Compressor 會直接把壓縮完成的原始碼顯示於網頁中，同時顯示輸入的檔案大小、壓縮後檔案大小及兩者相差百分比，通常對於沒壓縮過的檔案都會有不錯的壓縮減少。類似工具還有 JavaScript Compressor 用以處理 JS 程式，不過兩者好像共通，只要把程式碼丟進去一樣可以最佳化。