Cómo minificar HTML, CSS y JavaScript

La respuesta corta

Minificar es limpiar espacios y comentarios. Una hoja de estilos escrita con una propiedad por línea, comentarios y sangría de cuatro espacios se convierte en una sola línea compacta que el navegador interpreta exactamente igual. En pantalla no cambia nada; solo baja la cantidad de bytes que viajan por la red.

La herramienta de abajo trabaja con HTML, CSS y JavaScript. Elige el lenguaje, pon Acción en Minificar, pega el código o usa Abrir archivo, y el resultado aparece a la derecha con el tamaño antes y después y cuánto se redujo. Cópialo o descárgalo como archivo. El código se procesa en tu navegador y no se sube a ningún servidor.

Qué elimina la minificación y qué debe respetar

Un minificador solo es seguro si entiende el lenguaje lo bastante bien como para saber qué caracteres tienen significado. Quitar el espacio equivocado rompe el código sin avisar, por eso las reglas cambian según el lenguaje.

Algunas herramientas van más allá de los espacios. Bundlers de JavaScript como Terser o esbuild también renombran variables locales a una sola letra y eliminan código que nunca se ejecuta; herramientas de CSS como cssnano o Lightning CSS acortan colores (#ffffff a #fff) y fusionan reglas. Eso ahorra más, pero ya es una transformación del código, no una simple limpieza, y debe ir en un proceso de build con pruebas. El minificador de esta página se queda a propósito en comentarios y espacios, por eso puedes usarlo con cualquier fragmento aunque no tengas pruebas automáticas.

• CSS: se van los comentarios y saltos de línea, pero el espacio de un selector descendiente como .menu a debe quedarse, y calc(1px + 2px) necesita los espacios alrededor del más y del menos. Los comentarios de licencia que empiezan con /*! suelen conservarse.
• JavaScript: se van comentarios y sangrías, pero cadenas, template literals y expresiones regulares no se tocan. En código sin punto y coma, un salto de línea puede terminar una instrucción, así que algunos saltos tienen que quedarse.
• HTML: desaparecen los espacios entre elementos de bloque y las secuencias de espacios se reducen a uno, pero el espacio entre dos enlaces dentro de una frase se ve en pantalla y debe quedarse. El contenido de pre y textarea se mantiene tal cual.

¿Cuánto se ahorra al minificar?

El ahorro depende de cómo esté escrito el archivo. Los archivos con muchos comentarios y sangría amplia son los que más bajan. Estos son rangos típicos para código escrito a mano, antes de la compresión del servidor:

¿Minificar o gzip? Las dos cosas

Los servidores y las CDN suelen comprimir los archivos de texto con gzip o Brotli antes de enviarlos, lo que ya reduce CSS y JavaScript entre un 60 y un 80 por ciento aproximadamente. Como la compresión aprovecha muy bien los espacios repetidos, la ganancia extra de minificar es menor después de comprimir que antes, a menudo entre un 5 y un 20 por ciento del tamaño comprimido.

Aun así vale la pena. Los archivos minificados se analizan un poco más rápido, los comentarios con notas internas no llegan al público y el ahorro se suma en cada visita. Lighthouse y PageSpeed Insights llevan años señalando el CSS y el JavaScript sin minificar justo por eso. Comprueba también que la compresión esté activa: en las herramientas para desarrolladores del navegador abre el panel Red (Network), haz clic en un archivo CSS y busca la cabecera de respuesta content-encoding con gzip o br.

Formas de minificar, de un archivo a un sitio completo

El método adecuado depende de cada cuánto cambia el código.

• Un archivo o un fragmento: pégalo en la herramienta de arriba. Ideal para scripts en línea de un CMS, una hoja de estilos para una plantilla de correo, un widget que entregas a un cliente o para ver cuánto ganaría un archivo.
• Un sitio con paso de build: deja que lo haga el bundler. Vite, webpack, Parcel y esbuild minifican por defecto en el build de producción, así que normalmente basta con ejecutar el comando de build de producción.
• Un sitio sin build: muchos CMS y plugins de caché tienen una opción para minificar, y algunas CDN ofrecen minificación automática. Prueba las páginas después de activarla, porque una minificación agresiva de HTML o JavaScript es la causa más común de un diseño roto o un script que deja de funcionar tras activar esa opción.
• Frameworks del lado del servidor: ASP.NET, Django y Rails tienen asset pipelines o paquetes que minifican al publicar.

Cuando el código minificado falla y cómo arreglarlo

Casi todos los fallos vienen de un código original que depende de algo que el minificador cambia, o de un minificador demasiado agresivo. Los sospechosos habituales:

• Falta de punto y coma con un minificador de JavaScript agresivo: una línea que empieza con ( o [ se pega a la anterior. Conserva los saltos de línea (esta herramienta lo hace) o añade los punto y coma.
• Unir dos archivos después de minificarlos: si el primero no termina en punto y coma, el segundo puede leerse como una llamada a función. Termina bien cada archivo o deja la unión al bundler.
• Hacks de CSS y sintaxis poco común: los hacks para navegadores antiguos que dependen de espacios exactos pueden dejar de funcionar. Quita los que ya no necesites.
• Código que lee su propio texto o los nombres de sus funciones: los minificadores que renombran lo rompen, los que solo quitan espacios no.
• Errores de sintaxis en el original: un minificador no los arregla. La herramienta de esta página indica cadenas, comentarios y etiquetas sin cerrar con su línea y columna, así que corrige primero el original.

Buenas costumbres

Nunca edites archivos minificados directamente. Guarda el código legible en tu control de versiones y trata la copia minificada como un resultado que puedes volver a generar en cualquier momento. Si necesitas leer un archivo minificado ajeno, cambia Acción a Embellecer en la misma herramienta y recuperarás la sangría.

Si usas un bundler, genera source maps para producción. Así las herramientas del navegador muestran las líneas originales al depurar, mientras los usuarios siguen descargando el archivo pequeño.