CSS Minifier

Perkecil CSS untuk produksi secara instan

CSS Asli

Opsi

CSS yang Diminify

Ikhtisar

CSS Minifier menghapus komentar dan mengompresi whitespace dari stylesheet Anda untuk mengurangi ukuran file untuk produksi — unduhan lebih kecil, parsing dan rendering lebih cepat. Tempel CSS yang terbaca dan dapatkan output ringkas secara instan, dengan perbandingan ukuran sebelum/sesudah secara langsung dan tingkat kompresi yang dapat disesuaikan.

Yang Dikontrol Minifier Ini
  • Kompresi whitespace: minifier yang sadar kutipan dan komentar menghapus spasi, baris baru, dan baris kosong sambil membiarkan konten string tidak tersentuh
  • Penghapusan komentar: hapus komentar /* ... */, atau pertahankan — misalnya untuk menjaga header lisensi — melalui toggle preservasi komentar
  • Optimisasi warna: memperpendek warna hex 6 digit dan nilai rgb() menjadi singkatan hex 3 digit bila memungkinkan
  • Tingkat kompresi: mode Normal melakukan minifikasi whitespace, komentar, dan warna yang aman; mode Aggressive juga menghapus angka nol awal yang berlebihan (0.5px → .5px) dan menghapus digit dari panjang bernilai nol (0px → 0)
  • Perbandingan ukuran: lihat ukuran asli, ukuran hasil minifikasi, dan persentase pengurangan berdampingan
  • Output yang dapat diunduh: simpan hasil minifikasi langsung sebagai file .css
Kapan Anda Meminifikasi CSS
  • Memperkecil stylesheet sebelum menerapkannya ke produksi untuk mengurangi waktu muat halaman
  • Menyiapkan cuplikan CSS kecil untuk disematkan inline dalam tag <style> atau email HTML tanpa membuatnya membengkak
  • Memeriksa dengan cepat seberapa banyak stylesheet akan mengecil sebelum menyiapkan pipeline PostCSS atau build lengkap
  • Meminifikasi stylesheet satu kali untuk CodePen, gist, atau prototipe statis di mana langkah build tidak praktis
  • Membandingkan ukuran hasil minifikasi dengan anggaran performa untuk audit Core Web Vitals atau Lighthouse
Cara Meminifikasi CSS
  1. 1.Tempel CSS Anda ke editor input, atau unggah file .css
  2. 2.Pilih kompresi Normal atau Aggressive, dan tentukan apakah akan mempertahankan komentar
  3. 3.Output hasil minifikasi dan persentase pengurangan ukuran muncul secara otomatis
  4. 4.Salin output atau unduh sebagai file .css
  5. 5.Periksa jumlah byte sebelum/sesudah untuk mengonfirmasi penghematan ukuran sebelum deploy
Kasus Khusus yang Perlu Diketahui
  • Penghapusan angka nol agresif (0px → 0) aman untuk unit panjang, tetapi melewati konten string dan komentar serta membiarkan perhitungan di dalam ekspresi calc() tidak tersentuh
  • Whitespace di dalam string yang dikutip — nama font-family, content: "...", path url() — selalu dipertahankan persis; hanya whitespace struktural di luar string dan komentar yang dihapus
  • Minifier ini tidak mengganti nama kelas, menggabungkan selector duplikat, atau menghapus aturan yang tidak terpakai — itu memerlukan optimizer terintegrasi build-tool seperti cssnano atau PurgeCSS
Keterbatasan
  • Ini adalah minifikasi whitespace, komentar, dan warna, bukan optimisasi penuh — untuk pengurangan ukuran maksimal (penggabungan selector, penghapusan aturan duplikat, penghapusan CSS yang tidak terpakai), gunakan minifier terintegrasi build-tool seperti cssnano atau PurgeCSS
  • Output hasil minifikasi kehilangan semua keterbacaan — selalu simpan sumber asli Anda di bawah kontrol versi
  • Stylesheet yang sangat besar mungkin lambat diproses sepenuhnya di browser — untuk pipeline build produksi, integrasikan minifikasi ke dalam PostCSS atau bundler Anda alih-alih alat browser satu kali
Perlu Arah Sebaliknya?

Jika Anda memiliki CSS yang diminifikasi atau dikompresi dan perlu membaca atau men-debug-nya, gunakan CSS Beautifier. Alat ini memulihkan indentasi, properti yang terurut, dan spasi yang konsisten sehingga stylesheet benar-benar terbaca.