Cartilha de Performance e Boas práticas na Web

Versão 1.0 por Thiago Verly

Introdução

Esta cartilha tem como objetivo alinhar e padronizar o desenvolvimento web dos produtos Lancenet! focando na melhoria do desempenho/performance dos hotsites e otimização da aplicação no servidor web. 

Tópicos

1. Javascript2. CSS3. Imagens4. Cache5. Compressão de arquivos6. .htaccess7. Peso em Kbytes

Javascript

Apenas um framework de javascript poderá ser utilizado para enriquecer a Interface do Usuário - UI, evitando carregamento de arquivos desnecessários. Algumas opções são:

• Jquery• Scriptaculous• Prototype• Mootools• Dojo

Javascript

Esses arquivos deverão obrigatoriamente ser carregados externamente pela rede de Datacenters do Google. As vantagens são diminuição da latência, paralelismo maior no carregamento dos arquivos e melhor armazenamento em cache.

<script src="http://www.google.com/jsapi"></script><script type="text/javascript">       google.load("jquery", "1.3.2");</script>

Documentação: http://code.google.com/intl/pt-BR/apis/ajaxlibs/documentation/#googleDotLoad

Javascript

É necessário minificar o código com as funções em javascript, diminuindo o peso do arquivo .js em Kbytes. Lembrando sempre de guardar um backup da versão identada para futura alteração.

http://tools.w3clubs.com/jsmin/

CSS

Caso seja necessário usar um reset.css para resetar as propriedades de todos os browsers, use o reset do Yahho UI, pois este arquivo será carregado pela rede de distribuição de conteúdo do Yahoo paralelamente com outros arquivos, diminuindo o tempo final de carregamento da página.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css">

CSS

Arquivos CSS também devem ter o código minificado, lembrando sempre de guardar o backup do arquivo identado para facilitar a leitura e uma futura alteração.

http://tools.w3clubs.com/cssmin/

Imagens

As imagens do hotsite devem sempre estar o mais otimizado possível reduzinho o máximo de peso em Kbyte sem perder a qualidade. Após a otimização, deverá ser ainda mais otimizada através da ferramenta Smush.it.

http://www.smushit.com/ysmush.it/

Imagens

Para usar thumbnails nas fotos, NUNCA redimensione a imagem pelo atributo width e height do HTML. Use a classe Timthumb que faz o crop da imagem reduzinho seu peso em Kbyte.

Errado: <img width="100" height="100" src="sua_imagem.jpg" alt="Imagem" />

Correto: <img src="/scripts/timthumb.php?src=/sua_imagem.jpg&h=100&w=100&zc=1" alt="Imagem" />

Documentação: http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/

Cache

A aplicação deve sempre ter o seu conteúdo gerado em arquivo estático html, evitando consultas excessivas no servidor de Banco de Dados.

Se o hotsite for desenvolvido com o CMS Wordpress, é obrigatório o uso do plugin WP Super Cache e ser configurado corretamente para que ele se encarregue de criar automaticamente esse cache das páginas.

WP Super Cache: http://wordpress.org/extend/plugins/wp-super-cache/

Compressão de arquivos - PHP

Arquivos javascript e CSS devem ser comprimidos utilizando a biblioteca Minify. Na prática, ela carrega todos os arquivos javascript e CSS em apenas uma requisição HTTP, diminuindo o tempo final de download da página. Para os projetos em Wordpress existe o plugin WP Minify.

Antes:<script src="script1.js"></script><script src="script2.js"></script>

Depois:<script src="/min/?f=script1.js,script2.js,..."></script>

Documentação: http://code.google.com/p/minify/source/browse/tags/release_2.1.3/min/README.txtPlugin WP: http://wordpress.org/extend/plugins/wp-minify/

Compressão de arquivos - ASP

Arquivos javascript e CSS devem ser comprimidos utilizando a biblioteca MbCompression. Na prática, ela carrega todos os arquivos javascript e CSS em apenas uma requisição HTTP, diminuindo o tempo final de download da página.

Documentação: http://codeplex.codeplex.com/

.htaccess

Para cacheamento correto do browser para os arquivos estáticos, insira o seguinte código no arquivo .htaccess do servidor.

<ifModule mod_headers.c>  <filesMatch "\\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">    Header set Cache-Control "max-age=2592000, public"  </filesMatch>  <filesMatch "\\.(css)$">    Header set Cache-Control "max-age=2592000, public"  </filesMatch>  <filesMatch "\\.(js)$">    Header set Cache-Control "max-age=2592000, private"  </filesMatch>  <filesMatch "\\.(xml|txt)$">    Header set Cache-Control "max-age=2592000, public, must-revalidate"  </filesMatch>  <filesMatch "\\.(html|htm|php)$">    Header set Cache-Control "max-age=1, private, must-revalidate"  </filesMatch></ifModule><ifModule mod_headers.c>  Header unset ETag</ifModule>FileETag None

<ifModule mod_expires.c>  ExpiresActive On  ExpiresDefault "access plus 1 minutes"  ExpiresByType text/html "access plus 1 minutes"  ExpiresByType text/css "access plus 1 months"  ExpiresByType text/javascript "access plus 1 months"  ExpiresByType text/plain "access plus 1 months"  ExpiresByType application/x-javascript "access plus 1 months"  ExpiresByType application/x-shockwave-flash "access plus 1 months"  ExpiresByType image/gif "access plus 1 years"  ExpiresByType image/jpeg "access plus 1 years"  ExpiresByType image/jpg "access plus 1 years"  ExpiresByType image/png "access plus 1 years"  ExpiresByType image/x-icon "access plus 1 years"</ifModule>

Peso em Kbytes

O peso máximo aceitável para uma página do hotsite é entre 300kb e 400kb, sendo o ideal 200kb.

É necessário ter todos esse cuidados durante o desenvolvimento dos hotsites para entregarmos um conteúdo de qualidade para o usuário.

Thiago VerlyAnalista de Web - Lancenet!thiagoverly@lancenet.com.br