KADUNEW

Técnicas e ferramentas para melhorar a performance de sites

—

por

Kadu Oliveira
em
Dicas para otimizar a velocidade do sei site
Dicas para otimizar a velocidade do sei site

Um bom desempenho no requisito velocidade é o primeiro passo para atrair visitas e melhorar a experiência do usuário. Pessoas detestam esperar, principalmente na Internet. Os buscadores como o Google usam o fator velocidade de carregamento nos rankings de busca. Entregar um site lento e pesado para seus usuários é um dos Crimes de usabilidade que você não deve cometer nunca.

Apresento algumas sugestões para melhorar o tempo de carregamento do seu site. As melhores práticas para otimizar arquivos, imagens, requisições e muito mais. Com toda certeza, seguindo essas dicas seu site vai decolar.

Vale lembrar que um carregamento lento pode ser um dos motivos do seu site não aparecer no Google. Isso porque tempo de carregamento é um fator de classificação para o Google.

Otimize suas imagens

Aqui talvez a principal dica para melhorar a performance do seu site.

Imagens são as principais responsáveis por deixarem um site lento e com baixa performance. Na grande maioria das vezes conseguimos diminuir o tamanho de uma página em mais de 50% apenas otimizando as imagens.

Compactando imagens para melhorar performance
Exemplo de otimização de imagem

Há ferramentas de otimização que retiram da imagem informações desnecessárias sem interferir na qualidade da imagem. Essas ferramentas retiram informações como camadas, cores, metadados, etc.

Aprenda Técnicas e Ferramentas para Otimizar suas Imagens em um outro artigo aqui do site.

Ferramentas para otimizar imagens:

Outra maneira para diminuir o tamanho em KBs das imagens é, ao exportar sua imagem no seu editor de imagens diminuir a qualidade da imagem.

Contudo, isso deve ser feito imagem por imagem, pois cada imagem terá uma forma particular de perda de qualidade sem interferir no visual da imagem. Devemos ter perda visual aceitável. Não adianta ter uma imagem leve mas com péssima qualidade.

Não redimensione imagens no HTML

Recomenda-se o uso dos atributos windth e height no elemento img do HTML para reduzir o tempo de renderização do layout. Por exemplo, uma imagem com o tamanho de 50 X 50px.

<img width="50" height="50" src="marca.jpg" alt="Marca">



Mas atenção! só porque você pode definir largura e altura das imagens no HTML não quer dizer que podemos redimensionar uma imagem grande para que fique pequena, por exemplo: transformar uma imagem de 500 X 500px em 50 X 50px. O seu tamanho em KBs será o mesmo.


Para melhorar o tempo de carregamento das imagens, já deixe-as do tamanho que serão utilizadas no site.


CSS Sprites


Essa técnica consiste em agrupar várias imagens em um único arquivo. Utilizando a propriedade do CSS background-position se define qual área da imagem queremos mostrar.


A vantagem é a redução no número de requisições. Tendo menos requisições ganhamos em performance.


Ferramentas para CSS Sprites:



Exemplo CSS Sprite
Performance Web com CSS Sprite


Diminuir request


Com o objetivo de organizar nossos arquivos e principalmente melhorar a manutenção utilizamos como boa prática a separação em diversos arquivos de estilos e scripts, por exemplo:


<link rel="stylesheet" href="topo.css" media="all">
<link rel="stylesheet" href="layout-principal.css" media="all">
<link rel="stylesheet" href="rodape.css" media="all">

<script src="scripts-geral.js"></script>
<script src="banner.js"></script>



O grande problema aqui é a quantidade de requisições feita pelo navegador, isso atrasa o download do resto dos elementos.


A solução para a questão é: quanto menos arquivos externos (CSS e JS) forem chamados, mais rápido o navegador carregará a página, logo ganhamos em performance. A solução é juntar ao máximo esses arquivos. Por exemplo: no lugar de ter três arquivos CSS, colocar o conteúdo desses três arquivos em um só. No lugar de ter duas chamadas JS, juntar esses dois arquivos num só.


<link rel="stylesheet" href="estilos-geral.css" media="all">
<script src="scripts-geral.js"></script>



Minificar/Compactar HTML, CSS e JS


Todos nós desenvolvedores sabemos a importância de manter um código legível, com comentários e bem indentado. Contudo, para o navegador nada disso importa, por isso podemos comprimir nossos arquivos tirando espaços em branco, comentários, etc.


/* --- estilização geral --- */

.action {
  position: relative;
  margin: 1.2em;
  color:#f60;
}



.action{position:relative;margin:1.2em;color:#f60}



Ferramentas online para minificar:



CSS no topo e JS no rodapé


Use sempre suas chamadas de CSS dentro do head, assim a página vai sendo carregada já com seus estilos, causando a impressão que a página está carregando mais rápido.


<head>
  <link rel="stylesheet" href="styles.css" media="all">
</head>



Arquivos JS “trancam” o carregamento da página enquanto são baixados e executados. Por conta disso, os arquivos JavaScript devem ser chamados no final da página, imediatamente antes do elemento </body>. Dessa forma não há bloqueio no carregamento do resto do conteúdo.


&amp;amp;amp;lt;body&amp;amp;amp;gt;
  &amp;amp;amp;lt;p&amp;amp;amp;gt;conteúdo...&amp;amp;amp;lt;/p&amp;amp;amp;gt;

  &amp;amp;amp;lt;script src="scripts.js"&amp;amp;amp;gt;&amp;amp;amp;lt;/script&amp;amp;amp;gt;
&amp;amp;amp;lt;/body&amp;amp;amp;gt;



Nunca use @import


Ao utilizar @import o navegador não faz o download em paralelo dessa folha de estilos e outros arquivos. Isso causa um atraso no carregamento da página. A melhor forma de incluir seu arquivo CSS é usar a tag link.


&amp;amp;amp;lt;!-- Correto --&amp;amp;amp;gt;
&amp;amp;amp;lt;link rel="stylesheet" href="style.css"&amp;amp;amp;gt;

&amp;amp;amp;lt;!-- Errado --&amp;amp;amp;gt;
@import url('style.css');



Não use jQuery para tudo


Percebo muitos sites usando jQuery apenas para efeitos simples de validação, efeito de transição, Efeito Sanfona… Na maioria das vezes não faz sentido carregar uma biblioteca que vai diminuir a performance do meu site para fazer esses efeitos.


A dica aqui é: procure resolver seu problema usando JavaScript puro, use jQuery apenas em casos mais complexos. Outra dica é: antes de tentar fazer algo com JS ou jQuery tenha certeza que não é possível fazer com Propriedades CSS3. Essa simples mudança vão melhorar muito a performance do seu site.


Um artigo bacana falando exatamente sobre isso é o Considere não Usar jQuery do Tableless. Recomendo a leitura.


Habilite o GZIP no servidor


Ao habilitar o GZIP no servidor os arquivos solicitados pelo navegador serão compactados antes do envio ao navegador do usuário.


Teste se o site está com o GZIP habilitado: HTTP Compression Test e http://checkgzipcompression.com/


Sugestão de código que deve ser colocado no arquivo .htaccess para ativar o GZIP.


&amp;amp;amp;lt;IfModule mod_deflate.c&amp;amp;amp;gt;
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/x-httpd-eruby
AddOutputFilterByType DEFLATE text/html

SetOutputFilter DEFLATE

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4.0[678] no-gzip

BrowserMatch ^HMSI[E] !no-gzip !gzip-only-text/html

SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
&amp;amp;amp;lt;/IfModule&amp;amp;amp;gt;



Considerações finais



Curta a página do blog kadunew no Facebook. Siga-me no Twitter: @kadunew


LinkedIn0
Google+0

Comentários

Uma resposta para “Técnicas e ferramentas para melhorar a performance de sites”

  1. Avatar de Guilherme Henrique
    Guilherme Henrique

    Ótimo artigo, muito obrigado pelas dicas