CSS Minifier

Apa itu minifikasi CSS?

Minifikasi CSS menghapus setiap byte yang tidak dibutuhkan browser, seperti komentar, indentasi, pemutusan baris, dan titik koma terakhir di setiap aturan. Beberapa nilai juga ditulis ulang menjadi bentuk yang lebih pendek. Hasilnya tetap berfungsi sama, tetapi ukurannya lebih kecil sehingga lebih cepat diunduh dan diurai. Karena CSS bersifat render-blocking, stylesheet yang lebih kecil bisa langsung meningkatkan First Contentful Paint dan Largest Contentful Paint.

Apa saja yang diubah minifier ini?

Mengapa aman?

Minifier yang terlalu agresif kadang merusak stylesheet. Minifier ini hanya menerapkan transformasi yang tidak mengubah perilaku:

• String, nilai url(), dan karakter yang di-escape dilindungi serta tidak pernah diubah.
• Unit hanya dihapus pada panjang. 0s, 0deg, dan 0% tetap dipertahankan (transition: 0s dan selector keyframe membutuhkannya). Isi dari calc(), min(), atau clamp() tidak disentuh karena calc(0 + 10px) tidak valid.
• Shorthand flex dilewati (flex: 1 1 0px dan flex: 1 1 0 tidak selalu sama di mesin browser lama), dan nilai custom property hanya dikurangi spasi berlebihnya.
• Spasi di selector tetap dipertahankan jika memiliki arti. a :hover (descendant yang sedang di-hover) berbeda dengan a:hover.
• @layer name {} tetap dipertahankan meskipun kosong, karena ia menentukan urutan layer. Komentar lisensi yang diawali /*! dipertahankan secara default.

Minifikasi vs. kompresi

Minifikasi dan kompresi gzip/Brotli saling melengkapi. Kompresi menghilangkan pengulangan, sedangkan minifikasi menghapus byte yang tidak bisa dihapus kompresi, seperti komentar. Angka Gzipped output menunjukkan perkiraan ukuran yang dikirim lewat jaringan jika servermu mengompres respons (kebanyakan server melakukannya). Untuk hasil terbesar, hapus juga aturan yang tidak terpakai dengan alat seperti PurgeCSS, dan sisipkan hanya critical CSS untuk konten di atas lipatan.

Ingin memeriksa file yang sudah di-minify? Gunakan mode Beautify di sini atau CSS Formatter. Ingin mengecek performa seluruh halaman? Jalankan page speed test.

Juga dicari sebagai: minify css, kompresor css, kompres css, compress css, optimasi css, perkecil ukuran css, minify css online, alternatif cssnano.

Tool yang cocok dipakai bersama CSS Minifier

• Formatter HTML — Tempel markup yang berantakan atau sudah di-minify, lalu dapatkan HTML rapi dengan indentasi konsisten — termasuk blok <style> dan <script> di dalamnya.
• Formatter JavaScript — Rapikan dan beri indentasi JavaScript, JSON atau JSX sesuai preferensimu, dengan gaya kurung kurawal pilihanmu, atau hapus spasi dan komentar dengan minifier yang sudah terverifikasi.
• Kompres Gambar — Perkecil foto dan grafis hingga 90% tanpa penurunan kualitas yang terlihat, tergantung gambar dan pengaturannya.
• Formatter SQL — Tempel satu query atau satu file migrasi utuh, lalu dapatkan SQL yang mudah dibaca dengan satu klausa per baris, join yang sejajar, dan huruf kapital kata kunci yang konsisten, sesuai tata bahasa database kamu.