CSS Minifier
Strip komentar, whitespace, dan redundansi dari CSS. Lihat ukuran sebelum/sesudah dan persen penghematan.
Dibuat oleh JXXR1 · ♥ Jadi sponsor · ☕ Belikan saya kopi
Untuk apa ini?
CSS yang readable di source — dengan comment, indentasi, dan whitespace yang bermakna — membengkakkan file yang diunduh user kamu. Structural minifier menghilangkan semua byte kosmetik (comment, deretan whitespace, nol redundan, hex code yang setara tapi lebih pendek) tanpa mengubah arti rule-nya. Tool ini menjalankan pass tersebut di browser kamu dan menampilkan ukuran sebelum/sesudah supaya kamu bisa melihat penghematannya.
Kapan digunakan
- Mengirim snippet CSS inline secara one-off di email HTML atau template blog post, di mana kamu ingin byte-nya mengecil tapi tidak punya build chain.
- Cek cepat berapa banyak "lemak" di sebuah stylesheet sebelum memutuskan apakah optimizer sungguhan layak dipasang.
- Menempelkan CSS pretty-printed dari vendor untuk diramping demi dimasukkan ke third-party widget.
Apa yang dilakukan
- Menghapus block comment (
/* … */) — single-line//toh bukan plain CSS yang valid. - Mengciutkan whitespace di sekitar
{ } : ; ,dan combinator (> ~ +). - Membuang trailing semicolon sebelum
}. - Memotong leading zero (
0.5→.5) dan menghapus unit dari nol (0px→0). - Memendekkan hex color jika persis sama (
#aabbcc→#abc).
Kesalahan umum
- Ini structural minify, bukan optimizer penuh. Tool ini tidak menggabungkan selector duplikat, mengubah urutan rule, atau menulis ulang shorthand. Untuk itu, jalankan
cssnanoatauesbuilddi build pipeline kamu. - Source map tidak dihasilkan. Jika kamu mendebug CSS minified di production, kirim mereka secara terpisah.
- Jangan minify CSS yang kamu commit. Commit source yang pretty; minify saat build/deploy. Mencampur keduanya membuat review diff jadi menderita.
- Kompresi modern dominan. Brotli/gzip di wire melakukan sebagian besar pekerjaan minification. Penghematan terbesar datang dari menghapus rule yang tidak terpakai — itu pekerjaan tree-shaking, bukan minification.