Minifikasi CSS Online
Optimalkan performa web. Minifikasi atau perindah CSS secara instan.
Mengapa menggunakannya
CSS lebih ringan, situs web lebih cepat
Pengurangan 20 hingga 50%
Menghapus spasi, komentar, dan karakter redundan tanpa mengubah fungsionalitas.
Privat
CSS diproses di browser Anda. Tidak pernah diunggah ke server mana pun.
Dua arah
Minifikasi untuk produksi atau perindah CSS yang sudah diminifikasi agar mudah dibaca.
Instan
Hasil dalam milidetik. Tanpa pemrosesan server.
Cara kerjanya
Tiga langkah, tanpa kerumitan
Tempel atau unggah CSS Anda
Tempel kode CSS langsung atau seret berkas .css. Tanpa batas ukuran.
Pilih: minifikasi atau perindah
Minifikasi untuk produksi (menghapus spasi dan komentar) atau perindah untuk membaca dan men-debug kode.
Salin atau unduh hasilnya
CSS yang dioptimalkan muncul secara instan. Salin ke clipboard atau unduh sebagai berkas.
FAQ
Ada pertanyaan?
Minifikasi menghapus semua konten yang tidak diperlukan dari CSS: spasi, jeda baris, tab, komentar, dan mempersingkat beberapa nilai (misalnya #ffffff menjadi #fff, 0px menjadi 0). Hasilnya secara fungsional identik tetapi berukuran lebih kecil, sehingga mengurangi waktu unduh.
Biasanya 20 hingga 50% dari ukuran asli. Berkas CSS 100 KB yang diberi komentar dan diformat dengan baik dapat dikurangi menjadi 60 hingga 70 KB hanya dengan minifikasi. Dikombinasikan dengan kompresi gzip atau Brotli di server, pengurangan total dapat melebihi 80%.
Tidak, keduanya saling melengkapi. Minifikasi menghapus karakter yang tidak perlu sebelum kompresi. Kompresi (gzip, Brotli) lebih lanjut mengurangi ukuran berkas selama transfer. Urutan yang benar adalah: minifikasi terlebih dahulu, kemudian kompresi. Kedua teknik bersama-sama memberikan pengurangan ukuran yang maksimal.
Melalui source map: berkas .css.map yang memetakan setiap baris CSS yang diminifikasi ke posisi aslinya dalam kode sumber. Browser modern dan alat pengembangan seperti Chrome DevTools dan Firefox DevTools membaca source map secara otomatis dan menampilkan kode asli meskipun server menyajikan CSS yang sudah diminifikasi.
Tidak. Saat pengembangan, gunakan CSS yang belum diminifikasi agar lebih mudah di-debug dan dibaca. Minifikasi hanya perlu diterapkan di produksi, idealnya sebagai bagian dari proses build (PostCSS, cssnano, webpack, Vite). Minifikasi saat pengembangan hanya menambah kerumitan yang tidak perlu.
CSS, Core Web Vitals, dan dampak ukuran berkas
Ukuran berkas CSS secara langsung memengaruhi metrik Core Web Vitals Google, terutama Largest Contentful Paint (LCP) dan First Contentful Paint (FCP). CSS yang besar dan memblokir rendering menunda tampilan awal halaman karena browser harus mengunduh dan mengurai CSS tersebut sebelum menggambar konten apa pun. Google telah memasukkan performa pemuatan ke dalam peringkat sejak Pembaruan Pengalaman Halaman tahun 2021.
Ekstraksi Critical CSS adalah teknik lanjutan di luar minifikasi: teknik ini mengidentifikasi CSS yang diperlukan untuk merender konten di atas lipatan dan menyisipkan subset tersebut secara inline dalam HTML, memuat sisanya secara asinkron. Alat seperti Critical (npm), Penthouse, dan plugin PurgeCSS mengotomatiskan hal ini dalam pipeline build.
Ekosistem alat minifikasi CSS telah berkembang pesat: clean-css (Node.js, 2012) adalah pelopornya; cssnano (2014) menjadi standar untuk proyek PostCSS/webpack; LightningCSS (2022, Rust) mewakili generasi baru dengan kecepatan 100x lebih tinggi. Untuk proyek modern yang menggunakan Vite, LightningCSS sudah terintegrasi secara native. Brotli (Google, 2015) menawarkan kompresi 15 hingga 25% lebih baik dibandingkan gzip untuk berkas teks seperti CSS, dengan dukungan di semua browser modern.