HTMLCompressor – Otimização front-end
Tempos atrás comecei a procurar por maneiras que possibilitassem a otimização de páginas web em aplicações Java. Por fim, acabei encontrando uma biblioteca Java chamada HtmlCompressor no Google Code.
Esta biblioteca é de fácil uso e tem como objetivo minificar o código fonte de páginas web, removendo espaços em brancos desnecessários, blocos de comentários e caracteres inexpressivos. Além disso, se sua página contém blocos de códigos CSS e JS, eles também poderão ser minificados. E o mais importante, sem afetar a estrutura da página. Como resultado as páginas tornam-se menores em tamanho e assim, mais rápidas de serem carregadas pelo browser.
1. Obtendo a HtmlCompressor
Faça o download da biblioteca HtmlCompressor clicando aqui. Para a compressão de blocos CSS e JS é necessário usar a biblioteca YUICompressor, uma dependencia da HtmlCompressor. Faça o download clicando aqui.
Você também pode fazer o download através do Maven. Porem até este momento, as versões mais atuais de ambas as bibliotecas não estão disponíveis pelo Maven, são elas: HtmlCompressor-1.5.3 e YUICompressor-2.4.8.
2. Adicionando a HTMLCompressor em um projeto
Para configurar a HtmlCompressor em projetos Java Web é muito simples, basta adicionar nas páginas JSP a taglib apresentada na Listagem 1.
<%@ taglib uri="http://htmlcompressor.googlecode.com/taglib/compressor" prefix="compress" %>
Após isto, utilize entre as marcações <compress:html> ... </compress:html> o código HTML que você deseja minificar. Veja um breve exemplo na Listagem 2. Você pode utilizar as masrcações em trechos especificos de seu código ou mesmo uma única marcação para todo a página.
<compress:html> <div class="span6"> <h4>Subheading</h4> <p>Donec id elit non mi porta gravida at eget metus.</p> <h4>Subheading</h4> <p>Cras mattis consectetur purus sit amet fermentum.</p> </div> </compress:html>
3. Propriedades disponíveis
Além de minificar o código HTML, é possível também configurar a HtmlCompressor para minificar blocos de código CSS e JS. Outro recurso interessante é a possibilidade de remover comentários existentes no código HTML. Veja na Listagem 3 como configurar cada uma destas propriedades.
<compress:html removeComments="true" compressCss="true" compressJavaScript="true> ... </compress:html>
Montei um pequeno projeto para demonstrar os resultados do uso da HtmlCompressor. Veja na imagem a seguir um exemplo da página que será usada como exemplo neste tutorial.
Logo a seguir, na Listagem 4, é possível conferir o código fonte da página antes de ser minificado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template · Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 40px;
}
/* Custom container */
.container-narrow {
margin: 0 auto;
max-width: 700px;
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
margin: 60px 0;
text-align: center;
}
.jumbotron h1 {
font-size: 72px;
line-height: 1;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
/* Supporting marketing content */
.marketing {
margin: 60px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
</style>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css"
rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://getbootstrap.com/2.3.2/assets/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="container-narrow">
<div class="masthead">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li>
<a href="https://code.google.com/p/htmlcompressor/downloads/list"
target="_blank">HtmlCompressor</a>
</li>
<li>
<a href="http://www.yuiblog.com/blog/2013/05/16/yuicompressor-2-4-8-released/"
target="_blank">YUICompressor</a>
</li>
</ul>
<h3 class="muted">Tutorial HTML COMPRESSOR</h3>
</div>
<hr>
<div class="jumbotron">
<h1>HTML COMPRESSOR</h1>
<p class="lead">
<a href="http://www.mballem.com" target="_blank">www.mballem.com</a>
</p>
<button class="btn btn-large btn-success">Remove Subheadings</button>
</div>
<hr>
<div id="del" class="row-fluid marketing">
<div class="span6">
<h4>Subheading</h4>
<p>Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
</div>
<hr>
<div class="footer">
<p>© Company 2013</p>
</div>
</div>
<!-- /container -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$("button").click(function () {
$("div").remove("#del");
});
</script>
</body>
</html>
5. Minificando o código da página.
Na Listagem 5 temos um exemplo de como será minificado o código HTML, CSS e JS, além de remover os comentários do código. Para isso, será adicionada a marcação <compress:html> logo após a marcação <html> da página JSP.
<%@ taglib uri="http://htmlcompressor.googlecode.com/taglib/compressor" prefix="compress" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> <html lang="en"> <compress:html removeComments="true" compressCss="true" compressJavaScript="true"> <head> ... </head> ... </compress:html> </html>
Após executar a aplicação e a página ser aberta no browser, é possível confirmar se o código foi minificado usando o recurso “Exibir Código Fonte” do navegador. Na Listagem 6 temos o resultado desta operação.
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8"> <title>Template · Bootstrap</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet"> <style type="text/css">body{padding-top:20px;padding-bottom:40px}.container-narrow{margin:0 auto;max-width:700px}.container-narrow>hr{margin:30px 0}.jumbotron{margin:60px 0;text-align:center}.jumbotron h1{font-size:72px;line-height:1}.jumbotron .btn{font-size:21px;padding:14px 24px}.marketing{margin:60px 0}.marketing p+h4{margin-top:28px}</style> <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet"> <!--[if lt IE 9]>
Note que o código apresentado na Listagem 6 ficou extremamente reduzido em relação ao código da Listagem 4. Isto porque os espaços em branco e comentários foram removidos. A biblioteca tenta também colocar o código em uma única linha, o que torna mais rápido o carregamento da página pelo navegador. O código CSS e também JS foram igualmente minificados. Se não tivéssemos habilitado as propriedades compressCSS e compressJavaScript estes códigos estariam com sua estrutura normal, como no exemplo da apresentado na Listagem 4.
Saiba mais:
- HtmlCompressor – https://code.google.com/p/htmlcompressor/
- YUICompressor – http://www.yuiblog.com/blog/2013/05/16/yuicompressor-2-4-8-released/
