Minificador CSS

Un minificador de CSS comprime una hoja de estilo eliminando todo lo que el navegador no necesita: comentarios, saltos de línea, sangrías, espacios en blanco redundantes y punto y coma al final. Las reglas no se modifican: .card { margin: 0 auto; } se convierte en .card{margin:0 auto}, por lo que la página se muestra con píxeles idénticos mientras el archivo se reduce, generalmente entre un 20% y un 40%.

Los CSS más pequeños importan más de lo que sugiere su recuento de bytes: las hojas de estilo bloquean la representación, lo que significa que el navegador no pinta nada hasta que llega el CSS. Cada kilobyte recortado proviene directamente de First Contentful Paint, una de las medidas de Google de Core Web Vitals.

Pegue su CSS y la versión minimizada aparecerá instantáneamente con una comparación de tamaños (original versus comprimido) lista para copiar en producción.

Cuando un minificador independiente es la herramienta adecuada: sitios sin un proceso de compilación (cuadros CSS personalizados de WordPress, ajustes del tema de Shopify, sitios codificados a mano, plantillas de correo electrónico); comprobar lo que realmente produce su herramienta de construcción; y comprimir el pequeño bloque CSS crítico que insertas en . Los proyectos que utilizan paquetes (Vite, webpack) ya se minimizan en la compilación; esta herramienta cubre todo el CSS que se encuentra fuera de esa canalización.

Consejo de flujo de trabajo: conserve el archivo fuente legible y pegue la salida minimizada solo donde se envía. La minificación es unidireccional en la práctica: editar CSS minimizado es una miseria, así que trate el resultado como un artefacto de compilación, no como una copia de trabajo. El procesamiento ocurre en su navegador; tus estilos nunca se cargan.