Cómo usar: Minificador CSS
- Pega tu CSS, arrastra un archivo
.cssal área de entrada o haz clic en Ejemplo. - Deja activadas las optimizaciones (todas son seguras) o desmarca las que no quieras.
- Revisa el ahorro debajo del editor y luego haz clic en Copiar o Descargar
styles.min.css. - ¿Necesitas leer un archivo minificado? Cambia a Embellecer.
¿Qué es la minificación de CSS?
La minificación de CSS elimina cada byte que el navegador no necesita —comentarios, sangrías, saltos de línea y el último punto y coma de cada regla— y reescribe algunos valores como equivalentes más cortos. La hoja de estilos resultante es funcionalmente idéntica, pero más pequeña, así que se descarga y se analiza más rápido. Como el CSS bloquea el renderizado, una hoja de estilos más pequeña puede mejorar directamente el First Contentful Paint y el Largest Contentful Paint.
Qué cambia este minificador
| Optimización | Antes | Después |
|---|---|---|
| Comentarios y espacios en blanco | /* Buttons */ .btn , .link { … } | .btn,.link{…} |
| Último punto y coma | {color:red;} | {color:red} |
| Colores | #FFFFFF, #aabbccdd | #fff, #abcd |
| Unidades en cero | margin:0px 0em | margin:0 0 |
| Números | 0.50rem, 1.0 | .5rem, 1 |
| Reglas vacías | .unused{} | (eliminada) |
Por qué es seguro
Los minificadores agresivos a veces rompen las hojas de estilos. Este solo aplica transformaciones que no pueden cambiar el comportamiento:
- Las cadenas, los valores de
url()y los caracteres escapados están protegidos y nunca se modifican. - Las unidades solo se eliminan en longitudes:
0s,0degy0%conservan la suya (transition: 0sy los selectores de fotogramas clave las necesitan), y nada dentro decalc(),min()oclamp()se toca, porquecalc(0 + 10px)no es válido. - La forma abreviada
flexse omite (flex: 1 1 0pxyflex: 1 1 0no siempre son iguales en motores antiguos), y los valores de propiedades personalizadas solo pierden espacios redundantes. - Los espacios en los selectores se conservan cuando tienen significado:
a :hover(cualquier descendiente con el cursor encima) es distinto dea:hover. @layer name {}se conserva aunque esté vacío, porque declara el orden de las capas. Los comentarios de licencia que empiezan por/*!se mantienen de forma predeterminada.
Minificación frente a compresión
La minificación y la compresión gzip/Brotli se complementan. La compresión elimina las repeticiones; la minificación elimina los bytes que la compresión no puede quitar, como los comentarios. La cifra Salida comprimida con gzip muestra aproximadamente lo que viajará por la red si tu servidor comprime las respuestas (la mayoría lo hace). Para obtener la mayor mejora, elimina también las reglas no usadas con una herramienta como PurgeCSS e incluye en línea solo el CSS crítico del contenido visible al cargar la página.
¿Quieres inspeccionar un archivo minificado? Usa el modo Embellecer de aquí o el CSS Formatter. ¿Quieres revisar el rendimiento de una página completa? Ejecuta una prueba de velocidad de página.
También se busca como: minificar css, compresor css, comprimir css, optimizador css, reducir tamaño css, minificador css online, alternativa a cssnano, css uglify.
Herramientas que combinan con: Minificador CSS
- Formateador HTML — Pega HTML minificado o desordenado y obtén HTML limpio y con sangría coherente, incluidos los bloques <style> y <script> incrustados.
- Formateador de JavaScript — Desminifica y da formato a JavaScript, JSON o JSX con la sangría y el estilo de llaves que prefieras, o elimina espacios y comentarios con un minificador verificado.
- Compresor de imágenes — Reduce el tamaño de las fotos y los gráficos entre un 50 % y un 90 % sin que se note ninguna pérdida de calidad.
- Formateador SQL — Pega una consulta o una migración completa y obtén SQL legible, con una cláusula por línea, joins alineados y mayúsculas coherentes, siguiendo la gramática de tu base de datos.
Preguntas frecuentes
¿Minificar puede romper mi CSS?
calc()). Si tu CSS original tiene un error de sintaxis, el error se mantiene en la salida, así que valida el CSS que se comporte de forma extraña.¿Cuánto se reducirá mi CSS?
¿Debo seguir usando gzip o Brotli?
¿Por qué se mantienen algunos comentarios?
/*! contienen por convención avisos de licencia que deben permanecer con el código. Desmarca «Mantener comentarios /*! license */» para eliminarlos también.