Minificação de HTML? [fechadas]

99

Existe uma ferramenta online na qual podemos inserir o código-fonte HTML de uma página e minimizar o código?

Eu faria isso para arquivos aspx, pois não é uma boa ideia fazer com que o servidor da web os gzip ...

html minify

— Paulo
fonte

19

Quando é uma má ideia ter o servidor gzip?

— Chuck,

5

Eu li isso porque as páginas aspx não são arquivos estáticos, não serão armazenadas em cache pelo IIS e então ele fará o gzip da página em cada solicitação ...

— Paulo

23

... e isso é um problema? A menos que seu servidor já esteja com 99,9% da CPU, provavelmente não. O gzip é a coisa usual e muito mais eficaz do que qualquer 'minimização'.

— bobince,

2

Isso parece ser muito interessante: perfectionkills.com/experimenting-with-html-minifier kangax.github.com/html-minifier

— StefanS

2

As respostas aqui estão desatualizadas, sem falar que algumas delas estão erradas. Verifique minha explicação sobre o problema e a ferramenta adequada .

— Salvador Dali

63

Talvez tente HTML Compressor , aqui está uma tabela antes e depois que mostra o que ele pode fazer (incluindo para o próprio Stack Overflow):

Desculpe, o markdown não tem conceito de tabelas

Ele apresenta muitas seleções para otimizar suas páginas, incluindo a minimização de scripts (ompressor, Google Closure Compiler, seu próprio compressor) onde seria seguro. O conjunto de opções padrão é bastante conservador, então você pode começar com isso e experimentar habilitar opções mais agressivas.

O projeto é extremamente bem documentado e suportado.

— Tim Post
fonte

58

Não faça isso . Ou melhor, se você insiste nisso, faça-o depois que quaisquer otimizações de site mais significativas forem concluídas. As chances são muito altas de que o custo / benefício desse esforço seja insignificante, especialmente se você estiver planejando usar ferramentas online manualmente para lidar com cada página.

Use YSlow ou Page Speed para determinar o que você realmente precisa fazer para otimizar suas páginas. Meu palpite é que reduzir bytes de HTML não será o maior problema do seu site. É muito mais provável que compressão, gerenciamento de cache, otimização de imagem, etc. façam uma grande diferença no desempenho geral do seu site. Essas ferramentas mostrarão quais são os maiores problemas - se você já lidou com todos eles e ainda acha que a minificação de HTML faz uma diferença significativa, vá em frente.

(Se você tem certeza de que deseja fazer isso e usa Apache httpd, pode considerar o uso de mod_pagespeed e ativar algumas das opções para reduzir os espaços em branco etc., mas esteja ciente dos riscos .)

— Zac Thompson
fonte

25

O que há de errado com a otimização se o código reduzido é fácil de ler usando o embelezamento automático?

12

Provavelmente não é o maior problema - mas se é um processo trivial executar a marcação por meio de um conjunto reduzido de regex durante a compilação de dev para qa ou prod, então por que você não enviaria documentos de marcação menores?

— Will Peavy

26

Na verdade, não é uma resposta à pergunta original :(

— Chuck Le Butt

7

@ Will, quase certamente não é um processo trivial executar HTML por meio da minimização de regexes e, mesmo usando um analisador adequado, provavelmente não é trivial ou rápido. Além do mais, ao contrário da minificação JS / CSS, a minificação HTML não será isenta de perdas: qualquer tag pode ser estilizada como white-space: pre, e a minificação destruiria o texto pré-formatado.

— ausência de pálpebras

3

@eyelidlessness - Atualmente, tenho milhares de páginas que são minimizadas por regexes antes de serem veiculadas. Esta função não é uma parte complexa ou cara do sistema. ... Por outro lado, se você quisesse analisar o estilo computado para evitar a minimização de elementos estilizados com white-space:pre, então sim, a minimização de HTML seria mais complexa. No entanto, não estou claro por que alguém iria querer usar o espaço em branco: pre em vez de usar um elemento preou code.

— Will Peavy

34

Aqui está uma resposta curta para sua pergunta: você deve minimizar seu HTML, CSS, JS . Existe uma ferramenta fácil de usar que é chamada de grunhido . Ele permite que você automatize muitas tarefas. Entre eles JS , CSS , minificação de HTML , concatenação de arquivos e muitos outros .

As respostas escritas aqui estão extremamente desatualizadas ou às vezes não fazem sentido. Muitas coisas mudaram desde o antigo 2009, então tentarei responder adequadamente.

Resposta curta - você definitivamente deve reduzir o HTML . É trivial hoje e dá aproximadamente 5% de aceleração . Para uma resposta mais longa, leia a resposta completa

Antigamente, as pessoas reduziam manualmente o css / js (executando-o por meio de alguma ferramenta específica para reduzi-lo). Foi meio difícil automatizar o processo e definitivamente exigia algumas habilidades. Sabendo que muitos sites de alto nível, mesmo agora, não estão usando gzip (o que é trivial), é compreensível que as pessoas relutassem em reduzir o html.

Então, por que as pessoas minimizam o js, mas não o html ? Ao minimizar JS, você faz o seguinte:

remover comentários
remova os espaços em branco (tabulações, espaços, novas linhas)
alterar nomes longos para curtos ( var isUserLoggedInpara var a)

O que deu muitas melhorias, mesmo nos velhos tempos. Mas em html não era possível mudar nomes longos para abreviar, também não havia quase nada a comentar durante esse tempo. Então, a única coisa que restou foi remover espaços e novas linhas. O que dá apenas uma pequena quantidade de melhoria.

Um argumento errado escrito aqui é que, como o conteúdo é veiculado com gzip, a minimização não faz sentido. Isso está totalmente errado. Sim, faz sentido que o gzip diminua a melhoria da minimização, mas por que você deveria fazer o gzip de comentários, espaços em branco se você pode cortá-los corretamente e gzip apenas as partes importantes. É o mesmo que se você tivesse uma pasta para arquivar que contém alguma porcaria que você nunca usará e você decidir compactá-la em vez de limpá-la e compactá-la.

Outro argumento por que é inútil fazer a minimização é que é tedioso. Talvez isso fosse verdade em 2009, mas novas ferramentas surgiram depois dessa época. No momento, você não precisa reduzir manualmente sua marcação. Com coisas como o Grunt , é trivial instalar o grunt-contrib-htmlmin (depende do HTMLMinifier por @kangax) e configurá-lo para reduzir o seu html. Tudo que você precisa é de 2 horas para aprender a grunhir e configurar tudo e então tudo é feito automaticamente em menos de um segundo. Parece que 1 segundo (que você pode até automatizar para não fazer nada com grunt-contrib-watch ) não é tão ruim para aproximadamente 5% de melhoria (mesmo com gzip).

Mais um argumento é que CSS e JS são estáticos , e HTML é gerado pelo servidor, então você não pode pré-minificá-lo. Isso também era verdade em 2009, mas atualmente mais e mais sites estão se parecendo com um aplicativo de uma única página, onde o servidor é fino e o cliente faz todo o roteamento, modelagem e outras lógicas. Portanto, o servidor está apenas fornecendo JSON e o cliente o renderiza. Aqui você tem muito html para a página e diferentes modelos.

Então, para terminar meus pensamentos:

o google está reduzindo o html.
pageSpeed está pedindo que você reduza o html
é trivial fazer
dá ~ 5% de melhoria
não é o mesmo que gzip

— Salvador Dalí
fonte

3

Minfying HTML não é absolutamente trivial, já que o espaço em branco é significativo no HTML e se algum espaço em branco pode ser removido depende do CSS. Além disso, os thin clients são terríveis e não podem, em minha opinião, ser um bom argumento contra os problemas de minimizar o HTML dinâmico. (Uma boa maneira de fazer isso é escolher um mecanismo de modelo [Haml, Jade, etc.] que não inclua espaços em branco desnecessários em sua saída renderizada.)

— Ry-

@minitech minificar HTML é trivial e também existem alguns problemas possíveis com espaços em branco (como <span>). Em primeiro lugar, você sempre pode encontrar uma maneira de escrever html válido, tornando-o independente de espaços em branco. Além disso, você pode se surpreender em saber, mas o minificador JS / CSS também pode introduzir um bug - o que não significa que você não deve usá-lo. Portanto, duas maneiras de resolver seu problema: aprender a escrever marcação agnóstica de espaço em branco, testar seu produto antes / depois da minificação (CSS / HTML / JS). Também no Minifier, você pode especificar quais espaços em branco deseja preservar.

— Salvador Dali

Minificadores JavaScript corretos em código não insano (ou seja, código que não lê a si mesmo ou trapaceia por tempo) não podem introduzir um bug. E não, nem sempre há uma maneira de escrever HTML independente de espaços em branco, especificamente porque HTML não é, novamente, independente de espaços em branco. Em absoluto. Certifique-se de fazer um teste de copiar e colar se achar que as margens vão diminuir. Especificar quais espaços em branco eu quero preservar soa como uma perda de tempo (exceto para o Google) ...

— Ry-

@minitech você pode me mostrar CSS que é impossível escrever de forma agnóstica de espaço em branco? Estou minimizando o html há muito tempo e não vi problemas até agora.

— Salvador Dali

* { white-space: pre; }é óbvio, mas se você estiver removendo todos os espaços em branco e não apenas recolhendo-os (substituindo-os pelas margens), o texto pode ser copiado incorretamente e causar estragos em navegadores de texto e leitores de tela.

— Ry-

23

Eu escrevi uma ferramenta da web para reduzir o HTML. http://prettydiff.com/?m=minify&html

Esta ferramenta opera usando estas regras:

Todos os comentários HTML são removidos

Execuções de caracteres de espaço em branco são convertidas em caracteres de espaço simples

Os caracteres de espaço em branco desnecessários dentro das tags são removidos

Os caracteres de espaço em branco entre duas tags, onde uma dessas duas tags não é um singleton, são removidos

Todo o conteúdo dentro de uma styletag é considerado CSS e é reduzido como tal

Todo o conteúdo dentro de uma scripttag é considerado JavaScript, a menos que seja fornecido um tipo de mídia diferente e, em seguida, minimizado como tal

A minificação CSS e JavaScript usa uma forma fortemente bifurcada de JSMin. Esta bifurcação é estendida para oferecer suporte nativo a CSS e também à sintaxe SCSS. A inserção automática de ponto-e-vírgula é compatível com a minificação de JavaScript, mas a inserção automática de chaves ainda não é compatível.

— austincheney
fonte

7

Olá, remove esta linha! 

— UnLoCo

1

sim, isso seria um desastre se você estiver usando o ko!

— Ray Suelzer,

8

Isso funcionou para mim:

http://minify.googlecode.com/git/min/lib/Minify/HTML.php

Não é uma ferramenta on-line já disponível, mas sendo um simples incluir PHP, é fácil o suficiente para você mesmo executá-lo.

Eu não salvaria arquivos compactados, porém, faça isso dinamicamente se realmente for necessário, e é sempre uma ideia melhor habilitar a compactação de servidor Gzip. Não sei como isso está envolvido no IIS / .Net, mas no PHP é tão trivial quanto adicionar uma linha ao arquivo de inclusão global

— adamJLev
fonte

6

CodeProject tem um projeto de amostra publicado ( http://www.codeproject.com/KB/aspnet/AspNetOptimizer.aspx?fid=1528916&df=90&mpp=25&noise=3&sort=Position&view=Quick&select=2794900 ) para lidar com algumas das seguintes situações. .

Combinar chamadas ScriptResource.axd em uma única chamada
Compacte todos os scripts do lado do cliente com base na capacidade do navegador, incluindo gzip / deflate
Um ScriptMinifier para remover comentários, recuos e quebras de linha.
Um compressor HTML para compactar toda a marcação html com base na capacidade do navegador, incluindo gzip / deflate.
E - o mais importante - um Minificador de HTML para escrever html completo em uma única linha e reduzi-lo no nível possível (em construção).

— O DBA Preguiçoso
fonte

3

Para a plataforma Microsoft .NET existe uma biblioteca chamada WebMarkupMin , que produz a minificação do código HTML.

Além disso, existe um módulo para integração desta biblioteca na ASP.NET MVC - WebMarkupMin.Mvc .

— Andrey Taritsyn
fonte

1

tente http://code.mini-tips.com/html-minifier.html , este é .NET Libary para Html Minifier

HtmlCompressor é uma biblioteca .NET pequena, rápida e muito fácil de usar que minimiza a fonte HTML ou XML fornecida, removendo espaços em branco extras, comentários e outros caracteres desnecessários, sem quebrar a estrutura do conteúdo. Como resultado, as páginas ficam menores em tamanho e carregam mais rápido. Uma versão de linha de comando do compressor também está disponível.