Original: 0 caracteres | Minificado: 0 caracteres
Cómo funciona
El minificador de CSS elimina todos los espacios, los comentarios y la sintaxis redundante para dejar la hoja de estilos válida más pequeña posible. Un CSS minificado se descarga y se interpreta más rápido, lo que mejora directamente el rendimiento de la página.
En una aplicación web normal, los archivos CSS suelen ocupar entre 30 y 50 KB. Minificados se quedan entre 20 y 35 KB, una diferencia que se nota en la primera carga, sobre todo en redes móviles. Casi todas las aplicaciones en producción minifican el CSS como parte de su compilación (Webpack, Vite y Parcel lo hacen solos), pero esta herramienta viene bien para minificar una hoja suelta, un bloque de estilos gestionado desde un CMS o el CSS de un proyecto antiguo sin sistema de compilación.
Cómo se usa: pega tu CSS. El minificador quita todos los comentarios (/* ... */), junta los espacios, elimina los que rodean a los selectores y a los separadores de propiedades, acorta los colores cuando es seguro (#ffffff → #fff), quita los puntos y coma innecesarios antes de cerrar llave y suprime las comillas de las URL cuando no hacen falta.
Qué se conserva: el significado de cada regla. La minificación nunca cambia a qué elementos se aplica un estilo ni cómo: solo elimina caracteres sin valor semántico. Las propiedades con prefijo de fabricante (-webkit-, -moz-) se conservan exactamente como estaban.
Medición del tamaño: la herramienta muestra el tamaño de entrada y el de salida en bytes, junto con el porcentaje de reducción, para que sepas exactamente cuánto has ahorrado.
Preguntas frecuentes
- Sí. Los colores hexadecimales de seis dígitos con pares repetidos se acortan: #ffffff pasa a #fff y #aabbcc a #abc. Los valores rgb() que tienen equivalente hexadecimal se convierten a hexadecimal. Los colores con nombre se dejan como están.
- Con CSS estándar, sí. El minificador aplica solo transformaciones seguras: no fusiona propiedades abreviadas ni normaliza valores de formas que pudieran cambiar el comportamiento. Aun así, pruébalo con tu CSS concreto antes de publicarlo.
- Las propiedades personalizadas (--color-primario: #ff5733) se conservan exactamente. Se normalizan los espacios alrededor de los dos puntos, pero los valores no se tocan.
- No. Las URL de @import no se siguen ni se incorporan al archivo. La regla @import se mantiene tal cual en el resultado minificado.
¿Acorta los valores de color?
¿Es seguro usarlo en producción?
¿Qué pasa con las propiedades personalizadas (variables CSS)?
¿Procesa las reglas @import?
RankForge — Technical SEO Audit
Score any page out of 100, see every issue with the exact fix, generate JSON-LD schema and crawl up to 50 pages — all inside Chrome's side panel, with nothing sent to a server.