Bezplatný prevodník

HTML Minifikátor

Minifikujte a komprimujte HTML kód okamžite vo svojom prehliadači. Odstráňte komentáre, zbaľte medzery a zmenšite veľkosť súboru. Bezplatné a súkromné.

Presuňte sem súbor HTML

Podporuje súbory .html a .htm. Alebo prilepte svoj kód HTML vyššie.

Alebo

O tomto nástroji

Miniifikácia HTML odstraňuje nepotrebné znaky zo zdroja webovej stránky – medzery medzi značkami, komentáre, nadbytočné úvodzovky, voliteľné uzatváracie značky – na zmenšenie veľkosti súboru bez toho, aby sa zmenil spôsob vykresľovania stránky. Úspory sú skromné ​​na stránku (zvyčajne 10 – 30 %), ale spájajú sa s mnohými požiadavkami, najmä v prípade statických stránok alebo stránok zobrazovaných bez dynamickej kompresie.

Tento minifikátor odstraňuje medzery medzi prvkami na úrovni bloku, zbalí spustené medzery v nepodstatnom texte, odstraňuje komentáre HTML (okrem podmienených komentárov IE), odstraňuje nadbytočné úvodzovky atribútov, ak to umožňuje špecifikácia HTML5, a odstraňuje voliteľné uzatváracie značky (</p>, </li>), ak to špecifikácia povoľuje. Výsledok sa vykresľuje identicky so zdrojom v každom prehliadači.

Minifikácia je najužitočnejšia pri spárovaní s kompresiou gzip alebo Brotli na úrovni servera. Kompresia už odstraňuje veľkú časť úspor, ktoré prináša miniifikácia, ale tieto dve kombinácie stále prekonávajú samotnú kompresiu – najmä pre stránky s vysokou návštevnosťou, kde záleží na nákladoch na šírku pásma.

Prečo minimalizovať HTML

Menšie HTML sa načítava rýchlejšie, najmä pri pomalších pripojeniach a mobilných sieťach. Hmotnosť stránky priamo ovplyvňuje Core Web Vitals – Najväčšie vyfarbenie obsahu a Čas do prvého bajtu sa zlepšujú, keď server vracia menej HTML na analýzu. Pre stránky, kde hodnotenie SEO závisí od skóre Core Web Vitals, je miniifikácia merateľným zlepšením.

Minifikované HTML tiež vo veľkom znižuje náklady na šírku pásma. Stránka obsluhujúca milión stránok denne s úsporou 10 KB na stránku ušetrí 10 GB výstupov denne. Nárazové zlúčeniny pre statické stránky slúžili z CDN, ktoré sa účtujú prostredníctvom prenosu údajov.

Ako používať

Prilepte HTML a získajte minifikovanú verziu.

  1. Pridajte vstup HTML: Prilepte zdrojový kód HTML do vstupnej oblasti alebo pustite súbor .html. Minifikátor akceptuje všetky platné značky HTML5.
  2. Vyberte možnosti: Predvolené nastavenia odstránia komentáre a zbalia prázdne miesta; môžete zakázať jednotlivé transformácie, ak potrebujete zachovať špecifické prvky (napr. uchovávať komentáre pre dokumentáciu).
  3. Minifikovať: Minifikátor prechádza prúdom tokenov HTML a aplikuje každú povolenú transformáciu. Výstupom je funkčne identický HTML so zmenšenou veľkosťou.
  4. Skopírujte alebo stiahnite: Výsledok použite ako doručený kód HTML. Pred nasadením skontrolujte, či sa stránka v cieľových prehliadačoch vykresľuje správne.

Bežné prípady použitia

Technické detaily

Minifikátor spracováva HTML token po tokene. Medzera medzi prvkami na úrovni bloku (<div>, <p>, <ul>) je odstránená, pretože nemá vplyv na vykresľovanie. Medzery vo vnútri vložených kontextov (<span>, <a>, textový obsah) sa zachovajú, pretože môžu ovplyvniť vykresľovanie.

Komentáre sú štandardne odstránené, ale podmienené komentáre (<!--[if IE]>) sú zachované. Úvodzovky atribútov sú odstránené tam, kde to analyzátor HTML5 umožňuje – hodnoty atribútov s jedným slovom bez medzier alebo špeciálnych znakov môžu úvodzovky vynechať.

Voliteľné uzatváracie značky sú eliminované podľa špecifikácie HTML5: </p>, </li>, </td> a niekoľko ďalších možno vynechať, keď za nimi nasleduje súrodenec, ktorý znamená ich zatvorenie. Toto je nezvyčajné čítanie, ale platné HTML5, ktoré prehliadače analyzujú rovnako.

osvedčené postupy

Často kladené otázky

Čo odstraňuje miniifikácia HTML?
Zbytočné medzery medzi značkami, komentáre HTML (<!-- -->), voliteľné uzatváracie značky (</li>, </p>, </td>), predvolené hodnoty atribútov (type="text" na vstupoch) a boolovské hodnoty atribútov (disabled="disabled" → vypnuté).
Môže miniifikácia prerušiť moju stránku?
Zriedka, ale je to možné, ak sa váš CSS spolieha na medzery medzi vloženými prvkami alebo ak JavaScript používa porovnania innerHTML. Vždy otestujte miniifikovaný výstup. Nástroj štandardne používa konzervatívne nastavenia.
Mal by som minimalizovať HTML, ak používam rámec ako Next.js?
Väčšina moderných rámcov (Next.js, Nuxt, Angular) minimalizuje HTML automaticky v produkčných zostavách. Tento nástroj je užitočný pre statické HTML súbory, e-mailové šablóny a projekty bez zostavovacieho systému.
Minimalizuje to aj inline CSS a JavaScript?
Tento nástroj sa zameriava na štruktúru HTML. Vložený obsah <style> a <script> sa zachová tak, ako je. Na dosiahnutie optimálnych výsledkov použite vyhradené minifikátory CSS a JavaScript.
Je bezpečné odstrániť voliteľné uzatváracie značky?
Áno podľa špecifikácie HTML5, hoci výsledok je ťažšie čitateľný. Niektoré tímy kvôli prehľadnosti túto transformáciu deaktivujú a akceptujú miernu penalizáciu veľkosti.
Je môj kód HTML odovzdaný na server?
Nie. Minifikátor beží vo vašom prehliadači.
Ako sa to porovnáva s html-minifier-terser?
html-minifier-terser je kanonický node.js HTML miniifier a prináša o niečo agresívnejšie výsledky. Tento nástroj pokrýva rovnaké transformácie pre použitie na strane prehliadača bez nastavenia zostavy.
Mám minifikovať vždy alebo selektívne?
Vždy na výrobu. Nikdy pre zdrojový kód v správe verzií; čitateľný kód HTML v zdroji je nevyhnutný na údržbu.