O tomto nástroji
Miniifikace HTML odstraňuje nepotřebné znaky ze zdroje webové stránky – mezery mezi tagy, komentáře, nadbytečné uvozovky, volitelné uzavírací tagy – za účelem zmenšení velikosti souboru, aniž by se změnil způsob vykreslování stránky. Úspory jsou mírné na stránku (obvykle 10–30 %), ale skládají se z mnoha požadavků, zejména u statických webů nebo stránek zobrazovaných bez dynamické komprese.
Tento minifikátor odstraňuje mezery mezi prvky na úrovni bloku, sbaluje běhy mezer uvnitř nevýznamného textu, odstraňuje komentáře HTML (kromě podmíněných komentářů IE), odstraňuje nadbytečné uvozovky atributů tam, kde to umožňuje specifikace HTML5, a odstraňuje volitelné uzavírací značky (</p>, </li>), pokud to specifikace dovoluje. Výsledek se vykresluje identicky jako zdroj v každém prohlížeči.
Minifikace je nejužitečnější při spárování s gzip nebo kompresí Brotli na úrovni serveru. Komprese již odstraňuje velkou část úspor, které přináší miniifikace, ale obě kombinace stále překonávají samotnou kompresi – zejména u stránek s vysokou návštěvností, kde záleží na nákladech na šířku pásma.
Proč minimalizovat HTML
Menší HTML se načítá rychleji, zejména u pomalejších připojení a mobilních sítí. Váha stránky přímo ovlivňuje Core Web Vitals – největší obsahové vybarvení a čas do prvního bajtu se zlepší, když server vrátí méně HTML k analýze. U webů, kde hodnocení SEO závisí na skóre Core Web Vitals, je minifikace měřitelným zlepšením.
Minifikované HTML také ve velkém snižuje náklady na šířku pásma. Web obsluhující milion stránek denně s úsporou 10 KB na stránku ušetří 10 GB odchozích dat denně. Dopadové sloučeniny pro statická místa sloužily z CDN, které účtují přenosem dat.
Technické detaily
Minifikátor zpracovává HTML token po tokenu. Mezery mezi prvky na úrovni bloku (<div>, <p>, <ul>) jsou odstraněny, protože to neovlivňuje vykreslování. Mezery uvnitř vkládaných kontextů (<span>, <a>, textový obsah) jsou zachovány, protože mohou ovlivnit vykreslování.
Komentáře jsou ve výchozím nastavení odstraněny, ale podmíněné komentáře (<!--[if IE]>) jsou zachovány. Uvozovky atributů jsou odstraněny tam, kde to analyzátor HTML5 umožňuje – hodnoty atributů s jedním slovem bez mezer nebo speciálních znaků mohou uvozovky vynechávat.
Volitelné uzavírací značky jsou vynechány podle specifikace HTML5: </p>, </li>, </td> a několik dalších lze vynechat, pokud následuje sourozenec, který implikuje jejich uzavření. Toto je neobvyklé čtení, ale platné HTML5, které prohlížeče analyzují identicky.
Často kladené dotazy
- Co minimalizace HTML odstraní?
- Zbytečné mezery mezi značkami, komentáře HTML (<!-- -->), volitelné uzavírací značky (</li>, </p>, </td>), výchozí hodnoty atributů (type="text" na vstupech) a booleovské hodnoty atributů (disabled="disabled" → vypnuto).
- Může minifikace rozbít moji stránku?
- Zřídka, ale možné, pokud váš CSS spoléhá na mezery mezi vloženými prvky nebo pokud JavaScript používá vnitřní HTML porovnání. Vždy otestujte minifikovaný výstup. Nástroj ve výchozím nastavení používá konzervativní nastavení.
- Mám minimalizovat HTML, pokud používám framework jako Next.js?
- Většina moderních frameworků (Next.js, Nuxt, Angular) minimalizuje HTML automaticky v produkčních sestavách. Tento nástroj je užitečný pro statické soubory HTML, e-mailové šablony a projekty bez systému sestavení.
- Minifikuje to také inline CSS a JavaScript?
- Tento nástroj se zaměřuje na strukturu HTML. Vložený obsah <style> a <script> je zachován tak, jak je. Pro ty nejlepší výsledky použijte vyhrazené minifikátory CSS a JavaScript.
- Lze volitelné uzavírací značky bezpečně odstranit?
- Ano podle specifikace HTML5, i když výsledek je hůře čitelný. Některé týmy kvůli přehlednosti tuto transformaci deaktivují a akceptují mírnou penalizaci velikosti.
- Je můj HTML nahrán na server?
- Ne. Minifikátor běží ve vašem prohlížeči.
- Jak je to ve srovnání s html-minifier-terser?
- html-minifier-terser je kanonický node.js HTML miniifier a poskytuje o něco agresivnější výsledky. Tento nástroj pokrývá stejné transformace pro použití na straně prohlížeče bez nastavení sestavení.
- Mám minifikovat vždy nebo selektivně?
- Vždy pro výrobu. Nikdy pro zdrojový kód ve správě verzí; Čitelný HTML ve zdrojovém kódu je nezbytný pro údržbu.