Minify HTML _

Cara kerja minifikasi HTML

Minifier menelusuri masukan dengan mesin keadaan kecil yang membedakan wilayah yang harus dipertahankan (<pre>, <textarea>, <script>, <style>) dari wilayah yang dapat disusutkan spasi dan dihapus komentarnya.

1. Tokenisasi blok yang dipertahankan. Scanner membaca masukan karakter demi karakter dan beralih ke mode pertahankan ketika menemukan tag pembuka <pre>, <textarea>, <script>, atau <style>. Semua konten dalam tag tersebut disimpan byte demi byte hingga tag penutup yang sesuai.
2. Susutkan spasi yang dapat diedit. Di wilayah yang dapat diedit, scanner menyusutkan setiap rangkaian spasi, tab, dan baris baru menjadi satu spasi, kemudian memangkas spasi awal dan akhir di sekitar batas tag. Teks yang terlihat mengalir ulang dengan cara yang sama seperti browser merendernya.
3. Hapus komentar. Blok <!-- ... --> dihapus ketika sakelar aktif. Komentar kondisional IE (<!--[if IE]> ... <![endif]-->) tetap dipertahankan ketika sakelar preserve-conditional aktif, karena klien email warisan masih mengandalkannya.
4. Susutkan atribut boolean. Bentuk panjang seperti checked="checked", disabled="disabled", dan required="required" menyusut menjadi nama atribut saja. Spesifikasi HTML5 memperlakukan bentuk singkat sebagai semantik identik, sehingga DOM yang dirender tidak berubah.
5. Laporkan selisih byte. Teks asli maupun teks minified diukur dengan new TextEncoder().encode(...).byteLength — jumlah byte UTF-8 yang sama dengan yang akan dilihat CDN atau server HTTP di jaringan. Strip metrik menampilkan ukuran asli, ukuran minified, byte yang dihemat, dan persentase penghematan.

Mengapa minify HTML

• Halaman memuat lebih cepat. HTML yang lebih kecil sampai ke browser lebih cepat dan parser selesai lebih awal. Di jaringan seluler, penghematan byte langsung berdampak pada First Contentful Paint yang lebih cepat dan skor performa Lighthouse yang lebih baik.
• Tagihan egress CDN lebih rendah. CloudFront, Cloudflare, dan Fastly menagih per gigabyte egress. Pengurangan HTML 20 persen di jutaan tampilan bulanan terkumpul menjadi penghematan nyata pada tagihan, sebelum optimasi gambar atau skrip apa pun.
• Diff pull-request lebih bersih. HTML statis yang di-commit ke repositori menjadi berisik ketika setiap perubahan template mengalirkan ulang indentasi. HTML minified di folder dist menghasilkan diff PR yang lebih ringkas yang berfokus pada perubahan konten nyata, bukan gangguan spasi.
• Embed dan snippet lebih kecil. Template email, snippet widget pihak ketiga, dan HTML yang disimpan dalam konfigurasi JSON atau YAML semuanya mendapat manfaat dari pemotongan byte yang sama. Embed minified menjaga email transaksional di bawah batas ukuran ESP dan memperkecil bundel widget.

Aplikasi umum

Minifikasi HTML muncul di akhir hampir setiap pipeline build situs statis atau JAMstack, ditambah sejumlah konteks runtime di mana byte lebih penting daripada keterbacaan sumber.

• Langkah build situs statis: build produksi Eleventy, Hugo, Astro, dan Next.js menjalankan HTML melalui minifier sebelum menulis ke folder dist sehingga bundel yang di-deploy lebih kecil dari sumber.
• Email transaksional: ESP (SendGrid, Postmark, Mailgun) membatasi ukuran body HTML dan perluasan inline-CSS cepat menumpuk. Meminify body sebelum mengirim menjaga pesan di bawah batas.
• Widget tersemat: widget pihak ketiga dan snippet chat yang dikirim sebagai HTML inline mendapat manfaat dari setiap pemotongan byte karena halaman host harus mengunduhnya setiap kunjungan.

Contoh nyata

Tempel snippet formulir 500 byte yang panjang dengan indentasi dua spasi, tiga baris baru di antara baris, blok komentar HTML di atas, dan <input type="checkbox" checked="checked" />. Dengan semua opsi aktif, keluaran menyusut menjadi sekitar 300 byte — penghematan sekitar 40 persen — sementara pohon DOM yang dirender tetap byte-setara dengan sumber.

Apakah minifikasi merusak HTML saya?

Tidak, ketika digunakan dengan sakelar bawaan. Minifier menyimpan konten tag <pre>, <textarea>, <script>, dan <style> secara harfiah, membiarkan komentar kondisional IE tetap utuh ketika sakelar itu aktif, dan hanya menyusutkan spasi yang sudah diklasifikasikan parser HTML5 sebagai tidak signifikan. Pohon DOM yang dirender byte-setara dengan sumber. Sakelar agresif (hapus-atribut-kosong) dapat mengubah perilaku untuk snippet yang sengaja menggunakan value="" atau alt="", jadi tinjau keluaran jika Anda mengaktifkannya.

Apakah ini meminify CSS dan JS inline?

Tidak dalam alat ini. Isi <style> dan <script> inline disimpan secara harfiah sehingga minifier tidak pernah merusak aturan CSS atau pernyataan JS dengan menyusutkan spasi di dalam string literal atau regex. Untuk minifikasi khusus CSS gunakan CSS Minifier; untuk JS gunakan JS Minifier. HTML Minifier berfokus pada markup itu sendiri.

Berapa banyak yang bisa saya hemat?

Penghematan khas pada HTML yang ditulis tangan berkisar 10 hingga 30 persen, tergantung seberapa banyak sumber menggunakan indentasi, baris kosong, dan bentuk atribut panjang. HTML statis yang dibangun oleh framework seperti Next.js sering menghemat 15 hingga 25 persen karena framework sudah melakukan beberapa optimasi tetapi meninggalkan spasi yang dapat dibaca manusia. Template yang banyak dikomentari dan HTML bergaya email dengan nesting dalam dapat mencapai 40 persen atau lebih.

Apakah konten pre dipertahankan?

Ya. Minifier secara eksplisit mentokenisasi blok <pre>, <textarea>, <script>, dan <style> sebagai wilayah pertahankan-apa-adanya dan menyalin kontennya byte demi byte ke keluaran. Spasi, baris baru, dan indentasi di dalam tag tersebut tetap tidak tersentuh setelah minifikasi, sehingga contoh kode dan ASCII art merender persis sama setelah minifikasi.

Minifikasi HTML di sisi browser menjaga pipeline build Anda sederhana dan markup Anda kecil. Tempel HTML apa pun di atas, sesuaikan sakelar opsi, dan salin atau unduh keluaran minified — tidak ada unggahan, tidak ada akun, tidak ada pustaka vendor.