Minify CSS agar Situs Lebih Cepat
Hapus komentar dan spasi berlebih dari CSS Anda untuk memperkecil ukuran file secara instan.
Stylesheet Anda tetap di perangkat
Tidak ada yang perlu dihapus kemudian
Aman untuk antarmuka yang belum terbit
Jalan di semua browser modern
Cara kerjanya
- 1
Tempel CSS Anda
Sebuah stylesheet, gaya sebuah komponen, atau blok yang ingin Anda perkecil sebelum terbit.
- 2
Periksa ukurannya
Bandingkan yang terminifikasi dan terkompresi, dan baca peringatannya sebelum mengganti aslinya.
- 3
Salin keluarannya
Bawa ke sebuah keluaran build, blok `<style>`, atau sebuah templat.
Mengapa memakai alat ini
Urutan deklarasi dipertahankan
Tak ada yang diurutkan ulang, karena kaskade memutus imbang berdasarkan posisi dan memindahkan aturan mengubah apa yang dirender.
Fallback dibiarkan utuh
Properti yang dideklarasikan dua kali biasanya fallback yang disengaja untuk browser lama, bukan duplikasi untuk dihapus.
Tanpa penggabungan shorthand yang tak aman
Melipat properti panjang menjadi shorthand menyetel ulang sisi yang tak Anda sebut, jadi itu tak dilakukan diam-diam.
Ukuran terkompresi ditampilkan
Angka terminifikasi di samping angka gzip, karena hanya yang kedua yang benar-benar diunduh browser.
Diurai di tempat ia semestinya
Browser sudah merupakan mesin CSS, jadi tak ada permintaan yang diperlukan dan berkasnya tinggal di halaman.
Tanpa batas dan tanpa pendaftaran
Pakai pada satu aturan atau pada build sebuah kerangka kerja utuh, sesering yang Anda mau.
Urutan adalah makna, dan itu membatasi apa yang boleh dilakukan minifier dengan aman
CSS menyelesaikan deklarasi yang bersaing pertama-tama dengan kekhususan dan kemudian dengan urutan dokumen: ketika dua aturan berbobot sama, yang ditulis kemudian menang. Itu menjadikan posisi sebagai bagian dari makna sebuah stylesheet, dan itulah sebabnya pengoptimalan yang agresif lebih berisiko di sini daripada di sebagian besar bahasa. Alat yang mengelompokkan semua aturan yang berbagi satu selektor, atau mengurutkan deklarasi demi kompresi lebih baik, atau menggabungkan dua blok yang kebetulan mendeklarasikan properti yang sama, bisa menghasilkan berkas yang lebih kecil bita demi bita dan berbeda secara visual — karena aturan yang dulu datang terakhir kini tidak lagi. Pengurangan yang selalu aman adalah yang tak memindahkan apa pun: menghapus spasi, menghapus komentar, dan memendekkan nilai yang maknanya tetap. Segala yang mengurutkan ulang perlu memahami seluruh kaskade Anda, dan alat tingkat teks tidak memahaminya.
Properti yang sama dua kali biasanya fallback, bukan kekeliruan
Inilah kasus spesifik di mana “hapus duplikatnya” merusak sebuah halaman. Mendeklarasikan sebuah properti dua kali dalam blok yang sama adalah cara baku mendukung browser lama: `color: #ccc` diikuti `color: rgba(0, 0, 0, .5)` berarti browser yang memahami yang kedua memakainya dan yang tak memahaminya jatuh kembali ke yang pertama, karena deklarasi yang tak bisa diurai dibuang alih-alih fatal. Pola yang sama mencakup `display: -webkit-box` sebelum `display: flex`, lebar dalam piksel sebelum lebar `calc()`, dan warna pekat sebelum gradien. Minifier yang melihat dua deklarasi satu properti lalu menyimpan hanya yang terakhir telah menghapus dukungannya; yang menyimpan hanya yang pertama telah menghapus fiturnya. Keduanya keliru, dan perilaku yang benar adalah membiarkan pasangan itu.
Menggabungkan properti panjang ke shorthand menyetel ulang yang tak Anda sebut
Inilah jebakan kebenaran paling halus dalam pengoptimalan CSS. Kalau sebuah aturan menyetel `margin-top` dan `margin-left`, melipat keduanya menjadi satu deklarasi `margin` tak membiarkan dua sisi lainnya seperti semula — sebuah shorthand menyetel tiap properti dalam grupnya, jadi sisi yang tak disebut disetel ulang ke nilai awalnya, membuang apa pun yang diwarisi atau disetel aturan sebelumnya. `background` lebih buruk, karena ia menyetel ulang daftar panjang termasuk `background-size` dan `background-position`, jadi sebuah penggabungan bisa diam-diam membatalkan `background-size: cover` yang dideklarasikan di tempat lain. `font` berperilaku sama terhadap `line-height`. Penghematan dari penggabungan semacam ini kecil dan kegagalannya adalah tata letak yang tampak benar di berkas dan salah di browser, dan itulah sebabnya alat ini tak melakukannya.
Kemenangan besarnya adalah aturan tak terpakai, dan itu lebih sulit daripada kelihatannya
Meminifikasi sebuah stylesheet memangkas mungkin seperlimanya. Menghapus aturan yang tak pernah dipakai sebuah halaman bisa memangkas sembilan puluh persen, karena kerangka kerja serba guna mengirim gaya untuk tiap komponen dan tiap varian sementara halaman tertentu memakai segelintir. Di situlah ukuran yang sesungguhnya berada — dan melakukannya dengan aman sungguh sulit, karena alasan khas CSS. Alat pembersih bekerja dengan memindai templat dan kode Anda mencari nama kelas lalu menyimpan aturan yang cocok. Ia tak bisa melihat nama kelas yang dirakit saat runtime, jadi `"btn-" + variant` tampak bukan apa-apa baginya, dan aturan untuk `btn-danger` terhapus sementara kode yang membutuhkannya masih berjalan. Apa pun yang dibangun secara dinamis, disuntikkan widget pihak ketiga, atau ditambahkan JavaScript setelah pemuatan harus didaftar sebagai pengecualian, dan daftar itulah yang membuat pembersihan menjadi sebuah proyek alih-alih sebuah sakelar.
CSS memblokir perenderan, jadi ukurannya berbiaya lain
Kenapa ukurannya penting tidaklah sama bagi CSS dan bagi skrip. Browser takkan melukis konten yang mungkin ditata ulang sebuah stylesheet yang masih tertunda, jadi stylesheet di bagian kepala memblokir perenderan: sampai ia tiba dan terurai, halamannya tetap kosong. Itu membuat biaya berat CSS mendarat tepat pada lukisan pertama, bagian pemuatan yang paling diperhatikan pengguna, dan itu argumen terkuat untuk menjaga stylesheet kritis tetap kecil. Ia juga menjelaskan kenapa nasihat bakunya adalah menyisipkan sedikit CSS yang dibutuhkan area terlihat dan memuat sisanya secara asinkron — perubahan struktural yang jauh lebih menolong daripada minifikasi. Kalau Anda hanya bisa melakukan satu hal, membelah stylesheet-nya mengalahkan mengompresnya.
Kenapa meminifikasi secara lokal penting untuk jenis berkas ini
Sebuah stylesheet kurang jelas kerahasiaannya dibanding kode aplikasi dan tetap saja menggambarkan lebih banyak daripada yang orang sadari. Nama kelas memetakan antarmuka Anda: ia menamai komponen yang belum terbit, varian milik eksperimen yang masih berjalan, panel yang hanya dilihat administrator, dan fitur di balik sebuah flag. Komentar di CSS berterus terang dengan cara yang tak dimiliki komentar di tempat lain — sebuah nama klien, catatan tentang browser mana yang rusak, pengingat bahwa sebuah nilai adalah tambalan untuk kutu di versi tertentu. Menempelkan stylesheet produksi ke minifier yang dihosting menyerahkan semua itu demi pengurangan ukuran yang tersedia secara lokal. Alat ini memproses berkasnya di halaman dan tak mengirimkan apa pun, yang bisa Anda pastikan di tab Network pada developer tools.
Kesalahan umum yang sebaiknya dihindari
- Menghapus properti yang dideklarasikan dua kali dalam satu blok. Itu hampir selalu fallback yang disengaja untuk browser lama — menyimpan hanya satu dari pasangannya menghapus dukungan atau fiturnya.
- Menggabungkan properti panjang menjadi shorthand. Shorthand menyetel tiap properti dalam grupnya, jadi sisi yang tak Anda sebut disetel ulang ke nilai awalnya alih-alih dibiarkan.
- Membiarkan alat mengurutkan ulang atau mengelompokkan aturan demi kompresi lebih baik. Kaskade memutus imbang dengan urutan dokumen, jadi berkas yang lebih kecil bisa terender berbeda.
- Mengharapkan minifikasi menyelesaikan ukuran stylesheet. Aturan tak terpakai biasanya justru bagian terbesarnya; minifikasi memangkas sekitar seperlima dari yang dipangkas satu lintasan CSS tak terpakai.
- Membersihkan CSS tak terpakai tanpa mendaftar nama kelas yang dinamis. Nama yang dirakit sebagai `"btn-" + variant` tak kasatmata bagi pemindai, jadi aturannya terhapus sementara kodenya masih berjalan.
Perbandingan
| Aspek | Alat ini | Minifier daring | Sebuah pipeline build |
|---|---|---|---|
| Stylesheet dikirim ke server | Tidak pernah | Umumnya ya | Tidak |
| Mempertahankan urutan deklarasi | Selalu | Umumnya | Umumnya |
| Menjaga fallback browser | Ya | Beragam | Bisa dikonfigurasi |
| Menghapus aturan tak terpakai | Tidak | Tidak | Dengan langkah pembersihan |
| Ukuran terkompresi ditampilkan | Ya | Jarang | Dengan pengaya |
| Harga | Gratis | Gratis / paket berbayar | Gratis |
Fitur
Penghapusan spasi dan komentar
Segala yang diabaikan pengurai dibuang, termasuk baris kosong yang mengelompokkan aturan Anda.
Pemendekan nilai yang aman
Warna direduksi ke bentuk setara terpendeknya dan satuan nol dipangkas, di tempat maknanya tak mungkin berubah.
Aman-urutan secara rancangan
Aturan mempertahankan posisinya, jadi kekhususan dan urutan sumber tetap terselesaikan sama.
Kedua ukuran dilaporkan
Mentah dan terkompresi, karena kompresi sendiri sudah memadatkan sebagian besar yang dihapus minifikasi.
Sintaksis modern dipahami
Properti kustom, penyarangan, container query, dan layer lewat tanpa dirusak.
Mampu menangani stylesheet besar
Build sebuah kerangka kerja utuh terminifikasi tanpa unggahan maupun plafon ukuran.
Tanpa instalasi
Tanpa alat build, tanpa runtime, tanpa dependensi — jalan di halaman web.
Ramah Arab dan RTL
Antarmuka lengkap dalam delapan bahasa, termasuk Arab kanan-ke-kiri.
Aman secara bawaan
Disajikan lewat HTTPS, tanpa pelacakan konten dan tanpa unggahan ke pihak ketiga.
Siapa yang memakainya
Pengembang front-end
Mengecilkan stylesheet yang tak melewati langkah build.
Insinyur performa web
Mengecilkan stylesheet pemblokir render yang menahan lukisan pertama.
Pengembang surel
Memadatkan gaya yang harus disisipkan ke templat berbatas ukuran.
Siapa pun yang menyisipkan blok gaya
Membuat gaya komponen cukup kecil untuk disisipkan di kepala halaman.
Pertanyaan yang Sering Diajukan
Tidak. Semuanya berjalan lokal di browser Anda — teks Anda tidak pernah diunggah, disimpan, atau dibagikan.
Ya — sepenuhnya gratis, tanpa akun dan tanpa batas.