Compresor de paquetes CSS

• Compresión de paquetes CSS al instante: comprime cualquier paquete CSS al instante en tu navegador, sin subirlo a un servidor ni usar herramientas de compilación. Nuestro compresor de paquetes CSS minifica tu CSS y calcula el tamaño GZIP exacto y el Brotli estimado con un solo clic.
• Compresor de paquetes CSS online y seguro: tu paquete CSS nunca sale de tu dispositivo cuando usas este compresor de paquetes CSS. El procesamiento 100 % en el cliente garantiza una privacidad total: sin almacenamiento en la nube, sin registros del servidor y sin exponer tus hojas de estilos.
• Compresor de paquetes CSS sin instalación: comprime paquetes CSS directamente en tu navegador sin paquetes npm, sin herramientas de compilación y sin cuenta. Este compresor de paquetes CSS gratuito funciona en cualquier navegador moderno y en cualquier sistema operativo.
• Fragmentos de configuración del servidor y análisis del paquete: obtén fragmentos de configuración de nginx y Apache listos para usar y activa la compresión GZIP y Brotli. Además, un panel de análisis del paquete muestra el número de reglas, selectores, comentarios y consultas de medios.

• Optimización de Core Web Vitals: usa el compresor de paquetes CSS para reducir el tamaño del paquete antes de desplegarlo. Los paquetes CSS más pequeños reducen el tiempo de bloqueo del renderizado y mejoran las puntuaciones LCP y FCP; los fragmentos de configuración facilitan activar GZIP en tu CDN.
• Seguimiento del presupuesto de tamaño del paquete: usa el compresor de paquetes CSS para comprobar si tu paquete CSS cabe en tu presupuesto de rendimiento. Consulta los tamaños minificado, GZIP y Brotli en una sola vista: los mismos números que reporta tu herramienta de compilación en producción.
• Auditoría de CSS antes del despliegue: pasa tu paquete CSS por el compresor de paquetes CSS antes de cada despliegue para detectar el exceso de código a tiempo. El panel de análisis muestra el número de reglas, selectores y comentarios, útil para identificar CSS sin usar.
• Configuración de CDN y servidor: usa el compresor de paquetes CSS para obtener fragmentos de configuración de nginx y Apache listos para activar la compresión GZIP y Brotli en tus archivos CSS. Cópialos y pégalos directamente en la configuración de tu servidor.
• Informes de rendimiento para clientes: usa el compresor de paquetes CSS para generar datos de tamaño de CSS en informes de rendimiento para clientes. Muestra el tamaño original, el minificado, el GZIP y el Brotli para justificar tus recomendaciones de optimización de CSS.
• Optimización del rendimiento en móviles: usa el compresor de paquetes CSS para cuantificar el ahorro de CSS en usuarios móviles. Con 100 000 visitantes móviles diarios, reducir un paquete CSS de 50 KB a 12 KB con GZIP ahorra 3,8 GB de datos móviles al día.

La compresión de paquetes CSS es el proceso de reducir el tamaño de archivo de una hoja de estilos CSS mediante dos técnicas complementarias: la minificación (eliminar espacios en blanco y comentarios y aplicar optimizaciones de forma abreviada) y la compresión de transporte (codificación GZIP o Brotli que aplica el servidor web antes de enviar el archivo al navegador). Nuestro compresor de paquetes CSS aplica ambas: minifica tu CSS con un minificador de JS puro y luego calcula el tamaño GZIP exacto con la API CompressionStream nativa del navegador. El tamaño Brotli se estima un 18 % más pequeño que GZIP, según las tasas típicas de compresión Brotli para contenido CSS.

1. 1 Sube o pega tu paquete CSS: arrastra y suelta un archivo .css o pega tu CSS directamente en el área de entrada. El compresor de paquetes CSS acepta cualquier CSS válido: paquetes de frameworks, hojas de estilos de componentes, CSS de correo electrónico o hojas de estilos propias.
2. 2 Compresión instantánea en el navegador: haz clic en «Comprimir paquete» y el compresor de paquetes CSS minifica tu CSS, calcula el tamaño GZIP exacto con la API CompressionStream del navegador y estima el tamaño Brotli. No se envía ningún dato a ningún servidor.
3. 3 Descarga y configura tu servidor: descarga el archivo CSS minificado y copia el fragmento de configuración de nginx o Apache listo para usar para activar la compresión GZIP y Brotli en tus archivos CSS.

• Eliminación de comentarios: se eliminan todos los comentarios CSS, que suelen representar entre el 5 y el 15 % del tamaño de un paquete CSS en las compilaciones de desarrollo.
• Compactación de espacios en blanco: se eliminan todos los espacios, saltos de línea y sangrías, que suelen representar entre el 20 y el 40 % del tamaño de un paquete CSS formateado.
• Optimizaciones de forma abreviada: los colores hexadecimales se normalizan y se acortan (#aabbcc → #abc), los valores cero se abrevian (0px → 0) y el font-weight se abrevia (bold → 700, normal → 400).
• Puntos y coma finales: se elimina el último punto y coma antes de una llave de cierre, lo que es válido según la especificación CSS y ahorra un byte por regla.

La minificación reduce el tamaño del archivo almacenado en disco y servido al navegador. La compresión de transporte (GZIP/Brotli) reduce los bytes transferidos por la red; el navegador descomprime el archivo automáticamente. Conviene aplicar ambas: primero minifica y luego activa GZIP o Brotli en tu servidor. El compresor de paquetes CSS muestra los tres tamaños para que veas el efecto combinado. Un paquete CSS típico pasa de 100 KB (original) → 70 KB (minificado) → 15 KB (GZIP): una reducción total del 85 %.