Minify HTML dalam Satu Klik
Ringkas spasi dan hapus komentar dari HTML Anda untuk memperkecil ukurannya secara instan.
Markup Anda tetap di perangkat
Tidak ada yang perlu dihapus kemudian
Aman untuk teks yang belum terbit
Jalan di semua browser modern
Cara kerjanya
- 1
Tempel HTML Anda
Sebuah dokumen utuh, sebuah templat surel, atau potongan yang disisipkan server ke dalam halaman.
- 2
Baca laporannya
Bandingkan ukuran terminifikasi dengan terkompresi, dan periksa peringatannya sebelum mengganti aslinya.
- 3
Salin keluarannya
Bawa ke sebuah keluaran build, berkas templat, atau dokumen tertanam.
Mengapa memakai alat ini
Spasi bermakna dipertahankan
Spasi antara elemen sebaris adalah jarak antarkata yang benar-benar dirender, jadi ia dijaga alih-alih diciutkan hilang.
pre dan textarea tak disentuh
Keduanya mempertahankan spasi menurut spesifikasi, dan memformat ulang isinya mengubah apa yang dibaca pengunjung.
Tag penutup dibiarkan di tempatnya
Menghapus yang opsional bersandar pada pemulihan galat pengurai, dan alat ini tak berjudi di situ.
script dan style ditangani benar
Blok tertanam adalah bahasa lain, dan teks berisi urutan penutup script tak salah dibaca sebagai markup.
Jujur soal besaran untungnya
Dokumen biasanya yang terkecil dari tiga berkas Anda, dan angka yang ditampilkan mengatakan begitu.
Tak ada yang meninggalkan browser
Markup-nya diproses di halaman ini, jadi teks draf dan alamat lingkungan uji tak diserahkan ke server.
Spasi di HTML kadang bermakna, dan di situlah seluruh kesulitannya
Di CSS dan JavaScript, spasi di luar sebuah string tak membawa arti dan bisa dibuang serentak. HTML tak bekerja begitu. Rentetan spasi di antara dua elemen sebaris menciut menjadi satu spasi, bukan menjadi tiada, dan spasi yang selamat itu adalah jarak antarkata yang dirender: buang pergantian baris di antara `<span>Total</span>` dan `<span>Harga</span>`, maka kedua kata itu menempel di layar. Hal yang sama berlaku di antara sebuah tautan dan teks sesudahnya, di antara elemen `<a>` yang bertetangga dalam navigasi, serta di sekeliling `<img>` dan `<button>`. Itulah sebabnya sebuah halaman terminifikasi bisa mendadak terbaca “KeluarPengaturan”, dan itulah sebabnya aturan amannya adalah menciutkan spasi hanya di antara elemen tingkat blok, tempat browser memang tak pernah merender jarak sejak awal. Memutuskan Anda sedang di kasus mana menuntut pengetahuan tentang nilai display tiap elemen, yang bergantung pada CSS Anda — jadi alat yang hanya melihat markup harus konservatif, dan alat ini memang begitu.
pre dan textarea mempertahankan spasi menurut spesifikasi
Dua elemen membuat spasi menjadi penopang dalam pengertian terkuat. Di dalam `<pre>`, tiap spasi dan tiap pergantian baris dirender persis seperti ditulis, dan itulah sebabnya contoh kode dan tata letak ASCII bertahan di sana dan tak di tempat lain; mengindentasi ulang blok `<pre>` mengubah kode yang dilihat pembaca Anda, dan menciutkannya menghancurkan contohnya sama sekali. `<textarea>` berperilaku sama untuk nilai awalnya, jadi spasi pada teks bawaan sebuah formulir adalah konten, bukan format — dan pengurai membuang satu pergantian baris tepat setelah tag pembuka, yang berarti alat yang menambah atau mengurangi satu diam-diam mengubah apa yang ditemukan pengguna di dalam bidang itu. Isi `<script>` dan `<style>` juga berada di luar aturan spasi tingkat markup, karena alasan lain yang dibahas di bawah. Minifier mana pun yang memperlakukan dokumen sebagai satu arus seragam berisi tag dan teks pada akhirnya akan merusak salah satu dari kasus ini.
HTML pemaaf, dan itu membuat minifikasi agresif lebih berisiko alih-alih lebih aman
HTML tak punya galat penguraian dalam pengertian yang dimiliki CSS dan JavaScript. Hilangkan `</p>`, hilangkan `</li>`, hilangkan `</tbody>`, lepaskan tanda kutip di sekitar sebuah atribut, dan browser tetap akan pulih lalu membangun sebuah pohon — spesifikasinya mendefinisikan persis bagaimana. Minifier memanfaatkan itu: menghapus tag penutup opsional adalah penghematan bita yang nyata, dan spesifikasi menyatakan itu sah. Persoalannya, pemulihan hanya dijamin identik untuk markup yang memang sudah sahih. Pada dokumen yang salah satu tagnya sudah tak seimbang, atau yang punya `<div>` di dalam `<p>`, menghapus tag opsional menggeser tempat pengurai memutuskan sebuah elemen berakhir, dan pohon yang dihasilkan adalah pohon yang lain — biasanya tampak sebagai konten yang melompat ke luar kotak tempatnya semestinya. Ini juga markup yang dibaca hal lain: potongan dengan penutup tersirat bisa merusak mesin templat di hilir, sebuah klien surel, atau perayap yang memakai pengurai XML lebih ketat. Alat ini membiarkan tag penutup, karena penghematannya kecil dan kegagalannya struktural.
script dan style tertanam adalah bahasa berbeda di dalam berkas yang sama
Blok `<script>` atau `<style>` bukan markup, dan pengurai berganti moda saat memasukinya. Itu berkonsekuensi khusus yang menjebak alat yang naif: di dalam skrip klasik, pengurai mencari karakter harfiah `</script` dan mengakhiri elemennya di situ, bahkan ketika karakter itu berada di dalam sebuah string JavaScript. Kode yang menulis `document.write("</script>")` karenanya mengakhiri bloknya sendiri, dan perbaikan bakunya adalah memecah urutan itu menjadi `"<\/script>"`. Minifier yang menulis ulang tanda kutip string atau meng-escape ulang teks tanpa memahami ini bisa menciptakan urutan itu di tempat yang tadinya tak ada, dan halamannya terpotong sejak titik tersebut. Kasus cerminnya adalah minifier yang memperlakukan isi skrip sebagai teks lalu menciutkan spasi di dalamnya, yang tak berbahaya sampai ia bertemu template literal atau baris tak terselesaikan tempat pergantian baris sedang mengerjakan tugas titik koma. Menangani blok-blok ini dengan benar berarti menjalankan lintasan JavaScript dan CSS yang sungguhan padanya, bukan lintasan markup.
HTML adalah berkas tempat minifikasi membeli paling sedikit
Ini layak dikatakan terus terang, karena ia mengubah ke mana Anda semestinya mencurahkan tenaga. Dari tiga berkas teks yang dimuat sebuah halaman, dokumen biasanya yang terkecil, dan dialah yang umumnya tak bisa Anda simpan di singgahan — sebuah stylesheet dan sebuah bundel diberi sidik jari lalu disimpan setahun, sementara HTML diambil segar hampir pada tiap kunjungan. Itu terdengar seperti alasan untuk mengecilkannya, dan sebagian memang begitu, tetapi angkanya sederhana: markup terkompresi sangat baik karena ia mengulang nama tag dan pola atribut yang sama ratusan kali, jadi gzip atau Brotli di server sudah membuang sebagian besar dari yang akan dibuang sebuah minifier. Kemenangan sesungguhnya pada sebuah dokumen bersifat struktural — lebih sedikit gumpalan data tertanam, tak ada gambar base64 raksasa yang ditempel ke sumbernya, tak ada keadaan hasil render server yang ditumpahkan ke sebuah tag script. Kalau HTML Anda memang besar, minifikasi bukan obatnya; mencari tahu apa isinya biasanya obatnya.
Apa yang dibocorkan markup sebuah halaman, dan kenapa itu mendukung pemrosesan lokal
Markup adalah yang paling diam-diam mengungkap di antara tiga berkas itu. Ia membawa teksnya sendiri, termasuk judul dan nama produk untuk peluncuran yang belum terjadi, dan komentar di HTML adalah tempat tim meninggalkan catatan paling blakblakan — nomor tiket, nama host lingkungan uji, pengingat bahwa sebuah bagian disembunyikan sampai bagian hukum menyetujui, nama agensi yang menulis templatnya. Ia membawa bidang formulir tersembunyi, pengenal analitik, kadang sebuah token CSRF, dan sering sebuah alamat surel yang tak diterbitkan di mana pun lagi. Menempelkan halaman sungguhan ke minifier terhosting menyerahkan semua itu kepada pihak ketiga demi pengurangan bita yang baru saja Anda baca sebagai yang terkecil dari ketiganya. Di sini semuanya terjadi di halaman yang sedang Anda baca: buka developer tools browser Anda sebelum menempel, dan Anda akan melihat jumlah permintaannya tetap di tempatnya.
Kesalahan umum yang sebaiknya dihindari
- Menciutkan spasi di antara elemen sebaris. Spasi itu adalah jarak antarkata yang dirender, jadi membuangnya menempelkan dua kata di layar walau markup-nya masih tampak benar.
- Memformat ulang isi `pre` atau `textarea`. Keduanya mempertahankan spasi menurut spesifikasi, jadi mengindentasi ulang mengubah contoh kode atau teks bawaan formulir.
- Menghapus tag penutup opsional demi menghemat bita. Pemulihan hanya dijamin identik pada markup yang sudah sahih, dan pada apa pun yang tak seimbang pengurai mengakhiri elemen di tempat lain.
- Membiarkan lintasan tingkat markup menyentuh isi `script`. Harfiah `</script` mengakhiri elemennya bahkan di dalam string JavaScript, jadi meng-escape ulang bisa memotong halaman.
- Mengharap minifikasi menyelesaikan dokumen yang besar. Markup terkompresi sangat baik, jadi servernya sudah mengambil sebagian besar — biang aslinya biasanya gumpalan data tertanam.
Perbandingan
| Aspek | Alat ini | Minifier daring | Sebuah pipeline build |
|---|---|---|---|
| Markup dikirim ke server | Tidak pernah | Umumnya ya | Tidak |
| Menjaga jarak antarkata sebaris | Selalu | Beragam | Bisa dikonfigurasi |
| Membiarkan pre dan textarea | Ya | Beragam | Umumnya |
| Menghapus tag penutup opsional | Tidak | Sering | Bisa dikonfigurasi |
| Ukuran terkompresi ditampilkan | Ya | Jarang | Dengan pengaya |
| Harga | Gratis | Gratis / paket berbayar | Gratis |
Fitur
Penghapusan komentar
Catatan pengembangan dan penanda bagian pergi, sementara komentar bersyarat yang masih bekerja tetap tinggal.
Pengeciutan spasi yang aman
Rentetan spasi dikurangi hanya di antara elemen tingkat blok, tempat tak pernah ada jarak yang dirender.
Perapian atribut
Atribut type yang mubazir dan nilai kosong dibuang di tempat spesifikasi HTML sudah menjadikannya bawaan.
Penanganan tanda kutip yang kasatmata
Tanda kutip atribut hanya dilepas bila nilainya mustahil membutuhkannya, dan tak pernah pada atribut terakhir.
Kedua ukuran dilaporkan
Mentah dan gzip, karena kompresi server sudah mengambil sebagian besar yang dihapus minifikasi dari markup.
Dokumen besar didukung
Halaman terender seberapa pun besarnya terminifikasi tanpa unggahan maupun plafon.
Tanpa instalasi
Tanpa alat build, tanpa runtime, tanpa dependensi — jalan di halaman web.
Ramah Arab dan RTL
Antarmuka lengkap dalam delapan bahasa, termasuk Arab kanan-ke-kiri.
Aman secara bawaan
Disajikan lewat HTTPS, tanpa pelacakan konten dan tanpa unggahan ke pihak ketiga.
Siapa yang memakainya
Pengembang front-end
Mengecilkan templat yang tak melewati langkah build.
Pengembang surel
Membawa templat ke bawah batas ukuran sebuah klien tanpa merusak tata letak tabelnya.
Pengembang backend
Merapikan potongan hasil render server sebelum dikembalikan ke halaman.
Siapa pun yang menanam dokumen
Memadatkan markup yang harus ditanam di tempat berplafon ukuran keras.
Pertanyaan yang Sering Diajukan
Tidak. Semuanya berjalan lokal di browser Anda — teks Anda tidak pernah diunggah, disimpan, atau dibagikan.
Ya — sepenuhnya gratis, tanpa akun dan tanpa batas.