Olá pessoal, hoje iremos abordar um assunto muito interessante que é a compressão de
recursos
estáticos de uma aplicação web.
O que são Recursos Estáticos
Em quase todas as aplicações web sempre há os arquivos
estáticos, eles são principalmente HTML, CSS e JavaScript, estes tipos de arquivos não mudam seu estado entre as chamadas ao servidor, ou seja, eles são sempre os mesmo independente do número de
requests que sejam feitos ao servidor Web.
Antes de detalhar a compressão dos arquivos estáticos, vamos analisar alguns pontos importantes ao importar e utilizar códigos JavaScript e CSS em nossas páginas:
- Arquivos CSS externos devem ser importados dentro da tag <head>, assim evitamos o problema de flash effect;
- Arquivos JavaScript externos devem ser importados antes do fechamento da tag <body>, assim não temos problemas no momento da renderização da tela;
- Sempre que possível agrupe seus arquivos, para evitar várias solicitações ao servidor.
A Compressão de recursos estáticos
A compressão de recursos estáticos é algo muito importante quando queremos aumentar a performance do nosso site ou sistema web, quando adicionamos uma importação de um arquivo externo, seja ele JavaScript ou CSS, é realizado o
download desse arquivo para a máquina cliente, esses
downloads, podem fazer com que nossa página tenha problemas de lentidão.
Para realizar a compressão dos arquivos, vamos utilizar a ferramenta
YUI Compressor, este é muito útil quando queremos comprimir arquivos estáticos.
O YUI Compressor, pode ser usado via linha de comando java, na página onde setamos o código fonte e é realizado a compressão, ou via Maven no momento do build da aplicação.
Utilizando o YUI Compressor com Maven
Vamos criar um projeto Java EE configurado via Maven, contendo 2 arquivos estáticos que serão comprimidos no momento do build:
 |
Projeto Java EE com arquivos estáticos.
|
Abaixo, temos o conteúdo do arquivo
jquery-1.8.3.js, antes de ser comprimido:
 |
Arquivo JavaScript sem compressão.
|
Abaixo, temos o conteúdo do arquivo
jquery-ui-1.10.3.css, antes de ser comprimido:
 |
Arquivo CSS sem compressão.
|
Abaixo, temos o conteúdo do arquivo
index.jsp:
 |
Arquivo JSP que utiliza os arquivos estáticos.
|
Para que possamos analisar o resultado e eficacia da compressão, iremos testar a aplicação sem executar o plugin do Maven no processo de build, ao solicitar o arquivo
index.jsp no
browser temos o seguinte resultado:
 |
Resultado da solicitação sem compressão.
|
Utilizando as ferramentas de desenvolvimento dos navegadores, conseguimos analisar o tamanho de cada arquivo que é solicitado ao servidor, assim temos como saber a quantidade de Bytes que será trafegada em cada solicitação.
Agora para que ao executar o processo de build (criação do artefato .war), sejam gerados os arquivos estáticos comprimidos, vamos adicionar ao arquivo
pom.xml do projeto o plugin do
yuicompressor:
<build>
<plugins>
<plugin>
<groupid>org.apache.maven.plugins</groupid>
<artifactid>maven-war-plugin</artifactid>
<version>2.0.1</version>
<configuration>
<warname>${project.artifactId}</warname>
<webresources>
<resource>
<directory>src/main/webapp</directory>
</resource>
</webresources>
</configuration>
</plugin>
<plugin>
<groupid>net.alchim31.maven</groupid>
<artifactid>yuicompressor-maven-plugin</artifactid>
<version>1.4.0</version>
<executions>
<execution>
<phase>package</phase>
<goals>
<goal>compress</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
A estrutura criada após executar o build utilizando o plugin
yuicompressor, é a seguinte:
 |
Estrutura do arquivo .war após o build com yuicompressor.
|
Agora temos o seguinte resultado ao executar o arquivo
index.jsp, este foi alterado para utilizar os arquivos comprimidos
jquery-ui-1.10.3.min.css e
jquery-1.8.3-min.js.
 |
Resultado da solicitação com compressão.
|
Com este resultado, conseguimos notar a importância de realizar a compressão de arquivos estáticos em aplicativos web, a compressão aliada a outras formas otimizações, podem contribuir para a melhora da performance das aplicações web.
Até a próxima.
Comentários
Postar um comentário