CSS Minifier
Minifica tu código CSS eliminando espacios, saltos de línea y comentarios.
¿Por qué minificar CSS y cuánto mejora el rendimiento?
La minificación de CSS es el proceso de eliminar todos los caracteres innecesarios del código fuente (espacios en blanco, comentarios, saltos de línea, indentación) sin alterar su funcionalidad. Un archivo CSS bien formateado para desarrollo puede contener hasta un 60-70% de caracteres que no son necesarios para que el navegador interprete los estilos correctamente.
La minificación es un paso esencial en el pipeline de build para producción. Un CSS más pequeño significa menos datos transferidos por la red, tiempos de carga más rápidos y mejor puntuación en herramientas como Google PageSpeed Insights. En sitios con mucho CSS, la reducción puede ser de cientos de kilobytes.
Casos de uso prácticos
Optimización web: Antes de desplegar a producción, minifica todo tu CSS. Combinado con gzip/brotli, puedes reducir el tamaño total de CSS en un 80-90%.
Emails HTML: Los clientes de email tienen límites de tamaño (Gmail trunca emails mayores a 102KB). Minificar el CSS inline es crucial para que tus emails se muestren completos.
CSS inline crítico: Para mejorar el First Contentful Paint, se inserta CSS crítico inline en el HTML. Minificar este fragmento reduce el tamaño del HTML y acelera la primera renderización.
Preguntas frecuentes
¿Minificar es lo mismo que comprimir?
No. Minificar elimina caracteres innecesarios del código. Comprimir (gzip/brotli) aplica un algoritmo de compresión al archivo ya minificado. Son complementarios: primero minifica, luego el servidor comprime al enviar.
¿La minificación afecta la funcionalidad del CSS?
No, si se hace correctamente. La minificación solo elimina espacios y comentarios. Sin embargo, minificadores agresivos pueden reordenar propiedades o eliminar selectores que parecen sin uso. Siempre prueba después de minificar.
¿Debo minificar durante el desarrollo?
No. Mantén tu CSS sin minificar durante el desarrollo para facilitar la depuración (los números de línea y la indentación son esenciales). Minifica solo en el paso de build para producción usando herramientas como PostCSS, esbuild o esta herramienta.
¿Cuánto puedo reducir el tamaño de mi CSS?
Típicamente entre un 40-70% solo con minificación. Combinado con gzip, la reducción total puede alcanzar el 80-90%. Un archivo de 100KB puede quedar en 10-15KB después de minificar y comprimir.
Qué elimina la minificación
| Elemento | Antes | Después |
|---|---|---|
| Comentarios | /* header */ .nav {} | .nav{} |
| Espacios | .nav { color: red; } | .nav{color:red} |
| Saltos de línea | .a{}\n.b{} | .a{}.b{} |
| Último punto y coma | .nav{color:red;} | .nav{color:red} |