Minificar HTML

Cómo funciona

Pegue el HTML de una página o de una plantilla de correo en el panel izquierdo; la versión minificada aparece en el derecho. Primero se van las sangrías y los saltos de línea: los espacios entre etiquetas de bloque (div, p, li, tr) se eliminan por completo y las series de espacios dentro del texto quedan en uno. Un solo espacio entre dos elementos en línea se conserva, porque en una frase como Todos los artículos con <strong>20 %</strong> de descuento ese espacio se ve en la página. Los comentarios <!-- ... --> se quitan; los comentarios condicionales escritos para el viejo Internet Explorer (<!--[if IE]>) se quedan incluso con este ajuste. Se limpian los espacios de más dentro de las etiquetas, pero nunca se quitan las comillas de los atributos. El CSS de <style> y el JavaScript de <script> también se minifican, y los datos estructurados application/ld+json quedan en una línea. Un script que no se puede leer se deja tal cual y se cuenta en la línea de resultado. El contenido de <pre> y <textarea> nunca se toca. La línea de resultado indica el tamaño antes y después en bytes, cuántos comentarios se quitaron y cuántos bloques se minificaron.

Esta herramienta también se busca como minificar html, minificar html online, comprimir html, html minify, quitar espacios html, minificador html.

¿Qué es Minificación de HTML?

Minificar HTML es quitar los caracteres que solo sirven al desarrollador, como sangrías, saltos de línea y comentarios, sin que cambie lo que se ve en pantalla. Cuánto se ahorra depende de la página: las plantillas muy sangradas y con muchos comentarios son las que más ganan. Con frecuencia el mayor ahorro está en el CSS y el JavaScript incrustados, que esta herramienta comprime con sus propios minificadores.

¿Qué es Comentario condicional?

Un comentario condicional es un comentario HTML especial con la forma <!--[if IE]> ... <![endif]--> cuyo contenido solo leen y aplican las versiones antiguas de Internet Explorer y el Outlook basado en Word. Los demás navegadores lo tratan como un comentario normal y lo saltan. Hoy es raro en los sitios web, pero sigue siendo común en plantillas de correo para corregir Outlook; por eso un minificador no debe borrarlo.

¿Por qué una minificación prudente?

En HTML los espacios no siempre sobran. El espacio entre dos elementos en línea (Ana <b>García</b>) se ve; si se quita, las palabras se pegan. La sangría dentro de <pre> es parte de un ejemplo de código o de un poema. Por eso esta herramienta solo quita los espacios que seguro no cambian la página: entre etiquetas de bloque y los espacios repetidos dentro del texto. El espacio de no separación (&nbsp;) no cuenta como espacio y se queda.

Algunos trucos de los minificadores agresivos se omiten a propósito: las comillas de los atributos se quedan (nada de class=tarjeta), no se omiten etiquetas de cierre y no se acortan atributos vacíos. Esos trucos ahorran unos cientos de bytes más, pero rompen algunos motores de plantillas y clientes de correo. Una advertencia: también se quita el espacio entre elementos de lista puestos uno al lado del otro con CSS (display: inline-block); si su menú depende de ese hueco, dé la separación con un margin de CSS.

Qué ajuste para cada caso

Plantilla de correo: quite los comentarios y minifique el código incrustado. Algunos clientes de correo, entre ellos Gmail, recortan los mensajes que pasan de cierto tamaño, y minificar ayuda a quedar por debajo. Los comentarios condicionales pueden hacer falta para Outlook, así que la herramienta los conserva sola.

Conserve los comentarios si la página usa una biblioteca que trabaja con ellos, como Knockout, o si son marcas de un gestor de contenidos. No toque <style>/<script> si un script lleva marcadores de un motor de plantillas como {{ }}: el minificador los tomaría por JavaScript y no podría leerlos. Si solo quiere leer el código, la herramienta Formatear HTML hace el camino inverso.

Preguntas frecuentes

¿Cómo se minifica el HTML?

Pegue el código en el panel izquierdo de esta página. El panel derecho lo muestra sin comentarios ni espacios de más, con el CSS y el JavaScript incrustados también comprimidos. Cópielo o descárguelo como archivo .html; la línea de resultado indica los bytes ahorrados.

¿Minificar el HTML puede romper el diseño?

Esta herramienta solo quita los espacios que no pueden cambiar lo que se ve: entre etiquetas de bloque y los espacios repetidos del texto. Se conservan el espacio único entre elementos en línea y todo el contenido de <pre> y <textarea>. La única excepción son los elementos de lista puestos lado a lado con CSS: pierden el espacio que los separaba, así que deles un margin de CSS.

¿Por qué se quedaron mis comentarios <!--[if IE]>?

Son comentarios condicionales: el viejo Internet Explorer y algunas versiones de Outlook los leen y ejecutan el código que contienen. Sin ellos el diseño podría romperse en esos programas; por eso la herramienta los conserva con cualquier ajuste.

¿Mi código se envía a un servidor?

No. La minificación, incluida la del CSS y la del JavaScript, se hace por completo en su navegador; su HTML no sale de esta página.