Minificador de HTML
Reduce el tamaño de una página HTML quitando comentarios, sangrías y espacios sobrantes. Es un minificador conservador: respeta <pre>, <textarea>, <script>, los valores de los atributos y el espacio que separa palabras y elementos en línea.
Cómo minificar HTML
- Pega el código de la página o de una plantilla. El resultado se recalcula mientras escribes y muestra los bytes ahorrados.
- Ajusta las opciones: quitar espacios alrededor de etiquetas de bloque (
div,p,li,table…), compactar el CSS de los bloques<style>y conservar o no los comentarios. - Copia o descarga el resultado y comprueba la página en el navegador antes de publicarla.
Qué elimina y qué respeta
El proceso tiene cuatro pasos:
- Aparta lo intocable: el contenido de
<pre>y<textarea>(donde los espacios se muestran tal cual),<script>(un comentario//en JavaScript rompería el código si se juntaran las líneas) y los comentarios condicionales<!--[if IE]>. - Quita los comentarios
<!-- … -->, salvo que marques conservarlos. - Normaliza las etiquetas:
<div class="x" hidden >pasa a<div class="x" hidden>. Los valores de los atributos se copian exactamente, con sus espacios. - Reduce los espacios: cada secuencia de espacios, tabuladores y saltos de línea del texto se convierte en un solo espacio. Junto a etiquetas de bloque, donde el navegador los ignora, se eliminan del todo.
Fíjate en que el espacio entre <span>uno</span> <span>dos</span> no se elimina: en elementos en línea, ese espacio es visible y quitarlo juntaría las palabras («unodos»). Muchos minificadores agresivos cometen este error.
Una excepción a tener en cuenta: si conviertes elementos de bloque en display: inline-block (por ejemplo, los <li> de un menú horizontal), el espacio entre ellos sí se ve. Al quitarlo, desaparece la pequeña separación entre elementos. Si tu diseño depende de ella, desmarca la primera opción.
Ejemplo y ahorro típico
El documento de ejemplo pasa de 659 a 502 bytes, un 23,8 % menos. El ahorro depende sobre todo de la sangría y los comentarios: plantillas generadas por un CMS o con mucha anidación suelen bajar entre un 10 y un 25 %; HTML escrito a mano con sangría profunda, más.
| Antes | Después |
|---|---|
<p>
Hola <b>Ana</b>
</p> | <p>Hola <b>Ana</b></p> |
<!-- menú --><nav> | <nav> |
<img src="a.png" alt="Logo de la tienda" > | <img src="a.png" alt="Logo de la tienda"> |
<pre> a b</pre> | Sin cambios |
Minificar HTML y velocidad de carga
El HTML es lo primero que descarga el navegador, así que un documento más ligero adelanta todo lo demás, sobre todo en móviles con mala cobertura. Aun así, la compresión gzip o Brotli del servidor ya reduce mucho los espacios repetidos; la minificación suma un ahorro adicional moderado y no sustituye a la compresión. Lo que más pesa suele estar en otra parte: imágenes sin optimizar (prueba a comprimir imágenes), CSS y JavaScript sin minificar (para el CSS externo usa el minificador de CSS) y recursos de terceros.
Este minificador no elimina comillas de atributos, etiquetas de cierre opcionales ni atributos por defecto: esas técnicas ahorran unos pocos bytes más a costa de un HTML más frágil. Si escribes el contenido en Markdown, conviértelo antes con Markdown a HTML; y si necesitas mostrar código HTML dentro de una página, escápalo con entidades HTML. Todo se procesa en tu navegador.
Preguntas frecuentes
¿Minificar HTML afecta al SEO?
No de forma negativa: el contenido, las etiquetas y los atributos son los mismos. Un HTML más ligero carga antes, lo que favorece la experiencia y las métricas de velocidad.
¿Por qué no se eliminan todos los espacios?
Porque entre elementos en línea (texto, <a>, <strong>, <span>) un espacio es visible. Quitarlo juntaría palabras. Solo se eliminan junto a etiquetas de bloque, donde el navegador los ignora.
¿Se minifica el JavaScript de las etiquetas script?
No. El código JavaScript se deja intacto porque juntar líneas puede romperlo (por ejemplo, con comentarios // o sin punto y coma). Para minificarlo usa una herramienta de compilación específica.
¿Cuánto se ahorra al minificar HTML?
Normalmente entre un 10 y un 30 % del tamaño sin comprimir, según la sangría y los comentarios del original. Con compresión gzip o Brotli en el servidor, la diferencia transferida es menor.