Minifikovat HTML _

Jak funguje minifikace HTML

Minifikátor prochází váš vstup s malým stavovým strojem, který rozlišuje oblasti ponechané beze změny (<pre>, <textarea>, <script>, <style>) od upravitelných oblastí, kde je sbalování bílých míst a komentářů bezpečné.

1. Tokenizace bloků k zachování. Skener čte vstup znak po znaku a přepne do stavu zachování, když narazí na otevírací tag <pre>, <textarea>, <script> nebo <style>. Vše uvnitř těchto tagů je ponecháno bajt po bajtu až do odpovídajícího zavíracího tagu.
2. Sbalení upravitelného bílého místa. V upravitelných oblastech skener sbalí každý běh mezer, tabulátorů a nových řádků na jednu mezeru, pak ořízne úvodní a koncové bílé místo kolem hranic tagů. Viditelný text se přetéká stejně, jak jej prohlížeč vykresluje.
3. Odstranění komentářů. <!-- ... --> bloky jsou odstraněny, když je přepínač zapnutý. IE podmíněné komentáře (<!--[if IE]> ... <![endif]-->) přežijí, když je přepínač zachování zapnutý, protože starší e-mailoví klienti na nich stále závisí.
4. Zkrácení boolean atributů. Nadbytečné formy jako checked="checked", disabled="disabled" a required="required" se zmenší na holý název atributu. Specifikace HTML5 považuje holou formu za sémanticky identickou, takže vykreslený DOM je nezměněn.
5. Hlášení rozdílů bajtů. Původní i minifikovaný text jsou měřeny pomocí new TextEncoder().encode(...).byteLength, stejného UTF-8 počtu bajtů, který CDN nebo HTTP server vidí na lince. Metrický pruh ukazuje původní velikost, minifikovanou velikost, ušetřené bajty a procento úspory.

Proč minifikovat HTML

• Rychlejší načítání stránek. Menší HTML dorazí k prohlížeči dříve a parser skončí dříve. Na mobilních sítích se úspory bajtů přímo promítají do rychlejšího First Contentful Paint a lepšího Lighthouse výkonnostního skóre.
• Nižší účty za CDN. CloudFront, Cloudflare a Fastly účtují za gigabajt přenesených dat. Dvacetiprocentní snížení HTML napříč miliony měsíčních zobrazení se sčítá do reálných úspor na faktuře, před jakoukoli optimalizací obrázků nebo skriptů.
• Čistší pull-request dify. Předpřipravené statické HTML commitnuté do repozitáře se stává hlučným, když každá úprava šablony přetéká odsazení. Minifikované HTML ve složce dist vytváří těsnější PR dify, které se zaměřují na skutečné změny obsahu místo na změny bílých míst.
• Menší vložená a úryvky. E-mailové šablony, úryvky widgetů třetích stran a HTML uložené uvnitř JSON nebo YAML konfigurací těží ze stejného zkrácení bajtů. Minifikované vložky udržují transakční e-maily pod limity velikosti ESP a zmenšují balíčky widgetů.

Běžné aplikace

Minifikace HTML se objevuje na konci téměř každé statické nebo JAMstack build pipeline, plus v několika runtime kontextech, kde na bajtech záleží více než na čitelnosti zdroje.

• Build kroky statických stránek: Eleventy, Hugo, Astro a Next.js produkční buildy prohánějí HTML minifikátorem před zápisem do složky dist, takže nasazený balíček je menší než zdroj.
• Transakční e-maily: ESP (SendGrid, Postmark, Mailgun) omezují velikost HTML těla a rozšiřování inline-CSS se rychle počítá. Minifikace těla před odesláním udržuje zprávu pod limitem.
• Vložené widgety: widgety třetích stran a chatové úryvky dodávané jako inline HTML těží z každého ušetřeného bajtu, protože hostitelská stránka je musí stahovat při každé návštěvě.

Příklad

Vložte nadbytečný 500bajtový úryvek formuláře s dvoumezerovým odsazením, třemi zalomeními řádků mezi řádky, blokem HTML komentáře nahoře a <input type="checkbox" checked="checked" />. Se všemi zapnutými přepínači se výstup smrskne na přibližně 300 bajtů — zhruba 40% úspora — zatímco vykreslený DOM strom zůstává bajtově stejný jako zdroj.

Rozbije minifikace mé HTML?

Ne, při použití s výchozími přepínači. Minifikátor zachovává obsah <pre>, <textarea>, <script> a <style> tagů doslovně, ponechává IE podmíněné komentáře nedotčené, když je přepínač zapnutý, a sbalí pouze bílé místo, které HTML5 parser již klasifikuje jako nevýznamné. Vykreslený DOM strom je bajtově stejný jako zdroj. Agresivní přepínače (remove-empty-attributes) mohou změnit chování pro úryvky, které záměrně používají value="" nebo alt="", takže zkontrolujte výstup, pokud je zapnete.

Minifikuje to inline CSS a JS?

Ne v tomto nástroji. Těla inline <style> a <script> jsou zachována doslovně, aby minifikátor nikdy nerozbil CSS pravidlo nebo JS příkaz sbalením bílého místa uvnitř řetězcového literálu nebo regexu. Pro minifikaci specifickou pro CSS použijte CSS Minifikátor; pro JS použijte JS Minifikátor. HTML Minifikátor se zaměřuje na samotný markup.

Kolik mohu ušetřit?

Typické úspory na ručně psaném HTML se pohybují od 10 do 30 procent, v závislosti na tom, jak moc zdroj používá odsazení, prázdné řádky a nadbytečné formy atributů. Předpřipravené statické HTML z frameworků jako Next.js často šetří 15 až 25 procent, protože framework již provádí určitou optimalizaci, ale ponechává lidsky čitelné bílé místo. Silně komentované šablony a e-mailové HTML s hlubokým vnořením mohou dosáhnout 40 procent nebo více.

Je obsah pre zachován?

Ano. Minifikátor explicitně tokenizuje bloky <pre>, <textarea>, <script> a <style> jako oblasti ponechané beze změny a kopíruje jejich obsah bajt po bajtu do výstupu. Bílé místo, zalomení řádků a odsazení uvnitř těchto tagů přežijí nedotčeny, takže ukázky kódu a ASCII art se vykreslí přesně stejně po minifikaci.

Minifikace HTML na straně prohlížeče udržuje vaši build pipeline jednoduchou a váš markup malý. Vložte libovolné HTML výše, upravte přepínače možností a zkopírujte nebo stáhněte minifikovaný výstup — žádné nahrávání, žádný účet, žádná vendor knihovna.