Sobre aquesta eina
La minificació HTML elimina els caràcters innecessaris de la font d'una pàgina web (espais en blanc entre etiquetes, comentaris, cometes redundants, etiquetes de tancament opcionals) per reduir la mida del fitxer sense canviar com es representa la pàgina. Els estalvis són modests per pàgina (normalment del 10 al 30%), però s'agreguen a moltes sol·licituds, especialment per a llocs estàtics o pàgines publicades sense compressió dinàmica.
Aquest minificador elimina els espais en blanc entre els elements de nivell de bloc, col·lapsa els espais en blanc dins de text no significatiu, elimina els comentaris HTML (excepte els comentaris condicionals d'IE), elimina les cometes d'atributs redundants quan ho permet l'especificació HTML5 i elimina les etiquetes de tancament opcionals (</p>, </li>) quan l'especificació ho permet. El resultat es mostra de manera idèntica a la font a tots els navegadors.
La minimització és més útil quan es combina amb la compressió gzip o Brotli a nivell de servidor. La compressió ja elimina gran part de l'estalvi que produeix la minificació, però els dos combinats encara superen la compressió sols, especialment per als llocs d'alt trànsit on els costos de l'ample de banda són importants.
Per què reduir HTML
HTML més petit es carrega més ràpidament, especialment en connexions més lentes i xarxes mòbils. El pes de la pàgina afecta directament a Core Web Vitals: la pintura de contingut més gran i el temps per al primer byte milloren quan el servidor retorna menys HTML per analitzar. Per als llocs on la classificació de SEO depèn de les puntuacions de Core Web Vitals, la minimització és una millora mesurable.
L'HTML reduït també redueix els costos d'ample de banda a escala. Un lloc que ofereix un milió de pàgines al dia amb 10 KB d'estalvi per pàgina estalvia 10 GB de sortida diària. Els compostos d'impacte dels llocs estàtics es van servir des de CDN que facturen mitjançant transferència de dades.
Detalls tècnics
El minificador processa testimoni HTML per testimoni. L'espai en blanc entre els elements a nivell de bloc (<div>, <p>, <ul>) s'elimina perquè no afecta la representació. Els espais en blanc dins dels contextos en línia (<span>, <a>, contingut de text) es conserven perquè poden afectar la representació.
Els comentaris s'eliminen per defecte, però els comentaris condicionals (<!--[si IE]>) es conserven. Les cometes d'atributs s'eliminen allà on ho permet l'analitzador HTML5: els valors d'atributs d'una sola paraula sense espais o caràcters especials poden ometre les cometes.
Les etiquetes de tancament opcionals s'eliminen segons l'especificació HTML5: </p>, </li>, </td> i algunes altres es poden ometre quan les segueixen un germà que implica el seu tancament. Això és inusual de llegir però HTML5 vàlid que els navegadors analitzen de manera idèntica.
Preguntes freqüents
- Què elimina la minificació HTML?
- Espais en blanc innecessaris entre etiquetes, comentaris HTML (<!-- -->), etiquetes de tancament opcionals (</li>, </p>, </td>), valors d'atributs predeterminats (type="text" a les entrades) i valors d'atributs booleans (disabled="disabled" → disabled).
- La minificació pot trencar la meva pàgina?
- Poques vegades, però és possible si el vostre CSS es basa en espais en blanc entre elements en línia o si JavaScript utilitza comparacions d'HTML intern. Comproveu sempre la sortida minificada. L'eina utilitza una configuració conservadora de manera predeterminada.
- He de reduir l'HTML si faig servir un marc com Next.js?
- La majoria dels marcs moderns (Next.js, Nuxt, Angular) minimitzen HTML automàticament en les compilacions de producció. Aquesta eina és útil per a fitxers HTML estàtics, plantilles de correu electrònic i projectes sense un sistema de compilació.
- Això redueix també CSS i JavaScript en línia?
- Aquesta eina se centra en l'estructura HTML. Els continguts <style> i <script> en línia es conserven tal com estan. Per a aquests, utilitzeu minificadors CSS i JavaScript dedicats per obtenir resultats òptims.
- Les etiquetes de tancament opcionals són segures d'eliminar-les?
- Sí, segons les especificacions HTML5, tot i que el resultat és més difícil de llegir. Alguns equips desactiven aquesta transformació per claredat, acceptant la petita penalització de mida.
- El meu HTML està penjat a un servidor?
- No. El minificador s'executa al vostre navegador.
- Com es compara això amb html-minifier-terser?
- html-minifier-terser és el minificador HTML canònic de Node.js i produeix resultats una mica més agressius. Aquesta eina cobreix les mateixes transformacions per a l'ús del navegador sense una configuració de compilació.
- He de reduir sempre o selectivament?
- Sempre per a la producció. Mai per al codi font en el control de versions; HTML llegible a la font és essencial per al manteniment.