Reduce el tamaño de tu CSS
Cada byte de CSS debe descargarse y analizarse antes de que una página pueda renderizarse, por lo que las hojas de estilo más pequeñas significan un primer renderizado más rápido, mejores Core Web Vitals y menos consumo de datos móviles. Este minificador de CSS elimina espacios en blanco y comentarios, y aplica optimizaciones estructurales —combinando reglas duplicadas, acortando colores y eliminando valores redundantes— para que tu hoja de estilos sea lo más pequeña posible sin cambiar la apariencia de la página.
Características
- Eliminación de espacios en blanco y comentarios.
- Acortamiento de valores: colores, ceros, unidades y pesos de fuente.
- Optimización estructural: combina selectores duplicados y elimina declaraciones sobrescritas.
- Comentarios de licencia (
/*! … */) conservados a petición. - Comparación de tamaño en bytes y porcentaje.
- Privado: se ejecuta completamente en tu navegador.
Antes y después
.card .title {
font-weight: bold;
color: #333333;
}
.card .title {
font-size: 1.25em;
}
se convierte en
.card .title{font-weight:700;color:#333;font-size:1.25em}
Cuándo minificar
Minifica tu CSS como parte de tu proceso de compilación para producción, y mantén el código fuente legible en el control de versiones. La mayoría de los frameworks y empaquetadores lo hacen automáticamente; esta herramienta es útil para ajustes rápidos, temas de CMS, plantillas de correo electrónico, widgets integrados y proyectos sin un paso de compilación.
Herramientas relacionadas
Minifica scripts con el Minificador de JavaScript, crea estilos visualmente con el Generador de Box Shadow y el Generador de Degradados CSS, o formatea JSON con el Formateador de JSON.