Minificar/Formatear CSS
Optimiza el rendimiento web. Minifica o formatea CSS al instante.
Por qué usarlo
CSS más ligero, webs más rápidas
Reducción 20–50%
Elimina espacios, comentarios y caracteres redundantes sin alterar la funcionalidad.
Privado
El CSS se procesa en tu navegador. Nunca se sube a ningún servidor.
Bidireccional
Minifica para producción o formatea/embellece CSS minificado para leerlo fácilmente.
Instantáneo
Resultado en milisegundos. Sin procesamiento en servidor.
Cómo funciona
Tres pasos, sin complicaciones
Pega o sube tu CSS
Pega el código CSS directamente o arrastra un archivo .css. Sin límite de tamaño.
Elige: minificar o formatear
Minifica para producción (elimina espacios y comentarios) o formatea para leer y depurar el código.
Copia o descarga el resultado
El CSS optimizado aparece al instante. Copia al portapapeles o descarga como archivo.
Preguntas frecuentes
¿Tienes dudas?
La minificación elimina todo el contenido innecesario del CSS: espacios en blanco, saltos de línea, tabulaciones, comentarios, y acorta algunos valores (por ejemplo, #ffffff → #fff, 0px → 0). El resultado es funcionalmente idéntico pero ocupa menos espacio, reduciendo el tiempo de descarga.
Típicamente entre un 20% y un 50% del tamaño original. Un archivo de 100 KB de CSS bien comentado y formateado puede reducirse a 60–70 KB solo con minificación. Combinado con compresión gzip o Brotli en el servidor, la reducción total puede superar el 80%.
No, son complementarios. La minificación elimina caracteres innecesarios antes de comprimir. La compresión (gzip, Brotli) reduce aún más el archivo durante la transferencia. El orden correcto es: primero minificar, luego comprimir. Ambas técnicas juntas ofrecen la máxima reducción de tamaño.
Mediante source maps: archivos .css.map que mapean cada línea del CSS minificado a su posición original en el código fuente. Los navegadores modernos y herramientas de desarrollo (Chrome DevTools, Firefox DevTools) leen los source maps automáticamente y muestran el código original aunque el servidor sirva el CSS minificado.
No. En desarrollo usa CSS sin minificar para facilitar la depuración y lectura del código. La minificación debe aplicarse solo en producción, idealmente como parte del proceso de build (PostCSS, cssnano, webpack, Vite). Minificar en desarrollo solo añade complejidad innecesaria.
CSS, Core Web Vitals y el impacto del tamaño de archivo
El tamaño del CSS tiene un impacto directo en las métricas Core Web Vitals de Google, especialmente en Largest Contentful Paint (LCP) y First Contentful Paint (FCP). Un CSS bloqueante grande retrasa el renderizado inicial de la página porque el navegador debe descargarlo y parsearlo antes de pintar cualquier contenido. Google considera el rendimiento de carga como factor de ranking desde 2021 (Page Experience Update).
La extracción de CSS crítico (Critical CSS) es una técnica avanzada que va más allá de la minificación: identifica el CSS necesario para renderizar el contenido above-the-fold (visible sin scroll) e inyecta ese subconjunto inline en el HTML, cargando el resto de forma asíncrona. Herramientas como Critical (npm), Penthouse, y el plugin de PurgeCSS permiten automatizar este proceso en el pipeline de build.
En cuanto a herramientas de minificación, el ecosistema ha evolucionado significativamente: clean-css (Node.js, 2012) fue el pionero; cssnano (2014) se convirtió en el estándar para proyectos PostCSS/webpack; LightningCSS (2022, Rust) representa la nueva generación con velocidades 100x superiores. Para proyectos modernos con Vite, LightningCSS está integrado nativamente. La comparación Brotli vs gzip muestra que Brotli (Google, 2015) ofrece 15–25% mejor compresión que gzip para archivos de texto como CSS, con soporte en todos los navegadores modernos.