Minificar HTML

Los espacios que importan y los que no

En HTML, un espacio entre dos elementos en línea es un espacio real, y eso es lo que distingue a un minificador cuidadoso de uno que rompe páginas. Si contraes el salto de línea entre dos enlaces, las palabras quedan pegadas en pantalla; si contraes la sangría dentro de un bloque pre o de un textarea, cambia el propio contenido, porque ahí los espacios son contenido. Por eso los espacios solo se eliminan donde se puede demostrar que no se muestran, y se dejan tal cual donde sí. Un minificador que quita todos los espacios por igual te dará un archivo más liviano y una página visiblemente incorrecta.

Los comentarios se eliminan, porque están para quien mantiene el código y no para quien lee la página, con la excepción de los comentarios condicionales, que son instrucciones y no notas. Se quitan los atributos redundantes: un type="text/javascript" en un elemento script es el valor predeterminado desde hace una década, y method="get" en un formulario dice lo que el formulario ya hace de todos modos.

Quitar las comillas de los atributos es HTML válido y viene desactivado, a propósito. La especificación permite un valor de atributo sin comillas siempre que no tenga espacios ni caracteres problemáticos, y los navegadores lo manejan a la perfección. Los motores de plantillas, muchas veces no: una expresión de Blade, Twig, Handlebars o JSX dentro de un atributo sin comillas deja de analizarse correctamente, y el fallo aparece al compilar, en un archivo que nadie quiere leer. El ahorro es pequeño y el riesgo no, así que es opcional.

La forma honesta de medir lo que ganas es después de la compresión, no antes. Los servidores envían el HTML comprimido con gzip o brotli, y esos algoritmos son extremadamente buenos con los espacios repetidos: un documento que al minificarse pasa de 100 KB a 70 KB quizá solo pase de 12 KB a 11 KB en la transferencia. Vale la pena minificar el HTML, y es el menor de los tres ahorros; el peso de verdad está en la hoja de estilos y en el script.

Si buscas otra cosa

Para un sitio completo, y no un solo archivo, esto corresponde al proceso de compilación y no a una pestaña del navegador. Todos los frameworks y generadores de sitios estáticos actuales minifican el HTML al compilar, y hacerlo a mano significa que deja de hacerse en cuanto alguien lo olvida. Las bibliotecas que usan se pueden configurar hasta el nivel de cada transformación, algo útil cuando una regla concreta está dando problemas.

Antes de optimizar el marcado, revisa cuánto pesa realmente la página. En casi cualquier sitio real, el HTML es insignificante frente a las imágenes, las fuentes y el JavaScript: Lighthouse o el panel de red del propio navegador te lo dirán en segundos, y la respuesta suele ser que una imagen de portada sin optimizar pesa más que todo el marcado de la página.