Tentang alat ini
Minifikasi HTML menghapus karakter yang tidak perlu dari sumber halaman web — spasi di antara tag, komentar, tanda kutip berlebihan, tag penutup opsional — untuk mengurangi ukuran file tanpa mengubah cara halaman dirender. Penghematannya kecil per halaman (biasanya 10–30%) namun digabungkan pada banyak permintaan, terutama untuk situs statis atau halaman yang disajikan tanpa kompresi dinamis.
Minifier ini menghilangkan spasi di antara elemen tingkat blok, menciutkan spasi putih di dalam teks yang tidak signifikan, menghapus komentar HTML (kecuali komentar bersyarat IE), menghapus tanda kutip atribut yang berlebihan jika diizinkan oleh spesifikasi HTML5, dan menghilangkan tag penutup opsional (</p>, </li>) jika spesifikasi mengizinkan. Hasilnya ditampilkan secara identik dengan sumber di setiap browser.
Minifikasi paling berguna bila dipasangkan dengan kompresi gzip atau Brotli di tingkat server. Kompresi telah menghilangkan sebagian besar penghematan yang dihasilkan oleh minifikasi, namun gabungan keduanya masih mengalahkan kompresi saja — terutama untuk situs dengan lalu lintas tinggi yang mengutamakan biaya bandwidth.
Mengapa Memperkecil HTML
HTML yang lebih kecil memuat lebih cepat, terutama pada koneksi dan jaringan seluler yang lebih lambat. Bobot halaman secara langsung memengaruhi Data Web Inti — Cat Konten Terbesar dan Waktu hingga Byte Pertama, keduanya meningkat ketika server mengembalikan lebih sedikit HTML untuk diurai. Untuk situs yang peringkat SEO-nya bergantung pada skor Core Web Vitals, minifikasi adalah peningkatan yang terukur.
HTML yang diperkecil juga mengurangi biaya bandwidth dalam skala besar. Sebuah situs yang melayani satu juta halaman sehari dengan penghematan 10 KB per halaman menghemat 10 GB jalan keluar setiap hari. Dampak gabungan untuk situs statis disajikan dari CDN yang ditagih melalui transfer data.
Detail Teknis
Minifier memproses token HTML demi token. Spasi antar elemen tingkat blok (<div>, <p>, <ul>) dihilangkan karena tidak memengaruhi rendering. Spasi putih di dalam konteks sebaris (<span>, <a>, konten teks) dipertahankan karena dapat memengaruhi rendering.
Komentar dihapus secara default tetapi komentar bersyarat (<!--[if IE]>) dipertahankan. Kutipan atribut dihapus jika parser HTML5 mengizinkan — nilai atribut satu kata tanpa spasi atau karakter khusus dapat menghilangkan tanda kutip.
Tag penutup opsional dihilangkan sesuai spesifikasi HTML5: </p>, </li>, </td>, dan beberapa lainnya dapat dihilangkan ketika diikuti oleh saudara yang menyiratkan penutupannya. Ini tidak biasa untuk dibaca tetapi HTML5 valid yang diurai oleh browser secara identik.
Pertanyaan yang sering diajukan
- Apa yang dihapus dari minifikasi HTML?
- Spasi kosong yang tidak diperlukan di antara tag, komentar HTML (<!-- -->), tag penutup opsional (</li>, </p>, </td>), nilai atribut default (type="text" pada input), dan nilai atribut boolean (disabled="disabled" → dinonaktifkan).
- Bisakah minifikasi merusak halaman saya?
- Jarang terjadi, namun mungkin terjadi jika CSS Anda mengandalkan spasi di antara elemen sebaris atau jika JavaScript menggunakan perbandingan innerHTML. Selalu uji keluaran yang diperkecil. Alat ini menggunakan pengaturan konservatif secara default.
- Haruskah saya mengecilkan HTML jika saya menggunakan kerangka kerja seperti Next.js?
- Sebagian besar kerangka kerja modern (Next.js, Nuxt, Angular) mengecilkan HTML secara otomatis dalam build produksi. Alat ini berguna untuk file HTML statis, template email, dan proyek tanpa sistem build.
- Apakah ini juga memperkecil CSS dan JavaScript sebaris?
- Alat ini berfokus pada struktur HTML. Konten <style> dan <script> sebaris dipertahankan apa adanya. Untuk itu, gunakan minifier CSS dan JavaScript khusus untuk hasil yang optimal.
- Apakah tag penutup opsional aman untuk dihapus?
- Ya sesuai spesifikasi HTML5, meskipun hasilnya lebih sulit dibaca. Beberapa tim menonaktifkan transformasi ini untuk kejelasan, menerima sedikit penalti ukuran.
- Apakah HTML saya diunggah ke server?
- Tidak. Minifier berjalan di browser Anda.
- Bagaimana hal ini dibandingkan dengan html-minifier-terser?
- html-minifier-terser adalah minifier HTML Node.js kanonik dan menghasilkan hasil yang sedikit lebih agresif. Alat ini mencakup transformasi yang sama untuk penggunaan sisi browser tanpa penyiapan build.
- Haruskah saya selalu mengecilkan atau selektif?
- Selalu untuk produksi. Tidak pernah untuk kode sumber dalam kontrol versi; HTML yang dapat dibaca dalam sumber sangat penting untuk pemeliharaan.