Minificador de HTML e CSS online: comprima o código

Minificador de HTML e CSS

Minificar é escrever o mesmo código com menos caracteres: sem os comentários, as indentações, as quebras de linha e tudo mais que uma pessoa precisa para ler o código e que o navegador não precisa para executá-lo. Um arquivo menor é enviado mais rápido, e isso ajuda a velocidade da página. Esta página minifica HTML e CSS ao mesmo tempo, informa quantos bytes você economizou e faz isso no seu navegador, então o código não é enviado a um servidor.

Como usar

1. Cole o código na caixa da esquerda. A ferramenta descobre se é HTML ou CSS (você também pode escolher).
2. Veja as opções abaixo das caixas e desligue o que não quiser.
3. Clique em Copiar, ou em Baixar para obter um arquivo. A linha acima dos botões mostra quantos bytes o código tinha e quantos tem agora.

O que ela faz com o CSS

• Remove os comentários. Os comentários que começam com /*! (licenças) ficam, a não ser que você desligue essa opção.
• Remove os espaços e quebras de linha e os espaços em volta de { } ; , e em volta de >, + e ~ nos seletores.
• Remove o último ponto e vírgula de uma regra: a{color:red;} vira a{color:red}.
• Abrevia as cores: #ffffff vira #fff e #aabbccdd vira #abcd.
• Remove o zero antes do ponto: 0.5em vira .5em.
• Remove as regras vazias e as regras que só têm regras vazias.

Um exemplo:

/* the button */
.btn:hover , .btn:focus {
    color : #ffffff ;
    margin : 0.5em 0 ;
    box-shadow : 0 0 0 0.2rem rgba( 0 , 123 , 255 , 0.25 ) ;
}

vira

.btn:hover,.btn:focus{color:#fff;margin:.5em 0;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}

A ferramenta nunca mexe em um texto entre aspas (content: "a b"), em um endereço em url(...) nem nos espaços de que o CSS precisa: os espaços em volta de + e - em calc(), o espaço em um seletor de descendente (a :hover não é a:hover) e o valor de uma propriedade personalizada (--name). O CSS moderno com aninhamento, @media, @supports, @layer e @keyframes é compreendido.

O que ela faz com o HTML

• Remove os comentários. Os comentários condicionais do antigo Internet Explorer (<!--[if IE]>) e os comentários que começam com <!--! ficam.
• Transforma cada sequência de espaços e quebras de linha em um só espaço e a remove onde ela não aparece: entre tags de bloco (<div>, <p>, <li>, <td> e semelhantes) e nas pontas de um bloco.
• Mantém um espaço entre elementos em linha. Em <b>a</b> <i>b</i> o espaço faz parte do texto, e sem ele as palavras ficariam coladas.
• Escreve as tags na forma curta: um espaço entre os atributos, nenhum em volta de =, um espaço entre os nomes das classes.
• Minifica o CSS em <style> e no atributo style="" e escreve o JSON-LD (<script type="application/ld+json">) sem espaços.
• Não altera <pre>, <textarea>, <script>, os textos dos atributos e entidades como  .

O que ela não faz

• O JavaScript não é minificado. O código em <script> fica como está, e a página avisa. Um minificador de JavaScript ruim quebra programas, então use uma ferramenta de build para isso.
• Ela não renomeia classes, não une regras, não remove CSS não usado, não tira as aspas dos atributos nem as tags opcionais (</li>, </p>). Ferramentas que fazem isso economizam mais alguns por cento e de vez em quando quebram uma página. Esta prefere a segurança.
• Ela não gera source map.

Quanto ela economiza

Um CSS escrito à mão com comentários e indentações costuma perder de um quinto a um terço do tamanho, e o HTML bem menos, porque a maior parte dele é texto. Se o seu servidor já comprime os arquivos com gzip ou Brotli, o ganho no tamanho transferido é menor, pois espaços repetidos comprimem bem. Você pode ver se o seu site usa isso com o verificador de Brotli e ver o peso de uma página com o verificador de tamanho de página.

Boa prática

• Guarde os arquivos originais. Não edite os minificados: eles são difíceis de ler.
• Para um site que você constrói, minifique na etapa de build (Vite, esbuild, webpack, Gulp) e não à mão. Use esta página para uma verificação rápida, para um trecho ou para um arquivo que não tem build.
• Teste o resultado. Abra a página e olhe para ela antes de colocar o código minificado em um site no ar.

Limitações

• A ferramenta lê o código como um navegador, mas não verifica se ele está correto. Um HTML ou CSS quebrado sai menor e continua quebrado.
• O tipo é descoberto pelo primeiro caractere: um código que começa com < é HTML. Escolha HTML ou CSS você mesmo se não for assim.
• Um arquivo muito grande (vários megabytes) pode deixar a página lenta, pois o trabalho é feito pelo seu navegador.
• Seu código não é salvo. Só a escolha das opções fica no navegador.