Minificador CSS
Reduce el tamaño de tus archivos CSS eliminando espacios en blanco, saltos de línea y comentarios. También incluye un modo de formateo para hacer legible un CSS minificado. Sin dependencias externas.
Cómo funciona la minificación y el formateo CSS
La función minifyCSS() aplica cinco transformaciones regex en cadena: elimina comentarios /* ... */, colapsa espacios alrededor de : ; , > ~ +, reduce espacios múltiples a uno solo, elimina el punto y coma antes de } y elimina espacios al inicio/fin de cada línea. El modo beautifyCSS() hace el proceso inverso: inserta saltos de línea después de y ;, y calcula la profundidad de indentación contando llaves de apertura y cierre para aplicar 2 espacios por nivel. El contador de bytes en pantalla usa Blob para dar el tamaño real en UTF-8, no solo la longitud de caracteres.
Rendimiento CSS en proyectos web de LATAM
En América Latina, más del 60% del tráfico web proviene de dispositivos móviles con conexiones variables. El CSS no minificado es un recurso bloqueante del renderizado: el navegador no puede mostrar el contenido visual hasta haber descargado y parseado todo el CSS del <head>. Para sitios en WordPress con Elementor, WooCommerce o temas de Themeforest que acumulan múltiples archivos CSS, minificar y combinar esos archivos puede reducir el tiempo de bloqueo en 200-400 ms. Plugins como LiteSpeed Cache o WP Rocket hacen esto automáticamente, pero esta herramienta es útil para hacerlo manualmente o para temas personalizados donde los plugins no tienen acceso completo al CSS generado.
Otras herramientas
Preguntas frecuentes
- ¿Cuánto puede reducirse el tamaño de un archivo CSS?
- Depende del estilo del código original. Un CSS bien formateado con muchos comentarios y espacios puede reducirse entre un 20% y un 50%. Archivos CSS de frameworks como Bootstrap o Tailwind generados pueden reducirse aún más. El porcentaje exacto se muestra después de minificar.
- ¿La minificación afecta al funcionamiento del CSS?
- No. La minificación solo elimina caracteres innecesarios (espacios, saltos de línea, comentarios y el último punto y coma antes de un }) que el navegador ignora. El resultado funciona exactamente igual que el original.
- ¿Se eliminan los comentarios del CSS?
- Sí. Todos los comentarios CSS (/* ... */) se eliminan en el proceso de minificación. Si necesitas preservar comentarios de licencia (por ejemplo /* @license */), estos se perderán también. Guarda siempre el CSS original sin minificar como fuente de edición.
- ¿Funciona con CSS con variables, nesting y funciones modernas?
- Sí. La minificación opera a nivel de texto, no interpreta el CSS semánticamente. Por tanto funciona con cualquier sintaxis CSS válida: variables (--my-var), calc(), clamp(), grid, flexbox, @media queries y CSS nesting.
- ¿Puedo usar esta herramienta para hacer legible un CSS minificado?
- Sí. El modo "Formatear" aplica indentación y saltos de línea para hacer legible un CSS comprimido. Es útil para inspeccionar CSS de terceros o de build tools.
- ¿Cuándo debo minificar CSS manualmente y cuándo usar un build tool?
- Minifica manualmente aquí cuando: tienes un archivo CSS estático que no forma parte de un proyecto con bundler (un CSS de plantilla, un plugin de WordPress, un snippet para un cliente), quieres inspeccionar qué hace un minificador, o necesitas probar rápidamente cuánto se reduce un archivo concreto. Usa un build tool (Vite, Webpack, Parcel) cuando el CSS es parte de un proyecto con múltiples archivos, componentes o preprocesadores (SASS, PostCSS), ya que estos herramientas también manejan tree-shaking, autoprefixer y sourcemaps.
- ¿Cómo impacta la minificación CSS en el SEO y Core Web Vitals de sitios en LATAM?
- Google usa los Core Web Vitals (LCP, CLS, INP) como factor de ranking. Un CSS no minificado ralentiza el renderizado inicial de la página porque el navegador debe parsear más bytes antes de mostrar contenido. En países de LATAM donde muchos usuarios tienen conexiones 4G o 3G lentas y usan datos móviles, reducir el CSS de 50 KB a 30 KB puede mejorar el LCP en varios décimas de segundo. Para sitios en WordPress, WooCommerce, Shopify o tiendas en VTEX, usar CSS minificado en todos los archivos cargados en el head mejora tanto la experiencia del usuario como el posicionamiento en Google.