Devo minimizar o HTML, o CSS e o JavaScript juntos?

Sim, eles geralmente são minimizados em um pipeline de compilação porque cada um tem como alvo um ativo diferente. Essa ferramenta minimiza o shell HTML e deixa deliberadamente e conteúdos intocados, então emparelhe-o com um minifier CSS para folhas de estilo e um minificador JavaScript dedicado (como Terser) para scripts. Minificar todos os três fornece a maior redução total de bytes em uma página.

A minificação quebrará meus blocos ou scripts inline?

não . Antes de qualquer transformação ser executada, o conteúdo completo dos elementos , , e é mascarado e restaurado literalmente no final. Os exemplos de código mantêm cada quebra de linha e espaço, os valores padrão da área de texto não são tocados e o JavaScript ou CSS embutido são passados por byte por byte em vez de serem reminiscados.

Quanto a minificação de HTML realmente economiza?

Páginas típicas de renderização de modelo ou geradas por modelo encolhem de 10 a 25%, principalmente por meio de recuos e comentários; a marcação profundamente aninhada e fortemente recuada pode cair mais. Além do GZIP ou do Brotli, a economia de fio é menor, mas o documento HTML é bloqueado por definição, portanto, até mesmo alguns KB fora da primeira resposta vale a pena. O selo de economia mostra seus números exatos.

O colapso em branco entre tags é seguro?

Essa ferramenta recolhe as execuções de espaços em branco para um único espaço em vez de exclui-los, que é a escolha conservadora: o HTML trata qualquer espaço em branco executado como um espaço ao renderizar, portanto, a saída visual é idêntica. A exclusão inteiramente do espaço em branco entre tags (como os minifiers agressivos podem) pode unir elementos inline visivelmente - essa é exatamente a classe de bug que essa ferramenta evita.

O que são comentários condicionais e por que mantê-los?

Comentários condicionais como ... são diretivas que o Internet Explorer legado analisada inclui marcação específica do IE. Se você ainda serve aos usuários corporativos no IE antigo ou mantém modelos de e-mail legados, despistá-los silenciosamente muda o comportamento. A opção Preservar os mantém enquanto os comentários comuns são removidos; desligue-o se você não tiver destinos legados.

O Minificador remove os valores dos atributos dentro do espaço em branco?

não . O analisador de tags tem reconhecimento de cotações, portanto, qualquer coisa dentro de aspas simples ou duplas - texto alternativo, atributos de título, JSON em linha em atributos de dados, listas de srcset - é copiado exatamente como está escrito. Apenas espaços em branco entre os atributos e a sintaxe da tag ao redor são recolhidos.

Posso cancelar a minimização de uma página que salvei da produção?

Sim - cole e clique em embelezar. As tags aninhadas obtêm recuos adequados, os elementos do bloco, cada um recebem sua própria linha e os elementos inline permanecem no fluxo de texto para que os parágrafos permaneçam legíveis. Os blocos de script e estilo mantêm sua formatação interna original; se eles também forem minimizados, execute-os por meio de um embelezador JS ou CSS dedicado separadamente.

Devo minimizar o HTML no tempo de construção?

Para aplicativos de produção, sim - coloque o HTML-Minifier-Terser ou a compactação integrada do seu framework no pipeline para que isso aconteça em todas as implantações. Essa ferramenta é para os casos que um pipeline não cobre: páginas de destino pontuais, modelos de e-mail, trechos do CMS, verificar o que um Minify Pass salvaria ou embelezando a marcação que você não criou.

Ele lida com elementos vazios como e corretamente?

Sim. Os 14 elementos de void html (br, img, input, meta, link, hr e o restante) são reconhecidos como independentes, portanto, o embelezador nunca aumenta o recuo após eles ou espera uma tag de fechamento. A sintaxe de estilo XML de fechamento automático como também é aceita e deixada conforme escrito.

A minificação mudará a forma como minha página renderiza ou afetará o SEO?

A renderização permanece inalterada porque apenas o navegador que o navegador já ignora é recolhido e os comentários são invisíveis para os usuários. Para SEO, o efeito é neutro em positivo: os mecanismos de pesquisa analisam o HTML de forma idêntica e a entrega mais rápida do documento alimenta os sinais de experiência da página como o LCP. Os dados estruturados em estão dentro de uma tag de script, portanto, são preservados exatamente.

Meu HTML foi carregado em algum lugar?

não . O Minify e o Beautify Executar inteiramente no seu navegador - nenhuma solicitação de rede é feita com sua marcação, nada é registrado ou armazenado e a ferramenta funciona offline uma vez carregada. Você pode colar páginas de produtos inéditas ou trabalhos do cliente sem uma preocupação de tratamento de dados.

Minificador de HTML e embelezador

Minify HTML Markup para carregamentos de página mais rápidos ou embeleze-o para uma fonte legível e recuada

Indent:

Minify optionsRemove commentsCollapse whitespaceKeep conditional comments

Input HTML

Output

Output will appear here...

O que é o Minifier e o Embelezador HTML?

HTML Minifier & Beautifier compacta documentos HTML removendo comentários e retrátil do espaço em branco que seus modelos e editores deixam para trás - o recuo, as linhas em branco e os espaços que os navegadores ignoram, mas todos os visitantes ainda são baixados. O documento HTML é o primeiro recurso em cada carregamento de página; nada renderiza até que ele chegue, então os bytes reduzidos aqui movem a primeira pintura de conteúdo e o tempo para as primeiras métricas de byte mais diretamente do que qualquer outro recurso. Páginas e saídas de modelos renderizadas pelo servidor rotineiramente eliminam de 10 a 25% do tamanho.

O detalhe crítico na minificação de HTML é saber o que não tocar. Esta ferramenta mascara o conteúdo dos elementos <pre>, <textarea>, <script> e <style> antes de fazer qualquer outra coisa e os restaura byte por byte depois, então os exemplos de código mantêm suas quebras de linha, os padrões da área de texto mantêm sua formatação e o javascript e os cs inline nunca são reescritos. Os valores de atributos aspas são preservados exatamente e, ou seja, os comentários condicionais podem ser mantidos mesmo quando os comentários comuns são eliminados - a mesma disciplina que um minificador de tempo de compilação como o HTML-Minifier-Terser se aplica.

O embelezador faz o contrário: é preciso uma marcação minificada ou confusa e a reindenta com a estrutura com reconhecimento de nidificação, mantendo elementos embutidos como <span>, <a> e <strong> fluindo com o texto ao redor em vez de explodir cada tag em sua própria linha. Tudo funciona 100% do lado do cliente no seu navegador - sua marcação nunca é carregada ou registrada, portanto, as páginas raspadas, as exportações do CMS e os modelos proprietários são seguros para colar e a ferramenta continua funcionando offline.

O espaço em branco em HTML nem sempre é insignificante, e é por isso que o Pre, a TextArea, o script e o estilo são deixados exatamente como são. Recolher um espaço dentro de um bloco pré muda o que o leitor vê, e um colapso dentro de um script pode mudar o que o script faz.

Como usar o Minifier e o Embelezador HTML?

Cole seu HTML
Solte um fragmento, um modelo de componente ou um documento completo na área de entrada. Aceita marcação formatada e já minimizada.
Defina suas opções
Para minificação, abra a remoção de comentários, colapso em espaços em branco e preservação de comentários condicionais. Para embelezar, escolha 2, 4 ou 8 recuos de espaço.
Clique em Minificar ou embelezar
Minify compacta a marcação enquanto protege o conteúdo <pre>, <textarea>, <script> e <style>. Beatify Reindents Tags aninhados e mantém os elementos inline legíveis. O selo de economia mostra os tamanhos exatos antes/depois.
Copie ou baixe
Copie o resultado para sua área de transferência ou faça o download como um arquivo .html pronto para implantar ou inspecionar.

Principais características

Blocos de conteúdo protegido
<pre>, <textarea>, <script> e <style> o conteúdo é mascarado e restaurado byte-for-byte - amostras de código e scripts inline nunca são mutilados
Minificação configurável
Alternância independente para remoção de comentários, colapso de espaços em branco e preservação de comentários condicionais do IE
Recolhimento seguro de atributos
Os valores de atributos cotados dentro do whiteSpace dentro de cotações são preservados exatamente, portanto, texto alternativo, atributos de dados e JSON inline sobrevivem intactos
Embelezador com reconhecimento de estrutura
Recua elementos de bloco aninhados enquanto mantém tags embutidas como <span> e <a> fluindo com seu texto; tags de vazio não precisam de par de fechamento

Frequently Asked Questions

A minificação de HTML remove as partes de um documento que um navegador ignora ao renderizar - comentários, recuo, linhas em branco e espaços à direita - para reduzir o arquivo sem alterar o que a página exibe. Como o documento HTML é o primeiro recurso em cada carregamento de página e nada renderiza até chegar, o corte de seu tamanho ajuda a métricas adjacentes a bytes e a primeira pintura de conteúdo.