Minificador de CSS, JavaScript e HTML — código menor e mais rápido

O que é um Minificador de código?

Um Minificador de código (कोड मिनिफ़ायर) deixa arquivos CSS, JavaScript e HTML menores sem mudar o que eles fazem. O código escrito para humanos está cheio de coisas de que os navegadores não precisam: comentários que explicam decisões, recuos, linhas em branco, nomes de variáveis longos e descritivos e pontos e vírgulas opcionais. Cada um desses caracteres precisa ser baixado por cada visitante. A minificação os elimina, então as páginas baixam e são analisadas mais rápido — o que ajuda visitantes com dados móveis lentos, melhora os Core Web Vitals e pode favorecer posições melhores nas buscas.

Esta ferramenta grátis minifica as três linguagens da web num só lugar. CSS e HTML são minificados na hora por nossos minificadores cuidadosos, que protegem strings, valores de url(), expressões calc() e elementos sensíveis a espaços em branco. O JavaScript é minificado pelo Terser, o mesmo mecanismo usado por ferramentas de build populares, com encurtamento opcional de nomes de variáveis. Você vê o tamanho original, o tamanho minificado e a porcentagem economizada e pode baixar o resultado — tudo sem enviar seu código para lugar nenhum.

Principais recursos

• Três linguagens — CSS, JavaScript e HTML.
• Terser para JavaScript — compressão, remoção de código morto e encurtamento opcional.
• Minificação segura de CSS — strings, valores url() sem aspas e calc() nunca são quebrados.
• Minificação conservadora de HTML — conteúdo de pre, textarea, script e style intocado.
• Comentários de licença mantidos — avisos /*! … */ preservados por padrão.
• CSS em linha — minifique opcionalmente blocos <style> dentro do HTML.
• Relatório de economia em bytes e porcentagem.
• Abra, copie e baixe arquivos .min.

Como minificar código — passo a passo

1. Escolha a aba da linguagem.
2. Cole seu código ou clique em Abrir arquivo. Um exemplo vem carregado para você ver como funciona.
3. Defina as opções — manter comentários de licença, encurtar nomes (JS), minificar estilos em linha (HTML).
4. Pressione Minificar (CSS e HTML também se atualizam automaticamente enquanto você digita).
5. Confira a economia e a mensagem para ver se há erros.
6. Copie ou baixe o arquivo minificado.

Exemplo resolvido

A folha de estilo de exemplo desta página tem 333 bytes, com um comentário de licença, um comentário comum, recuos e espaços ao redor de dois-pontos e chaves. Minificada, ela passa para 248 bytes — cerca de 25.5% menor:

/*! Theme v1 | MIT */ .card{margin:0 auto;padding:16px 24px;width:calc(100% - 2rem);background:url("img/bg one.png") no-repeat}.card>h2,.card .title:hover{color:#1B98E0;font-family:"Open Sans",sans-serif}@media (max-width:600px){.card{padding:8px}}

Repare no que foi mantido: o comentário de licença, os espaços dentro de calc(), o espaço dentro do nome de arquivo entre aspas, o espaço em «.card .title» (que significa «um .title dentro de .card») e o espaço depois de «@media». O HTML de exemplo encolhe cerca de 28%, enquanto o bloco <pre> mantém o espaçamento exato.

Como a minificação de CSS funciona aqui

• Os comentários são removidos, exceto os comentários de licença /*! se você os mantiver.
• As strings entre aspas e os valores de url() sem aspas são copiados exatamente.
• Sequências de espaços em branco são reduzidas, e os espaços ao redor de { } ; , e > são removidos.
• Os espaços antes de dois-pontos são removidos dentro de declarações, mas mantidos em seletores, porque «a :hover» e «a:hover» significam coisas diferentes.
• O último ponto e vírgula antes de uma chave de fechamento é removido.
• Os espaços junto de + e - nunca são tocados, então calc(), seletores irmãos e valores negativos continuam válidos.

O minificador não reescreve cores, não encurta zeros nem mescla regras — otimizações que economizam um pouco mais, mas trazem mais risco. Para uma otimização agressiva em um pipeline de build, ferramentas como cssnano ou Lightning CSS vão mais longe.

Minificação de JavaScript com o Terser

O Terser analisa seu JavaScript em uma árvore sintática, aplica transformações seguras — remover código morto, avaliar constantes, encurtar expressões — e o imprime de volta sem espaços em branco desnecessários. Com o encurtamento ligado, nomes de variáveis e funções locais como monthlyRate viram letras únicas. Nomes globais e propriedades de objetos são deixados em paz, porque alterá-los poderia quebrar código em outros lugares. A função de EMI de exemplo vira uma única linha curta que calcula exatamente o mesmo resultado. Se o seu código tem um erro de sintaxe, o Terser informa a linha e a coluna para você corrigir.

Minificação de HTML sem surpresas

Os espaços em branco do HTML às vezes têm significado: dois links separados por um espaço parecem diferentes de dois links encostados, e tudo dentro de <pre> ou <textarea> é exibido exatamente como está. Por isso este minificador remove comentários (mas mantém os antigos comentários condicionais do Internet Explorer), reduz sequências de espaços em branco a espaços únicos, remove espaços em branco entre tags de bloco e restaura um único espaço entre elementos comuns em linha. Scripts e estilos são protegidos; blocos <style> em linha podem ser minificados opcionalmente com o minificador de CSS.

Minificação, compressão e velocidade da página

A minificação e a compressão do servidor (gzip ou Brotli) se complementam. Uma folha de estilo típica pode encolher 25% com a minificação e mais 70–80% durante a transferência comprimida. Junto com cache, otimização de imagens (experimente nosso Compressor de imagens) e menos recursos que bloqueiam a renderização, os recursos minificados ajudam as páginas a obter boas pontuações de Largest Contentful Paint. Ferramentas como o Google PageSpeed Insights apontam CSS e JavaScript não minificados como uma oportunidade — este minificador é um jeito rápido de resolver isso em sites pequenos sem sistema de build.

Um fluxo de trabalho simples para sites pequenos

1. Guarde seus arquivos editáveis como style.css e script.js numa pasta de origem.
2. Quando estiver pronto para publicar, minifique cada um aqui e salve como style.min.css e script.min.js.
3. Referencie os arquivos .min no seu HTML, acrescentando um número de versão como ?v=20261018 para que os navegadores busquem a cópia nova.
4. Envie os arquivos minificados e teste a página no ar no computador e no celular.
5. Na próxima vez que mudar algo, edite o arquivo-fonte e repita — nunca edite o arquivo .min diretamente.

Quando um projeto cresce além de um punhado de arquivos, automatize esses passos com uma ferramenta de build como Vite, esbuild ou webpack, que executam o Terser e minificadores de CSS por você a cada build.

Depurando código minificado

O código minificado é difícil de ler, então os erros em produção muitas vezes apontam para «linha 1, coluna 4,312». As ferramentas de build resolvem isso com source maps, arquivos que mapeiam as posições minificadas de volta para o seu código original; as ferramentas de desenvolvedor dos navegadores os carregam automaticamente. Este minificador online não produz source maps, e esse é mais um motivo para guardar seus arquivos originais: se algo quebrar, reproduza o problema primeiro com a versão não minificada, corrija-o ali e minifique de novo.

Usos comuns

• Minificar folhas de estilo e scripts de pequenos sites estáticos.
• Reduzir o código antes de enviá-lo para hospedagens compartilhadas como a Hostinger.
• Reduzir o tamanho de modelos de e-mail HTML, em que alguns clientes cortam mensagens muito grandes.
• Preparar trechos para widgets, bookmarklets e embeds.
• Conferir quanto uma etapa de build economizaria.
• Corrigir os avisos «minificar CSS / JavaScript» do PageSpeed.
• Reduzir scripts e estilos em linha em landing pages feitas à mão.

Erros comuns a evitar

• Sobrescrever o original — guarde os arquivos-fonte legíveis e salve as cópias minificadas separadamente.
• Esquecer de atualizar os links — aponte suas páginas para style.min.css e script.min.js.
• Encurtar nomes em código que os usa em tempo de execução (por exemplo, function.name ou a injeção de dependências de alguns frameworks).
• Não atualizar as versões do cache — os navegadores podem manter o arquivo antigo; adicione uma query de versão como ?v=2.
• Pular os testes depois da minificação.

Solução de problemas

• Erro de JavaScript com linha e coluna — corrija o erro de sintaxe na sua origem e minifique de novo.
• «Não foi possível carregar o minificador de JavaScript» — a primeira minificação de JS precisa de internet para buscar o Terser.
• O layout fica diferente após a minificação do HTML — um espaço entre elementos em linha pode importar; adicione &nbsp; ou ajuste a origem.
• Economia muito pequena — o código provavelmente já era compacto ou minificado.
• Comentário de licença ausente — confira se «Manter comentários /*! licença */» está marcado e se o comentário começa com /*!.
• Saída vazia — cole algum código primeiro; a mensagem explica qualquer problema encontrado.

Glossário rápido

• Minificação: remover caracteres desnecessários para a execução.
• Encurtamento (mangling): renomear variáveis locais para nomes mais curtos.
• Código morto: código que nunca pode rodar, seguro de remover.
• Source map: um arquivo que mapeia o código minificado de volta ao original para depuração.
• gzip / Brotli: compressão no lado do servidor aplicada durante a transferência.
• Recurso que bloqueia a renderização: CSS ou JS que atrasa a primeira pintura de uma página.
• Embelezador / formatador: o oposto de um minificador — devolve o recuo para facilitar a leitura.
• Cache busting: mudar o nome de um arquivo ou a query de versão para que os navegadores baixem o arquivo atualizado.

Por que usar este Minificador?

Ele trata CSS, JavaScript e HTML num só lugar, usa um mecanismo comprovado para JavaScript, protege as partes complicadas do CSS e do HTML, mostra a economia real e mantém seu código privado — grátis e sem cadastro.

Minificador de CSS / JS / HTML — Informações principais

Perguntas frequentes

Conheça mais ferramentas da Prompt Minds

O Minificador de CSS / JS / HTML funciona muito bem junto com nossas outras ferramentas grátis. Todas as ferramentas do Prompt Minds rodam inteiramente no seu navegador — sem cadastro, sem uploads, sem marca d’água. Ver todas as ferramentas grátis.