Cara menggunakan Minify HTML
- Tempel HTML atau buka file
.html. - Pilih yang ingin dihapus: spasi, komentar, atribut
typedefault, dan nilai boolean yang berlebihan. - Biarkan minify CSS dan JavaScript inline aktif agar blok
<style>dan<script>juga ikut diperkecil. - Salin atau unduh HTML hasil minify, lalu bandingkan ukurannya di atas.
Apa saja yang dihapus oleh minify HTML?
HTML yang ditulis manual maupun yang dihasilkan otomatis biasanya berisi indentasi, baris baru, dan komentar yang sebenarnya diabaikan browser. Menghapusnya mengurangi jumlah byte yang harus diunduh browser sebelum mulai menampilkan halaman. Penghematannya biasanya 10–25 % dari HTML asli, dan bisa lebih besar untuk template dengan indentasi dalam atau komentar yang panjang.
| Sebelum | Sesudah |
|---|---|
<!-- nav --> | (dihapus) |
<button disabled="disabled"> | <button disabled> |
<script type="text/javascript"> | <script> |
class=" card featured " | class="card featured" |
Indentasi di antara item <li> | (dihapus) |
Penanganan spasi yang aman
Spasi di HTML tidak selalu tidak berarti: spasi di <strong>Gratis</strong> plan memisahkan dua kata. Minifier ini mempertahankan satu spasi di antara elemen inline dan teks, hanya menghapus spasi di sekitar elemen block-level seperti div, p, li, dan section, serta tidak menyentuh isi <pre> dan <textarea>, karena spasi di sana merupakan bagian dari konten.
Apa yang tetap dipertahankan
- Komentar kondisional (
<!--[if IE]>) dan komentar yang diawali<!--!. - Tanda kutip pada atribut. Menghapusnya hanya menghemat sedikit dan bisa merusak nilai atribut yang mengandung spasi.
- Script dengan tipe non-JavaScript, seperti template. JSON-LD tetap diperkecil sebagai JSON.
Minify HTML untuk production
Untuk pipeline build, gunakan minifier bawaan framework kamu atau html-minifier-terser. Untuk halaman sekali pakai, template email, embed CMS, dan custom code Webflow, tool ini lebih cepat. Setelah di-minify, pastikan server kamu juga mengompres HTML. Cek dengan tes kompresi website. Untuk membuat HTML hasil minify mudah dibaca lagi, gunakan HTML formatter.
Juga dicari sebagai: kompresi html, kompres html, minify html online, hapus spasi html, minify css js inline.
Tool yang cocok dipakai bersama Minify HTML
- Minifier JavaScript — Tempel kode JavaScript dan dapatkan kode hasil minify siap produksi dari Terser, mesin yang sama dengan Vite, webpack, dan Rollup, lengkap dengan perbandingan sebelum dan sesudah serta ukuran gzip.
- CSS Minifier — Tempel stylesheet untuk langsung memperkecil ukurannya.
- Optimizer SVG — Bersihkan SVG hasil ekspor dari Figma, Illustrator, Inkscape, atau Sketch dengan SVGO, lalu cek pratinjau sebelum dan sesudahnya untuk memastikan ikon tetap terlihat benar.
- Kompres & Dekompres Gzip — Kompres teks atau file apa pun dengan gzip, zlib, atau raw deflate, atau tempel Base64 / buka file .gz untuk didekompresi.
Pertanyaan yang sering diajukan
Apakah minify HTML meningkatkan SEO?
Apakah minify bisa merusak tata letak saya?
Apakah CSS dan JavaScript di dalam HTML juga diminify?
<style> dan atribut style diminify, dan blok <script> diminify dengan Terser. Jika script memiliki error sintaks, script tersebut dibiarkan tanpa perubahan.