HTML Minifier

Tempel HTML untuk menghapus komentar dan spasi berlebih serta meminifikasi CSS dan JavaScript inline. Konten di dalam <pre> dan <textarea> dibiarkan persis seperti aslinya.

Berjalan di browser AndaTanpa daftarTidak ada yang diunggah

Output terminifikasi

Cara menggunakan HTML Minifier

  1. Tempel dokumen atau potongan HTML, atau buka file .html.
  2. Pilih apa yang dihapus: komentar, spasi, dan apakah blok <style> dan <script> inline juga diminifikasi.
  3. Periksa baris peringatan: script inline yang memiliki syntax error dibiarkan apa adanya agar halaman Anda tidak rusak.
  4. Salin HTML terminifikasi atau unduh hasilnya.

Apa saja yang dihapus?

  • Komentar: <!-- … --> dihapus, kecuali conditional comment Internet Explorer dan komentar yang diawali <!--!.
  • Spasi di antara elemen blok: baris baru dan indentasi di antara tag seperti <div>, <li> atau <head> tidak pernah dirender, jadi dibuang seluruhnya.
  • Deretan spasi dalam teks: diringkas menjadi satu spasi, persis seperti cara browser merendernya.
  • Spasi di dalam tag: <p class = "a"> menjadi <p class="a">.

Apa yang dipertahankan?

Di beberapa tempat spasi itu penting, dan minifier menghormatinya. Konten <pre> dan <textarea> dipertahankan byte demi byte. Satu spasi di antara elemen inline, seperti <b>bold</b> text, tetap disimpan karena menghapusnya akan menyambung kata. Nilai atribut dan tanda kutip tidak pernah diubah.

CSS dan JavaScript inline

Blok <style> inline dioptimalkan dengan CSSO dan blok <script> inline dengan Terser, mesin yang sama dengan yang dipakai di halaman CSS minifier dan JavaScript minifier. JSON-LD dan blok script JSON lainnya dipadatkan, sedangkan script dengan tipe yang tidak dikenal (misalnya template) dibiarkan.

Apakah minifikasi HTML sepadan?

Untuk halaman yang dirender di server dan situs statis, dokumen HTML adalah hal pertama yang diunduh browser, sehingga setiap byte yang dihemat mempercepat render pertama. Penghematan 10–25% sebelum kompresi adalah hal biasa, dan lebih besar lagi untuk template dengan indentasi tebal dan halaman dengan script inline besar.

Pertanyaan yang sering diajukan

Apakah minify HTML akan mengubah tampilan halaman saya?
Tidak. Hanya spasi yang memang akan diringkas browser yang dihapus, dan konten <pre>/<textarea> tidak disentuh. Jika Anda men-styling elemen dengan white-space: pre di CSS, matikan Ringkas spasi.
Apakah JavaScript dan CSS inline juga diminifikasi?
Ya, jika opsinya diaktifkan. Jika blok inline memiliki syntax error, blok itu dibiarkan apa adanya dan peringatan ditampilkan, sehingga halaman tidak pernah rusak.
Bisakah saya meminifikasi file template seperti Handlebars, Jinja, atau Blade?
Biasanya bisa, selama tag template muncul di teks atau nilai atribut. Template yang menaruh logika di dalam nama tag atau di antara atribut mungkin perlu dicek manual.
Apakah HTML saya dikirim ke suatu tempat?
Tidak. Semuanya diproses secara lokal di browser Anda.

Tools terkait