Kompresor HTML

Mengapa perlu meminifikasi HTML

HTML yang Anda tulis untuk manusia penuh dengan hal-hal yang tidak dibutuhkan browser: indentasi, jeda baris antar-tag, komentar pengembang, dan sesekali atribut kosong. Tidak satu pun memengaruhi cara halaman dirender, tetapi semuanya menambah byte. Kalikan byte itu dengan setiap pengunjung dan setiap pemuatan halaman, maka pemborosannya menjadi bandwidth nyata dan waktu tunggu nyata. Minifikasi membuang karakter kosmetik sehingga markup yang melintas di jaringan sekecil yang dibutuhkan browser dan tidak lebih kecil dari itu.

HTML yang lebih kecil berarti byte pertama konten bermakna yang lebih cepat, biaya bandwidth hosting dan CDN yang lebih rendah, serta pengalaman yang lebih baik pada koneksi seluler yang lambat atau berkuota. Pada situs berlalu lintas tinggi penghematannya berlipat ganda, dan karena HTML adalah sumber daya pertama yang diunduh browser, menyusutkannya membantu halaman mulai dirender lebih cepat.

Apa yang dibuang oleh kompresor

Setiap opsi menyasar sumber pembengkakan tertentu. Remove HTML comments menghapus catatan pengembang dan kode yang dikomentari yang tidak pernah dilihat pengunjung. Remove unnecessary whitespace menyatukan rangkaian spasi, tab, dan baris baru di antara tag yang ada hanya demi keterbacaan. Remove empty attributes membuang atribut tanpa nilai, dan Remove optional HTML tags menghilangkan tag penutup yang menurut spesifikasi HTML boleh Anda tinggalkan, seperti tag akhir untuk item daftar dalam konteks tertentu.

Collapse boolean attributes adalah kemenangan kecil tetapi rapi: atribut seperti disabled atau checked tidak memerlukan nilai dalam HTML, jadi bentuk yang ditulis lengkap seperti disabled yang disetel ke string disabled dipersingkat menjadi sekadar nama atributnya. Bersama-sama lintasan ini membuang karakter yang tidak berpengaruh sama sekali pada perenderan, dan itulah sebabnya minifikasi standar aman untuk halaman yang terbentuk dengan baik.

Sebuah contoh nyata

Bayangkan sebuah cuplikan dengan indentasi empat spasi, sebuah komentar HTML di atas sebuah div, dan sebuah input kotak centang yang ditulis dengan checked disetel ke string checked. Setelah kompresi, indentasi dan jeda barisnya menyatu sehingga tag-tagnya berdampingan, komentarnya lenyap sepenuhnya, dan kotak centangnya menjadi sekadar input yang membawa atribut checked polos. Halaman tampak dan berperilaku persis sama di browser, tetapi jumlah byte-nya turun, dan panel statistik melaporkan ukuran asli, ukuran terkompresi, dan persentase yang dihemat sehingga Anda dapat melihat keuntungan untuk berkas spesifik Anda.

Apa yang aman dibuang dan apa yang berisiko

Batas yang harus dihormati adalah spasi yang benar-benar diandalkan halaman. Di dalam elemen pre dan textarea, setiap spasi dan baris baru bersifat penting: semuanya dirender apa adanya, jadi menyatukannya akan mengubah keluaran secara kasatmata. Kehati-hatian yang sama berlaku untuk elemen yang CSS-nya menyetel white-space agar mempertahankan format. Komentar biasanya aman dihapus, tetapi sebagian menanggung beban kerja, seperti komentar bersyarat Internet Explorer lawas atau komentar yang dibaca sistem templat atau framework sebagai penanda; menghapusnya bisa merusak perilaku.

Opsi minifikasi CSS dan JavaScript ditandai eksperimental bukan tanpa alasan. Meminifikasi CSS inline di dalam tag dan atribut style, atau JavaScript di dalam tag script, melibatkan penulisan ulang kode alih-alih sekadar memangkas spasi tata letak, dan kasus pinggir memang ada. Selalu uji sebuah halaman setelah mengaktifkannya, terutama jika skrip Anda bergantung pada format tertentu, direktif berbasis komentar, atau penanganan string yang rapuh.

Bagaimana minifikasi berkaitan dengan gzip

Server hampir selalu mengirim HTML yang dikompresi dengan gzip atau Brotli, dan orang kadang mengira itu membuat minifikasi tidak ada gunanya. Tidak demikian. Gzip sangat baik dalam mengompresi teks yang berulang, jadi persentase relatif yang dihematnya di atas HTML yang sudah diminifikasi lebih kecil daripada pada HTML mentah, tetapi kedua teknik ini bertumpuk: yang diminifikasi-lalu-digzip tetap lebih kecil daripada yang dicetak-rapi-lalu-digzip. Minifikasi juga menyusutkan byte yang harus diurai browser setelah dekompresi, dan mengurangi ukuran yang tersimpan di cache.

Anggap keduanya sebagai lapisan yang saling melengkapi. Minifikasi membuang konten yang tidak dibutuhkan browser; gzip dan Brotli kemudian mengompresi apa pun yang tersisa untuk pengangkutan. Menggunakan keduanya memberi muatan terkecil dari ujung ke ujung.

Di mana minifikasi cocok dalam pipeline build

Pada situs produksi, minifikasi idealnya terjadi secara otomatis sebagai bagian dari langkah build atau penerapan sehingga sumber yang Anda sunting tetap mudah dibaca sementara keluaran yang Anda kirim tetap kecil. Sebagian besar bundler modern dan generator situs statis menyertakan tahap minifikasi HTML, dan alat ini adalah cara cepat untuk melakukan hal yang sama bagi berkas sekali pakai, halaman arahan yang dibuat tangan, templat email, atau cuplikan yang akan Anda sematkan.

Alat ini juga berguna untuk pemeriksaan dan pembelajaran: tempel sebuah halaman, jalankan, dan baca persentase pengurangannya untuk mengukur seberapa banyak lemak yang dibawa markup Anda, yang dapat mengungkap kebiasaan seperti komentar berlebihan atau templat yang berindentasi dalam yang layak dibenahi di sumbernya.

Kesalahan umum yang harus dihindari

Kesalahan paling merusak adalah meminifikasi konten yang bergantung pada spasi, lalu mendapati bahwa teks di dalam blok pre atau contoh kode kehilangan formatnya; biarkan bagian-bagian itu tak tersentuh atau verifikasi dengan saksama. Kesalahan lain adalah membuang komentar bersyarat atau komentar direktif yang diandalkan sesuatu di hilir. Jebakan yang lebih halus adalah menyunting berkas yang sudah diminifikasi secara langsung: setelah spasinya hilang, kodenya sulit dipelihara, jadi selalu jadikan sumber yang mudah dibaca sebagai acuan utama dan perlakukan versi yang diminifikasi sebagai artefak yang dihasilkan. Dan setiap kali Anda mengaktifkan lintasan CSS atau JS eksperimental, uji halaman langsung sebelum dikirim.