Compressor de bundle CSS

• Compressão de bundle CSS instantânea: comprima qualquer bundle CSS na hora, no seu navegador, sem envio a servidor e sem ferramentas de build. Nosso compressor de bundle CSS minifica seu CSS e calcula o tamanho GZIP exato e o Brotli estimado com um clique.
• Compressor de bundle CSS online e seguro: seu bundle CSS nunca sai do seu dispositivo ao usar este compressor de bundle CSS. O processamento 100% no lado do cliente garante privacidade total: sem armazenamento na nuvem, sem logs de servidor e sem expor suas folhas de estilo.
• Compressor de bundle CSS sem instalação: comprima bundles CSS direto no navegador, sem pacotes npm, sem ferramentas de build e sem conta. Este compressor de bundle CSS gratuito funciona em qualquer navegador moderno e em qualquer sistema operacional.
• Trechos de configuração do servidor e análise do bundle: receba trechos de configuração de nginx e Apache prontos para ativar a compressão GZIP e Brotli, além de um painel de análise com o número de regras, seletores, comentários e media queries.

• Otimização de Core Web Vitals: use o compressor de bundle CSS para reduzir o tamanho do bundle antes do deploy. Bundles CSS menores reduzem o tempo de bloqueio de renderização e melhoram as notas de LCP e FCP; os trechos de configuração facilitam ativar o GZIP no seu CDN.
• Acompanhamento do orçamento de tamanho: use o compressor de bundle CSS para verificar se o bundle CSS cabe no seu orçamento de performance. Veja os tamanhos minificado, GZIP e Brotli em uma só tela: os mesmos números que sua ferramenta de build reporta em produção.
• Auditoria de CSS antes do deploy: passe seu bundle CSS pelo compressor de bundle CSS antes de cada deploy para detectar excesso de código cedo. O painel de análise mostra o número de regras, seletores e comentários, útil para identificar CSS não utilizado.
• Configuração de CDN e servidor: use o compressor de bundle CSS para obter trechos de configuração de nginx e Apache prontos para ativar a compressão GZIP e Brotli nos seus arquivos CSS. Copie e cole direto na configuração do seu servidor.
• Relatórios de performance para clientes: use o compressor de bundle CSS para gerar dados de tamanho de CSS em relatórios de performance. Mostre o tamanho original, o minificado, o GZIP e o Brotli para justificar recomendações de otimização de CSS.
• Otimização de performance em celulares: use o compressor de bundle CSS para quantificar a economia de CSS para usuários móveis. Com 100.000 visitantes móveis por dia, reduzir um bundle CSS de 50 KB para 12 KB com GZIP economiza 3,8 GB de dados móveis por dia.

A compressão de bundle CSS é o processo de reduzir o tamanho de uma folha de estilos CSS com duas técnicas complementares: minificação (remover espaços em branco e comentários e aplicar otimizações de forma abreviada) e compressão de transporte (codificação GZIP ou Brotli aplicada pelo servidor web antes de enviar o arquivo ao navegador). Nosso compressor de bundle CSS aplica as duas: minifica seu CSS com um minificador em JS puro e depois calcula o tamanho GZIP exato com a API CompressionStream nativa do navegador. O tamanho Brotli é estimado em cerca de 18% menor que o GZIP, com base nas taxas típicas de compressão Brotli para CSS.

1. 1 Envie ou cole seu bundle CSS: arraste e solte um arquivo .css ou cole seu CSS direto na área de entrada. O compressor de bundle CSS aceita qualquer CSS válido: bundles de frameworks, folhas de estilo de componentes, CSS de e-mail ou folhas de estilo próprias.
2. 2 Compressão instantânea no navegador: clique em “Comprimir bundle” e o compressor de bundle CSS minifica seu CSS, calcula o tamanho GZIP exato via API CompressionStream do navegador e estima o tamanho Brotli. Nenhum dado é enviado a servidores.
3. 3 Baixe e configure seu servidor: baixe o arquivo CSS minificado e copie o trecho de configuração de nginx ou Apache pronto para ativar a compressão GZIP e Brotli nos seus arquivos CSS.

• Remoção de comentários: todos os comentários CSS são removidos; eles costumam representar 5 a 15% do tamanho de um bundle CSS em builds de desenvolvimento.
• Redução de espaços em branco: todos os espaços, quebras de linha e indentação são removidos; eles costumam representar 20 a 40% do tamanho de um bundle CSS formatado.
• Otimizações de forma abreviada: cores hexadecimais são normalizadas e encurtadas (#aabbcc → #abc), valores zero são abreviados (0px → 0) e font-weight é abreviado (bold → 700, normal → 400).
• Ponto e vírgula finais: o último ponto e vírgula antes de uma chave de fechamento é removido; isso é válido pela especificação CSS e economiza um byte por regra.

A minificação reduz o tamanho do arquivo armazenado em disco e servido ao navegador. A compressão de transporte (GZIP/Brotli) reduz os bytes transferidos pela rede; o navegador descompacta o arquivo automaticamente. As duas devem ser combinadas: minifique primeiro e depois ative GZIP ou Brotli no servidor. O compressor de bundle CSS mostra os três tamanhos para você ver o efeito combinado. Um bundle CSS típico vai de 100 KB (original) → 70 KB (minificado) → 15 KB (GZIP), uma redução total de 85%.