Minify HTML

Spasi yang penting, dan spasi yang tidak

Dalam HTML, spasi di antara dua elemen inline adalah spasi sungguhan, dan inilah yang membedakan minifier yang cermat dari minifier yang merusak halaman. Hapus baris baru di antara dua link, dan kata-katanya menempel di layar; ringkas indentasi di dalam blok pre atau textarea, dan isinya sendiri berubah, karena di sana spasi adalah isi. Jadi spasi hanya dihapus di tempat yang terbukti tidak ditampilkan, dan dibiarkan persis apa adanya di tempat yang ditampilkan. Minifier yang membuang semua spasi secara seragam akan menghasilkan file yang lebih kecil dan halaman yang jelas salah.

Komentar dihapus, karena komentar ditujukan bagi siapa pun yang merawat kode sumbernya, bukan bagi pembaca — kecuali conditional comment, yang berisi instruksi, bukan catatan. Atribut yang berlebihan dibuang: type="text/javascript" pada elemen script sudah menjadi default selama satu dekade, dan method="get" pada form hanya menyebutkan apa yang memang dilakukan form.

Menghapus tanda kutip atribut adalah HTML yang valid dan sengaja dinonaktifkan secara default. Spesifikasi mengizinkan nilai atribut tanpa tanda kutip asalkan tidak berisi spasi atau karakter yang bermasalah, dan browser menanganinya dengan sempurna. Template engine sering kali tidak: ekspresi Blade, Twig, Handlebars, atau JSX di dalam atribut tanpa tanda kutip tidak lagi terurai dengan benar, dan kegagalannya muncul saat build, di file yang tidak ingin dibaca siapa pun. Penghematannya kecil dan risikonya tidak, jadi opsi ini harus Anda aktifkan sendiri.

Ukuran jujur dari manfaatnya adalah setelah kompresi, bukan sebelumnya. Server mengirim HTML dalam bentuk gzip atau brotli, dan algoritma itu sangat pandai menangani spasi yang berulang — jadi dokumen yang menyusut dari 100 KB menjadi 70 KB setelah di-minify mungkin hanya berubah dari 12 KB menjadi 11 KB saat dikirim. Minify HTML layak dilakukan, dan hasilnya paling kecil di antara ketiganya; bobot sesungguhnya ada di stylesheet dan script.

Jika Anda butuh hal lain

Untuk sebuah situs, bukan satu file, proses ini seharusnya ada di build, bukan di tab browser. Semua framework dan static site generator saat ini me-minify HTML saat build, dan melakukannya secara manual berarti proses itu berhenti begitu seseorang lupa. Library di baliknya bisa diatur hingga ke tiap transformasi, dan itu berguna ketika satu aturan tertentu menimbulkan masalah.

Sebelum mengoptimalkan markup, periksa dulu berapa sebenarnya bobot halaman Anda. Di hampir semua situs nyata, HTML hanyalah bagian kecil dibandingkan gambar, font, dan JavaScript — Lighthouse atau panel network di browser akan memberi tahu Anda dalam hitungan detik, dan jawabannya biasanya adalah satu gambar hero yang tidak dioptimalkan lebih berat daripada seluruh markup di halaman.