Performance e boas_praticas_de_web

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 Javascript CSS Imagens Cache Compressão de arquivos .htaccess 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=s cript1.js, s cript2.js, ... "></script> Documentação : http://code.google.com/p/minify/source/browse/tags/release_2.1.3/min/README.txt Plugin 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 Verly Analista de Web - Lancenet! [email_address]

Performance e boas_praticas_de_web

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Performance e boas_praticas_de_web

Mais de Thiago Verly

Performance e boas_praticas_de_web