Penukar Percuma

HTML Pemecil

Kecilkan dan mampatkan kod HTML serta-merta dalam penyemak imbas anda. Alih keluar ulasan, runtuhkan ruang putih dan kecilkan saiz fail. Percuma dan peribadi.

Seret & Lepaskan fail HTML di sini

Menyokong fail .html dan .htm. Atau tampal HTML anda di atas.

Ataupun

Tentang alat ini

Minifikasi HTML membuang aksara yang tidak diperlukan daripada sumber halaman web — ruang kosong antara teg, ulasan, petikan berlebihan, teg penutup pilihan — untuk mengurangkan saiz fail tanpa mengubah cara halaman itu dipaparkan. Penjimatan adalah sederhana bagi setiap halaman (biasanya 10–30%) tetapi kompaun merentas banyak permintaan, terutamanya untuk tapak atau halaman statik yang disiarkan tanpa pemampatan dinamik.

Penipis ini mengalih keluar ruang kosong antara elemen peringkat blok, meruntuhkan larian ruang putih di dalam teks tidak penting, membuang ulasan HTML (kecuali ulasan bersyarat IE), mengalih keluar petikan atribut berlebihan jika dibenarkan oleh spesifikasi HTML5 dan menghapuskan teg penutup pilihan (</p>, </li>) yang dibenarkan oleh spesifikasi. Hasilnya dipaparkan secara identik dengan sumber dalam setiap penyemak imbas.

Minifikasi adalah paling berguna apabila dipasangkan dengan pemampatan gzip atau Brotli di peringkat pelayan. Mampatan sudah menghilangkan banyak penjimatan yang dihasilkan, tetapi gabungan kedua-duanya masih mengatasi pemampatan sahaja — terutamanya untuk tapak trafik tinggi yang memerlukan kos lebar jalur.

Mengapa Kecilkan HTML

HTML yang lebih kecil dimuatkan dengan lebih pantas, terutamanya pada sambungan yang lebih perlahan dan rangkaian mudah alih. Berat halaman secara langsung mempengaruhi Core Web Vitals — Cat Kandungan Terbesar dan Masa untuk Bait Pertama kedua-duanya bertambah baik apabila pelayan mengembalikan kurang HTML untuk menghuraikan. Untuk tapak yang kedudukan SEO bergantung pada skor Core Web Vitals, minifikasi ialah peningkatan yang boleh diukur.

HTML yang dikecilkan juga mengurangkan kos lebar jalur pada skala. Tapak yang menyajikan sejuta halaman sehari dengan penjimatan 10 KB setiap halaman menjimatkan 10 GB keluar setiap hari. Kompaun impak untuk tapak statik yang disampaikan daripada CDN yang dibilkan melalui pemindahan data.

Cara menggunakan

Tampal HTML, dapatkan versi diperkecilkan.

  1. Tambah input HTML: Tampal sumber HTML ke dalam kawasan input atau lepaskan fail .html. Alat kecil menerima sebarang penanda HTML5 yang sah.
  2. Pilih pilihan: Lalai mengalih keluar ulasan dan meruntuhkan ruang putih; anda boleh melumpuhkan transformasi individu jika anda perlu mengekalkan elemen tertentu (cth., simpan ulasan untuk dokumentasi).
  3. Kecilkan: Penguat kecil menjalankan aliran token HTML, menggunakan setiap transformasi yang didayakan. Output adalah HTML yang serupa dari segi fungsi dengan saiz yang lebih kecil.
  4. Salin atau muat turun: Gunakan hasilnya sebagai HTML yang dihidangkan. Sahkan halaman dipaparkan dengan betul dalam penyemak imbas sasaran sebelum digunakan.

Kes Penggunaan Biasa

Butiran Teknikal

Penipis memproses token HTML mengikut token. Ruang kosong antara elemen peringkat blok (<div>, <p>, <ul>) dialih keluar kerana ia tidak menjejaskan pemaparan. Ruang putih dalam konteks sebaris (<span>, <a>, kandungan teks) dikekalkan kerana ia boleh menjejaskan pemaparan.

Komen dilucutkan secara lalai tetapi ulasan bersyarat (<!--[jika IE]>) dikekalkan. Petikan atribut dialih keluar apabila penghurai HTML5 membenarkan — nilai atribut satu perkataan tanpa ruang atau aksara khas boleh meninggalkan petikan.

Teg penutup pilihan ditiadakan mengikut spesifikasi HTML5: </p>, </li>, </td> dan beberapa yang lain boleh ditinggalkan apabila diikuti oleh adik beradik yang membayangkan rapat mereka. Ini adalah luar biasa untuk dibaca tetapi HTML5 sah yang dihuraikan oleh penyemak imbas secara sama.

Amalan Terbaik

Soalan lazim

Apakah yang dialih keluar minification HTML?
Ruang kosong yang tidak diperlukan antara teg, ulasan HTML (<!-- -->), teg penutup pilihan (</li>, </p>, </td>), nilai atribut lalai (jenis="teks" pada input) dan nilai atribut boolean (dilumpuhkan="dilumpuhkan" → dilumpuhkan).
Bolehkah minification memecahkan halaman saya?
Jarang, tetapi mungkin jika CSS anda bergantung pada ruang kosong antara elemen sebaris atau jika JavaScript menggunakan perbandingan innerHTML. Sentiasa uji output yang dikecilkan. Alat ini menggunakan tetapan konservatif secara lalai.
Perlukah saya memperkecilkan HTML jika saya menggunakan rangka kerja seperti Next.js?
Kebanyakan rangka kerja moden (Next.js, Nuxt, Angular) mengecilkan HTML secara automatik dalam binaan pengeluaran. Alat ini berguna untuk fail HTML statik, templat e-mel dan projek tanpa sistem binaan.
Adakah ini mengecilkan CSS dan JavaScript sebaris juga?
Alat ini memfokuskan pada struktur HTML. Kandungan <style> dan <script> sebaris dikekalkan seperti sedia ada. Bagi mereka, gunakan pemendek CSS dan JavaScript khusus untuk hasil yang optimum.
Adakah teg penutup pilihan selamat untuk dialih keluar?
Ya setiap spesifikasi HTML5, walaupun hasilnya lebih sukar untuk dibaca. Sesetengah pasukan melumpuhkan transformasi ini untuk kejelasan, menerima penalti saiz kecil.
Adakah HTML saya dimuat naik ke pelayan?
Tidak. Pemecil berjalan dalam penyemak imbas anda.
Bagaimanakah ini dibandingkan dengan html-minifier-terser?
html-minifier-terser ialah pengecil HTML Node.js berkanun dan menghasilkan hasil yang lebih agresif sedikit. Alat ini merangkumi transformasi yang sama untuk kegunaan sisi penyemak imbas tanpa persediaan binaan.
Perlukah saya mengecilkan sentiasa atau secara terpilih?
Sentiasa untuk pengeluaran. Jangan sekali-kali untuk kod sumber dalam kawalan versi; HTML yang boleh dibaca dalam sumber adalah penting untuk penyelenggaraan.