Apa itu Minifikasi CSS?

CSS Minifier mengompresi CSS Anda dengan menghapus spasi, komentar, dan sintaks berlebih. File yang lebih kecil diunduh lebih cepat dan menaikkan skor PageSpeed Anda.

Di balik layar minifier menjalankan algoritme CSSO, lebih dari sekadar mencabut spasi. Ia menggabungkan aturan bertetangga dengan selector yang sama, membersihkan redundansi notasi singkat (margin: 10px 10px 10px 10px menjadi margin: 10px), membuang prefiks vendor yang tak Anda butuhkan, serta memendekkan warna heks enam digit menjadi tiga bila memungkinkan.

Cara menggunakan

1. Tempel kode CSS Anda di area input, unggah file .css, atau muat stylesheet langsung dari URL.
2. Klik minify untuk mengompresi — alat ini menghapus komentar, spasi, dan mempersingkat nilai-nilai.
3. Salin output yang sudah diminifikasi atau unduh sebagai file .css. Periksa rasio kompresi yang ditampilkan.

Kapan menggunakan

• Memublikasikan stylesheet situs statis yang tidak memiliki tahap build.
• Membandingkan dua versi CSS untuk melihat seberapa banyak kode tangan yang berulang.
• Memeras byte terakhir ketika menyisipkan critical CSS ke dalam head HTML.

Hasil

Stylesheet 24KB dengan komentar dan pemformatan diminifikasi menjadi 16KB — pengurangan 33% yang menghemat 50ms waktu muat pada koneksi 3G.

FAQ

Apakah CSS yang diminifikasi tampil berbeda dari aslinya?

Browser memparsing CSS yang diminifikasi dan yang masih rapi dengan cara yang sama persis. Cascade, spesifisitas, dan style hasil hitungan tetap. Yang berubah hanya ukuran file di disk dan saat dikirim.

Perlukah hasilnya digzip juga?

Perlu. Gzip di atas minifikasi memangkas 60-80% lagi. Sebagian besar CDN menerapkan gzip otomatis. Minifikasi tetap berguna karena gzip mengompresi pola berulang, dan CSS hasil minifikasi memiliki lebih banyak pola seperti itu.

Apakah minifikasi merusak source map saya?

Alat ini tidak membuat source map karena bekerja pada satu string CSS, bukan grafik build. Bila perlu peta, gunakan bundler seperti esbuild atau Vite yang menghasilkan .css.map di samping CSS hasil minifikasi.

Mengapa file hasil minifikasi masih memiliki beberapa spasi?

CSS mempertahankan spasi di dalam string, antar bagian selector (.a .b berbeda dengan .a.b), dan di dalam calc(). Minifier hanya mencopot spasi yang tidak bermakna dan membiarkan sisanya.

Aman tidak meminifikasi CSS yang memakai custom property (variabel CSS)?

Aman. Nama dan nilai custom property tetap utuh, minifier hanya merapikan format di sekelilingnya. Variabel seperti --brand-color bertahan persis seperti Anda menulisnya dan tetap dipanggil lewat var().

Alat terkait