Minificador de HTML

O Minificador de HTML é uma ferramenta gratuita que remove caracteres desnecessários do HTML e devolve uma versão mais compacta, indicando o número de caracteres antes e depois.

O que faz a minificação de HTML?

A minificação de HTML reduz o tamanho de um documento HTML ao remover formatação desnecessária para o envio ao navegador. Normalmente, elimina indentação, quebras de linha e espaços redundantes entre elementos. O objetivo é obter uma marcação equivalente com menos caracteres.

A minificação é frequentemente aplicada durante a compilação para produção ou imediatamente antes da implementação de HTML estático. Pode reduzir a quantidade de dados transferidos, embora a compressão HTTP, como Brotli ou gzip, costume proporcionar uma redução adicional e muitas vezes superior. As duas operações complementam-se: a minificação altera o código-fonte, enquanto a compressão muda a forma como este é transmitido.

Mantém o código-fonte HTML legível e não minificado sob controlo de versões. O HTML minificado é mais difícil de rever, comparar e depurar, sobretudo quando um erro aponta para uma linha e coluna num documento que passou a ocupar uma única linha.

Como uso o Minificador de HTML?

Introduz o documento original no campo HTML e executa a ferramenta. O código compacto aparece em HTML minificado, juntamente com Caracteres do HTML e Caracteres do HTML minificado.

1. Usa o documento HTML completo ou um fragmento autónomo.
2. Executa a minificação e verifica a marcação devolvida.
3. Compara os dois números de caracteres para confirmar que a operação conseguiu uma redução útil.
4. Testa o documento HTML minificado e o respetivo resultado no navegador antes de substituíres um ficheiro em produção.

O processamento é feito no servidor. Os dados introduzidos são enviados para o servidor através de HTTPS e não são armazenados. Evita enviar código-fonte confidencial se a tua organização exigir que o processamento de código seja feito exclusivamente num computador local.

Como interpretar o resultado minificado

O resultado apresenta a marcação minificada e o número de caracteres antes e depois do processamento. Um valor inferior em Caracteres do HTML minificado indica que foram removidos caracteres, mas esta medida não corresponde ao tamanho do ficheiro transferido.

A contagem usa um método de cálculo do comprimento de texto compatível com caracteres multibyte. Assim, as letras acentuadas e os sistemas de escrita não latinos são tratados como caracteres, em vez de serem simplesmente contados como bytes individuais. Um símbolo visível composto por vários pontos de código Unicode pode, ainda assim, acrescentar mais do que um carácter à contagem.

Os campos devolvidos não incluem qualquer relatório de validação, pelo que esta ferramenta não deve ser usada como validador de HTML. Pode devolver um resultado compacto sem assinalar elementos incorretamente aninhados, IDs duplicados, etiquetas de fecho obrigatórias em falta ou valores de atributos sem aspas que contenham espaços. Uma vírgula final não é um erro de sintaxe HTML, embora possa fazer falhar conteúdo JSON ou JavaScript incorporado.

Exemplos práticos e casos problemáticos

A indentação em torno de elementos de bloco comuns é um caso simples de minificação.

Entrada, em que \n representa uma quebra de linha <main>\n <p>Ready</p>\n</main>

Forma compacta <main><p>Ready</p></main>

Os espaços dentro do texto exigem mais cuidado. Por exemplo, o espaço entre dois elementos em linha pode ser visível na página apresentada.

Entrada <span>Account</span> <span>settings</span>

Forma compacta não segura <span>Account</span><span>settings</span>

A segunda forma pode aparecer como "Accountsettings". Verifica sempre o conteúdo em linha, em vez de partires do princípio de que todos os espaços entre etiquetas podem ser eliminados.

• Os espaços e as quebras de linha dentro de <pre>, <textarea> e conteúdos semelhantes sensíveis a espaços em branco podem ser significativos.
• Os números e a pontuação presentes no texto ou nos valores dos atributos fazem parte do conteúdo do documento, não são formatação que possa ser descartada.
• Os caracteres acentuados e não latinos são texto HTML válido quando o documento utiliza a codificação de caracteres correta.
• As expressões de modelos, as diretivas do lado do servidor e os comentários condicionais podem seguir regras que um minificador de HTML genérico não compreende.
• Uma entrada HTML vazia não contém nada que valha a pena reduzir. Para um documento HTML muito extenso, usa um processo de compilação HTML repetível em vez de depender de cópias manuais.

Quando vale a pena minificar HTML?

Vale a pena minificar HTML quando é necessário preparar um ficheiro-fonte legível para utilização em produção e o resultado será servido repetidamente. Páginas de destino estáticas, compilações de documentação e modelos processados no servidor podem incluir a minificação como etapa anterior à implementação.

Normalmente, não compensa minificar HTML que já esteja minificado, pois uma nova passagem pode produzir pouca ou nenhuma redução. Também não é necessário formatar JSON ou HTML que apenas uma máquina irá ler, exceto quando alguém precisar de o depurar. No caso de HTML de terceiros, as ferramentas de programador do navegador ou um formatador costumam ser mais úteis, porque a minificação torna mais difícil analisar marcação desconhecida.

Não uses a minificação de HTML para corrigir marcação inválida ou malformada. Se a marcação se comportar de maneira diferente consoante o navegador, começa por validar e testar o código-fonte legível. Quando uma página é gerada a partir de Markdown, a ferramenta Markdown para HTML pode criar a marcação antes da etapa final de minificação para produção.

Perguntas frequentes

Posso minificar HTML com CSS ou JavaScript em linha?

O CSS e o JavaScript em linha têm gramáticas próprias, pelo que não deves partir do princípio de que a minificação de HTML também otimiza o seu conteúdo. Usa o Minificador de CSS ou o Minificador de JS nessas secções, quando for adequado. Depois, testa o documento completo, pois as sequências de etiquetas de fecho incorporadas podem afetar a análise do HTML.

O HTML minificado melhora a classificação nos motores de pesquisa?

A minificação, por si só, não torna o conteúdo mais relevante para um motor de pesquisa. Pode reduzir o volume de dados transferidos, mas a cache, a compressão, as imagens, os scripts e o tempo de resposta do servidor também afetam o carregamento da página. Preserva os títulos, os metadados, os dados estruturados e o conteúdo visível ao preparares o ficheiro para produção.

Posso minificar modelos Twig, Blade ou outros modelos HTML?

A sintaxe dos modelos não é HTML comum e pode depender de espaços ou delimitadores que um minificador genérico não reconhece. É mais seguro minificar o resultado já processado ou usar uma integração de compilação compatível com o sistema de modelos e testar um conjunto representativo de páginas.

Porque é que o número de caracteres é diferente do tamanho do ficheiro?

Os caracteres e os bytes são medidas diferentes em codificações Unicode como UTF-8. Muitos caracteres ASCII ocupam um byte, enquanto outros podem ocupar vários. Os ficheiros também podem conter uma marca de ordem de bytes ou usar terminações de linha que afetam o tamanho em bytes.

A minificação remove os comentários HTML em segurança?

Os comentários podem muitas vezes ser removidos, mas alguns contêm diretivas de compilação, instruções de inclusão do lado do servidor ou marcação de compatibilidade. Não partas do princípio de que todos os comentários são descartáveis. Se tiverem uma função operacional no teu projeto, verifica o código-fonte devolvido e a página apresentada.

Verificações finais

Compara a página apresentada antes e depois da minificação, prestando especial atenção aos espaços no conteúdo em linha, ao texto pré-formatado, aos formulários e aos scripts incorporados. Conserva o original legível, valida a marcação separadamente e só implementa a cópia minificada depois de confirmares que a página funciona como esperado.