HTML Minifier

Mag-paste ng HTML para alisin ang mga comment at sobrang whitespace at i-minify ang inline CSS at JavaScript. Iniiwan nang eksakto ang laman ng <pre> at <textarea>.

Tumatakbo sa browser moWalang sign-upWalang ina-upload

Minified na output

Paano gamitin ang HTML Minifier

  1. Mag-paste ng HTML document o fragment, o magbukas ng .html na file.
  2. Piliin kung ano ang aalisin: mga comment, whitespace, at kung ima-minify din ang mga inline na <style> at <script> block.
  3. Tingnan ang linya ng mga babala: ang inline script na may syntax error ay iniiwan nang hindi binabago para hindi masira ang page mo.
  4. Kopyahin ang minified na HTML o i-download ito.

Ano ang inaalis?

  • Mga comment: inaalis ang <!-- … -->, maliban sa mga conditional comment ng Internet Explorer at mga comment na nagsisimula sa <!--!.
  • Whitespace sa pagitan ng mga block element: hindi kailanman nire-render ang mga newline at indentation sa pagitan ng mga tag gaya ng <div>, <li> o <head>, kaya tuluyan itong inaalis.
  • Sunud-sunod na space sa text: pinapaikli ito sa iisang space, na siya ring paraan ng pag-render ng browser.
  • Whitespace sa loob ng tag: nagiging <p class="a"> ang <p class = "a">.

Ano ang pinapanatili?

May kahulugan ang whitespace sa ilang lugar, at iginagalang ito ng minifier. Pinapanatili byte por byte ang laman ng <pre> at <textarea>. Pinapanatili ang iisang space sa pagitan ng mga inline element, gaya ng <b>bold</b> text, dahil magdudugtong ang mga salita kapag inalis ito. Hindi kailanman binabago ang mga attribute value at quote.

Inline CSS at JavaScript

Ino-optimize ang mga inline na <style> block gamit ang CSSO at ang mga inline na <script> block gamit ang Terser, ang parehong engine na ginagamit sa mga page ng CSS minifier at JavaScript minifier. Pinapaikli ang JSON-LD at iba pang JSON script block, at hindi ginagalaw ang mga script na hindi kilala ang type (halimbawa mga template).

Sulit ba ang HTML minification?

Para sa mga server-rendered na page at static site, ang HTML document ang unang dina-download ng browser, kaya bawat byte na natitipid ay nagpapaikli sa oras bago ang unang render. Karaniwan ang tipid na 10–25% bago ang compression, at mas malaki pa para sa mga template na maraming indentation at mga page na may malalaking inline script.

Mga madalas itanong

Magbabago ba ang itsura ng page ko kapag in-minify ang HTML?
Hindi. Ang whitespace lang na papaikliin din naman ng browser ang inaalis, at hindi ginagalaw ang laman ng <pre>/<textarea>. Kung nag-i-style ka ng mga element gamit ang white-space: pre sa CSS, i-off ang Paikliin ang whitespace.
Mina-minify ba nito ang inline JavaScript at CSS?
Oo, kapag naka-enable ang mga option. Kapag may syntax error ang isang inline block, iniiwan ito nang hindi binabago at may lumalabas na babala, kaya hindi kailanman nasisira ang page.
Puwede ko bang i-minify ang mga template file gaya ng Handlebars, Jinja o Blade?
Kadalasan oo, basta nasa text o attribute value ang mga template tag. Ang mga template na naglalagay ng logic sa loob ng tag name o sa pagitan ng mga attribute ay maaaring kailanganing i-check nang mano-mano.
Ipinapadala ba kahit saan ang HTML ko?
Hindi. Lahat ay pinoproseso nang lokal sa iyong browser.

Mga kaugnay na tool

CSS Minifier Paliitin ang stylesheet: paikliin ang value at pagsamahin ang dobleng rule. JavaScript Minifier I-compress at i-mangle ang JS gamit ang Terser, may size at gzip stats. HTML Entity Encoder / Decoder I-escape ang HTML special character o i-decode ang &entities;. URL Encode / Decode I-percent-encode/decode ang text at i-parse ang URL query string.