Minify CSS _

Cara kerja minifikasi CSS

Peminifikasi menelusuri stylesheet Anda dengan tokeniser yang mengenali konteks, yang membedakan wilayah yang dilindungi (literal string dan nilai url()) dari spasi yang dapat diedit di mana penyusutan dan penghapusan aman dilakukan.

1. Lindungi string dan URL. Sebelum transformasi lain, tokeniser mengidentifikasi setiap string dalam tanda kutip ("…" atau '…') dan setiap argumen url(…) lalu menyimpannya apa adanya. Pass berikutnya tidak pernah menyentuh byte ini, sehingga URL background-image dengan spasi atau properti content dengan tanda baca dipertahankan persis.
2. Hapus komentar. Blok /* … */ dihapus ketika toggle aktif. Jika toggle komentar-lisensi juga aktif, blok /*! … */ bertahan agar header lisensi MIT, Apache, dan BSD tetap ada di keluaran sesuai persyaratan lisensi tersebut.
3. Susutkan spasi. Setiap rangkaian spasi, tab, dan baris baru disusutkan menjadi satu spasi, lalu spasi di sekitar karakter struktural CSS {, }, ;, :, dan , dihapus sepenuhnya. Daftar selektor dan nilai mengalir ulang dengan cara yang sama seperti parser peramban membacanya.
4. Optimalkan nilai. Pass opsional mengubah kode warna hex menjadi huruf kecil, menyusutkan pasangan saluran hex 6 digit menjadi singkatan 3 digit (#aabbcc → #abc), dan menghapus satuan dimensi dari nilai nol (0px → 0). Pass satuan-nol melewati nilai di dalam panggilan transform() di mana satuan signifikan.
5. Laporkan penghematan byte. Teks asli maupun minified diukur dengan new TextEncoder().encode(…).byteLength, jumlah byte UTF-8 yang sama dengan yang dilihat CDN atau server HTTP di jaringan. Strip metrik menampilkan ukuran asli, ukuran minified, byte yang dihemat, dan persentase penghematan.

Mengapa minify CSS

• Muat render-blocking lebih cepat. Peramban tidak akan menggambar satu piksel pun sampai selesai mengurai CSS. Pengurangan stylesheet 30 persen mempersingkat blok tersebut, meningkatkan First Contentful Paint, dan langsung terlihat dalam skor Lighthouse Performance Anda.
• Tagihan egress CDN lebih rendah. CloudFront, Cloudflare, dan Fastly semuanya menagih per gigabyte egress. Memangkas 20 persen dari stylesheet yang dikirim di setiap tampilan halaman menjadi baris nyata pada tagihan begitu lalu lintas bulanan melewati beberapa juta tampilan.
• Embed dan CSS email lebih kecil. Template email transaksional menyisipkan CSS-nya secara inline untuk bertahan dari keanehan rendering Outlook dan Gmail, dan setiap byte ekstra membawa Anda lebih dekat ke ambang kliping 102 KB Gmail. Meminify sebelum menyisipkan inline menjaga pesan tetap di bawah batas.
• Tanpa ketergantungan build-tool. Pekerjaan satu kali, repo lama tanpa pipeline build, dan lingkungan yang terisolasi tidak selalu memiliki ruang untuk toolchain Node. Anda bisa menjalankan pass di sini tanpa menginstal PostCSS, cssnano, atau apa pun.

Aplikasi umum

Minifikasi CSS muncul di akhir hampir setiap pipeline build front-end dan dalam beberapa konteks runtime di mana jumlah byte penting.

• Pipeline build produksi: Webpack, Vite, Rollup, dan Parcel semuanya menyertakan langkah minifikasi CSS dalam default mode produksi mereka. Menjalankan pass di sini sebelum commit memungkinkan Anda memvalidasi keluaran tanpa memicu build penuh.
• Menyematkan CSS dalam tag <style>: framework server-rendered yang menyisipkan CSS kritis ke dalam dokumen HTML mendapat manfaat penghematan byte yang sama seperti stylesheet mandiri, dan CSS inline yang lebih kecil mengurangi Time to First Byte.
• Email transaksional dan pemasaran: HTML email menyisipkan semua CSS secara inline, sehingga setiap kilobyte dalam stylesheet menambah total ukuran pesan. Meminify sebelum menyisipkan inline menjaga pesan jauh di bawah batas ukuran ESP.

Contoh yang dikerjakan

Tempel ruleset 1 KB dengan indentasi dua spasi, baris kosong antara selektor, blok komentar lisensi di atas, dan warna hex yang panjang seperti #FFFFFF serta margin dengan padding nol seperti margin: 0px. Dengan setiap opsi diaktifkan, keluaran menyusut menjadi sekitar 600 byte — penghematan 40 persen — sementara halaman yang dirender tetap byte-setara dengan sumber.

Apakah minifikasi mengubah perilaku CSS saya?

Tidak, pada toggle bawaan. Peminifikasi hanya menghapus byte yang sudah dibuang parser CSS — spasi, komentar, titik koma akhir opsional — dan melewati bagian dalam transform() di mana satuan signifikan. Setiap selektor, properti, dan nilai dipertahankan.

Apakah ini bekerja dengan SCSS atau LESS?

Hanya setelah Anda mengkompilasinya ke CSS biasa. Sintaks SCSS dan LESS (variabel, nesting, mixin, selektor parent &) bukan CSS yang valid dan peminifikasi akan merusaknya. Kompilasi sumber preprocessor Anda terlebih dahulu, lalu tempel keluaran yang dikompilasi di sini.

Mengapa komentar lisensi saya dihapus?

"Hapus komentar" aktif secara default dan menghapus setiap blok /* … */. Aktifkan "Pertahankan komentar lisensi /*!" untuk menyimpan blok yang dimulai dengan /*!. MIT, Apache, dan BSD semuanya mengharuskan header hak cipta disertakan bersama CSS yang didistribusikan ulang.

Berapa banyak yang bisa saya hemat?

CSS yang ditulis tangan biasanya turun 15 hingga 35 persen. File yang banyak komentar atau sangat bersarang dengan banyak literal warna bisa mencapai 40 persen. Keluaran yang dikompilasi dari Sass atau CSS-in-JS sering kali sudah sebagian diminify dan menghemat lebih sedikit — biasanya 5 hingga 15 persen.

Jalankan minifikasi CSS di tab peramban dan Anda melewati toolchain Node sepenuhnya. Tempel stylesheet di atas, aktifkan opsi sesuai tingkat agresivitas yang Anda inginkan, lalu salin keluaran atau unduh sebagai .min.css. Tanpa unggahan, tanpa akun, tanpa pustaka vendor.