Minifier HTML

Tentang minifikasi HTML

HTML adalah hal pertama yang diunduh, diurai, dan dirender browser pada setiap pemuatan halaman. Dokumen HTML berada di jalur rendering kritis: browser tidak dapat mulai mengambil CSS, JS, atau gambar sampai itu telah mengurai cukup HTML untuk menemukan apa itu. Setiap kilobyte HTML yang ditransfer dan diurai menunda Time to First Byte (TTFB) dan Largest Contentful Paint (LCP): dua dari tiga Core Web Vitals yang digunakan Google sebagai sinyal peringkat. Minifikasi HTML menghapus byte yang dimasukkan manusia di sana untuk keterbacaan (spasi antara tag, komentar, sintaks atribut redundan) tanpa mengubah apa yang dilihat browser. Kompresi Gzip dan Brotli di tepi CDN menangani sebagian besar ukuran: nama tag yang berulang dikompresi dengan indah: tetapi minifikasi di atas masih menghemat biasanya 5-15% byte tambahan dengan menghapus apa yang tidak dapat dilihat compressor (byte mati secara semantik yang dikompresi ke output yang serupa tetapi tidak identik). Itu terdengar kecil sampai Anda mengalikannya dengan setiap permintaan halaman ke situs lalu lintas tinggi; tagihan bandwidth dan peningkatan LCP keduanya penting pada skala.

Ada dua kasus saling melengkapi di mana penghematan lebih besar: halaman yang dirender sisi-server (Next.js, Remix, Hugo, Eleventy) di mana HTML dihasilkan baru per permintaan dan template framework sering menyertakan indentasi yang dermawan dan komentar yang bermanfaat; dan build situs statis di mana minifikasi berjalan sekali pada waktu build dan terbayar selamanya. Generator situs statis modern mengirim minifikasi HTML sebagai opsi waktu-build: flag --minify Hugo mendarat di v0.47 (17 Agustus 2018), Eleventy menggunakan html-minifier-terser melalui plugin, Next.js menerapkannya melalui SWC, dan Astro 3.0 mengirim minifikasi HTML built-in dengan integrasi opsional astro-compress di atasnya. Untuk HTML buatan tangan atau template tanpa pipeline build, minifier dalam-browser ini adalah jalur dengan paling sedikit hambatan.

Apa yang Sebenarnya Dilakukan Minifier

• Pengkompresan spasi inter-elemen. Spasi dan baris baru antara tag dilucuti: <p> Halo </p> menjadi <p>Halo</p> ketika aman. Kualifikasi "ketika aman" penting: spasi antara elemen inline (<span>, <a>, <em>) dirender (sehingga "foo bar" harus mempertahankan spasi antara span). Spasi antara elemen blok (<div>, <p>) biasanya tidak.
• Penghapusan komentar. Blok <!-- ... --> dilucuti. Komentar bersyarat (<!--[if IE]>...<![endif]-->) dipertahankan ketika ada, meskipun Microsoft menghapus pemrosesan komentar bersyarat dari Internet Explorer 10 dan seterusnya: aman untuk dijatuhkan di situs apa pun yang tidak mendukung IE9 atau lebih lama.
• Penyederhanaan atribut. Tanda kutip atribut dihapus ketika nilai tidak mengandung spasi, >, =, atau karakter kutip jenis apa pun: class="btn" menjadi class=btn. Atribut boolean disederhanakan: disabled="disabled", checked="checked", selected="selected", readonly="readonly" semua menjadi hanya nama atribut. Nilai atribut default dijatuhkan: type="text" pada input, type="text/javascript" pada tag script, method="get" pada formulir.
• Elemen void tetap void. <br>, <hr>, <img>, <input>, <meta>, dan <link> tidak memiliki tag penutup di HTML5. Garis miring penutup-sendiri XHTML (<br />) dijatuhkan: <br /> menjadi <br>.
• Konten yang dilindungi. Konten <pre>, <textarea>, <script>, dan <style> dipertahankan apa adanya karena spasinya signifikan. JavaScript dan CSS inline memerlukan langkah minifier mereka sendiri (alat terpisah).

Kasus Spasi-Signifikan yang Akan Menggigit Anda

Risiko terbesar dalam minifikasi HTML adalah memampatkan spasi di mana itu penting. Elemen inline dengan spasi sekitarnya merender spasi sebagai spasi yang terlihat; foo <em>bar</em> baz memiliki spasi di sekitar bar; jika minifier memampatkan spasi tersebut menjadi tidak ada, teks yang dirender menjadi "foobarbaz" tanpa pemisahan. Minifier konservatif mempertahankan spasi tunggal apa pun antara teks dan elemen inline; yang agresif (dengan conservativeCollapse: true dimatikan) menghapusnya. Spasi di dalam elemen dengan CSS white-space: pre juga dirender; minifier tidak dapat melihat aturan CSS dan dapat memampatkannya secara salah. Komentar yang dihapus di dalam komentar bersyarat dapat merusak perilaku khusus-IE pada situs warisan. Komentar yang digunakan sebagai penanda build (placeholder <!---> Vue, <!--bindings={...}--> Angular) perlu bertahan dari pass minifikasi. Minifier modern menangani kasus-kasus ini; pendekatan regex saja (alat ini) konservatif: itu mempertahankan spasi di dalam blok yang dilindungi tetapi tidak memiliki kesadaran penuh inline-vs-blok. Untuk situs produksi dengan banyak prosa yang sarat-elemen-inline, uji output yang diminifikasi sebelum men-deploy.

Sintaks Permisif HTML5: dan Mengapa XHTML Kalah

Permisivitas HTML5 adalah yang membuat minifikasi mungkin sama sekali. XHTML (varian HTML sintaks-XML yang ditinggalkan) memerlukan sintaks ketat: setiap tag ditutup, setiap atribut dikutip, setiap atribut dieja dalam huruf kecil. XHTML 2.0 ditinggalkan ketika piagam W3C-nya berakhir pada 2 Juli 2009; HTML5 menjadi W3C Recommendation pada 28 Oktober 2014. HTML5 sengaja mengizinkan beberapa sintaks setara: <br> dan <br/> keduanya legal; type="text" pada input adalah default dan dapat dihilangkan; tanda kutip di sekitar class=btn opsional ketika nilainya sederhana. Permisivitas ini persis apa yang dieksploitasi minifier: setiap elemen sintaksis "opsional" adalah byte yang dapat dijatuhkan minifier. Trade-off-nya adalah HTML yang diminifikasi lebih sulit dibaca manusia (yang baik-baik saja karena tidak ada yang membaca HTML produksi kecuali melalui View Source).

Sejarah Singkat Tooling Minifikasi HTML

HTMLMinifier Will Peavy (alat willpeavy.com, pertengahan 2000-an hingga ~2010) adalah minifier HTML berbasis-browser yang asli dan paling banyak dikutip: alat single-page yang mengambil HTML yang ditempel dan memancarkan versi yang dilucuti. html-minifier kangax (Juriy "kangax" Zaytsev, diumumkan 9 Maret 2010 di blog Perfection Kills-nya) adalah minifier HTML Node.js sadar-AST serius pertama; selama hampir satu dekade itu adalah alat Node kanonis, digunakan oleh webpack-html-plugin, pipeline Gulp, dan sebagian besar generator situs statis. Rilis terakhir kangax adalah v4.0.0 pada 1 April 2019; repository secara efektif tidak terpelihara sejak 2021 tetapi belum secara resmi diarsipkan. html-minifier-terser (dipelihara oleh Daniel Ruf dengan kontribusi dari kangax, Alex Lam, dan lainnya) adalah fork yang dipelihara secara aktif yang mengambil di mana kangax berhenti; itu yang webpack-html-plugin gunakan secara default hari ini dan apa yang sebagian besar pipeline build benar-benar jalankan. minify-html Wilson Lin adalah minifier berbasis Rust dengan kinerja yang jauh lebih baik untuk input HTML besar. tdewolff/minify adalah alternatif Go yang digunakan di Hugo dan berbagai generator situs statis berbasis-Go. swc dan Lightning CSS memiliki dukungan HTML dalam toolchain Rust masing-masing, digunakan oleh Next.js (yang berpindah dari Babel ke SWC mulai dari Next.js 12) dan Parcel masing-masing. html-minifier-next (diumumkan melalui issue GitHub #1165 pada 10 Juli 2025) adalah fork kangax yang lebih baru yang sedang dimigrasikan beberapa proyek.

HTML Email: Dunia yang Berbeda

HTML email adalah ladang ranjau minifikasinya sendiri. Klien email memiliki parser yang sangat bervariasi: Outlook 2007-2019 menggunakan rendering HTML Microsoft Word (dirancang untuk dokumen yang diproses kata, bukan web), Gmail melucuti tag <style> di atas ambang batas ukuran tertentu, Apple Mail dan Yahoo Mail mengikuti standar web lebih dekat. Aturan minifikasi HTML web tidak semua berlaku untuk email: menghapus spasi inter-tag dapat merusak layout Outlook; menghapus tanda kutip opsional dapat merusak beberapa parser webmail; menghapus atribut type="text/css" pada tag <style> inline dapat dijatuhkan diam-diam oleh Gmail. Tingkat minifikasi "yang tepat" untuk email jauh lebih konservatif daripada untuk HTML web: biasanya hanya penghapusan komentar dan spasi, meninggalkan semua yang lain sendirian. Alat khusus email seperti MJML dan Foundation for Emails menangani keanehan email-HTML pada waktu kompilasi; menjalankan minifier HTML web generik pada template Mailchimp kemungkinan akan merusaknya di Outlook.

AMP HTML dan Pendekatan Validator-First

Proyek Accelerated Mobile Pages Google (diluncurkan 7 Oktober 2015) mengambil pendekatan sebaliknya: alih-alih meminifikasi setelah kenyataan, AMP mendefinisikan subset ketat HTML yang sudah kecil berdasarkan konstruksi. AMP memerlukan satu blok inline <style amp-custom> (75 KB max sejak 13 Maret 2020, dinaikkan dari 50 KB), melarang sebagian besar JavaScript kecuali amp-script, dan menggunakan validator ketat untuk menegakkan semua aturan. Proyek ini di-deprioritisasi pada 2021-2022 karena manfaat peringkat carousel AMP berkurang, dan banyak penerbit telah berjalan jauh dari AMP demi HTML yang diminifikasi+dioptimalkan biasa; itu masih digunakan oleh penerbit berita yang bergantung pada lalu lintas Google Discover. Relevansi dengan minifier HTML generik adalah AMP menunjukkan seperti apa standar HTML yang sangat sadar-byte: berpendapat, ditegakkan-validator, dan kecil.

Lingkup Jujur: Apa yang Dilakukan dan Tidak Dilakukan Alat Ini

Alat ini adalah minifier HTML berbasis-regex: sekitar 30 baris JavaScript. Ia tokenisasi konten <pre>, <textarea>, <script>, dan <style> menjadi placeholder sehingga transformasi berikutnya tidak dapat merusaknya; melucuti komentar <!-- ... --> (dengan lookahead untuk mempertahankan komentar bersyarat <!--[if); memampatkan spasi antara tag; secara konservatif menghapus tanda kutip atribut ketika nilai hanya mengandung karakter aman ([a-zA-Z0-9_-]+); dan menyederhanakan daftar hardcode lima belas atribut boolean. Apa yang tidak dilakukan alat ini, yang ditangani minifier produksi: itu tidak menjatuhkan tag akhir opsional (</li>, </td> dalam banyak konteks): yang memerlukan pemahaman model konten HTML5; itu tidak menghapus atribut redundan dari nilai default (type="text" pada input, type="text/javascript" pada skrip) di luar yang secara eksplisit terdaftar; itu tidak meminifikasi konten <style> atau <script> inline (gunakan alat khusus CSS Minifier dan JS Minifier untuk itu, lalu tempel kembali); itu tidak mengurutkan atribut secara alfabetis (yang dapat sedikit meningkatkan kompresi gzip); itu tidak menangani aturan minifikasi khusus-SVG. Untuk proyek dengan pipeline build, gunakan html-minifier-terser, minify-html, atau swc; untuk HTML satu-kali, alat ini menghilangkan friksi.

Privasi: Mengapa Hanya-Browser Penting di Sini

Minifier HTML sisi-server memerlukan upload sumber. Untuk halaman web yang dipublikasikan ini tidak berbahaya (HTML sudah publik). Untuk template alat admin internal, halaman produk yang belum dirilis, HTML varian A/B-test, atau template email dengan konten yang dipersonalisasi, minifikasi sisi-server adalah kebocoran. Alat ini menjalankan seluruh transformasi di browser Anda melalui JavaScript: tidak ada yang melintasi jaringan. Verifikasi di tab Network DevTools saat Anda mengklik Minify, atau bawa halaman offline (mode pesawat) setelah dimuat dan alat masih berfungsi.

Pertanyaan yang Sering Diajukan