Muitas pessoas quando estão começando no mundo do desenvolvimento costumam dar um diagnóstico errado para alguns problemas de performance que seus sites podem eventualmente enfrentar. E nem sempre significa que você cometeu os piores erros, mas significa que há vários aspectos que você pode melhorar. Montei esta lista como uma espécie de guia rápido e que pode ajudá-lo a prestar atenção em alguns pontos básicos do desenvolvimento para web. No geral, quanto maior for a audiência do seu site, mais valor você dará para as boas práticas de desenvolvimento e dicas de otimização. Mas antes mesmo de alcançar uma audiência com milhões de page views, pode começar treinando desde já. A escolha é sua.
1 - Separe o HTML do CSS
Óbvio que esta dica seria a primeira. Se você quer ter um site leve e fácil de dar manutenção, você precisa aprender padrões e boas práticas de desenvolvimento de HTML e CSS. Os famosos “padrões web” (web standards). A base de um site leve está na divisão de camadas (conteúdo e apresentação). Deixe que o CSS cuide do design e deixe no HTML somente o conteúdo. Este é o passo fundamental em qualquer processo de deixar um site mais leve e rápido de ser carregado.
2 - Coloque o script do web analytics no rodapé
Usar algum serviço de métricas para contabilizar as visitas do seu site, é fundamental. Há várias ferramentas gratuitas disponíveis no mercado como por exemplo o Clicky, StatCounter, Yahoo Web Analytics, Google Analytics dentre outros. E uma característica comum da maioria dessas ferramentas é o uso de javascript como forma de fazer essas contabilizações. E geralmente este script fica no servidor do serviço que o oferece, e não no mesmo servidor do seu site. Se um site for muito grande e tiver milhares de acesso por dia, muitos visitantes poderão reclamar de que o site está um pouco lento. Como você não hospeda o script, não há 100% do controle se ele será entregue tão rápido quanto se estivesse no seu próprio servidor.
Normalmente as pessoas colocam estes scripts no <head> do site, o que não está errado de forma alguma. Entretanto, o restante da página pode demorar um pouco mais para carregar enquanto o script do seu web analytics não for baixado na primeira vez. Uma dica importante se você tem notado um delay no carregamento do script em relação ao seu site, é colocá-lo no rodapé. Isso fará com que seu site seja carregado primeiro, ou seja, toda a interface e navegação, e o script do web analytics será o último a ser baixado, sem que o usuário note.
3 - Redução do Javascript
Esta é uma técnica antiga porém muito útil. Se seu site precisa ter muito script use a técnica do “javascript minify“, ou redução de javascript. Geralmente costumamos colocar o script de forma endentada, soltando linhas e espaços para deixá-lo compreensível e fácil de dar manutenção. Entretanto, se você colocasse todos os seus scripts em um único arquivo, excluísse todos os espaços desnecessários e desse nomes mais curtos para as funções, acredite, você terá ganhos significativos.
Não se preocupe, isso não é algo que você deva fazer “na mão”. Existem alguns programas que fazem isso por você, inclusive sites como este onde basta colocar seu script em um campo que ele será reduzido do outro lado. A única coisa que você precisa ficar esperto, é quanto a guardar uma cópia do seu script original caso queira dar alguma manutenção no futuro ou reaproveitá-lo em outro projeto. Se não fizer este backup, seu script poderá ficar praticamente ilegível para olhos humanos.
4 - Design “limpo”
Este item poderá sofrer várias críticas, mas ainda assim eu resolvi mantê-lo. Se o design do seu site for “limpo”, ou seja, se tiver somente o que for “necessário”, ele será naturalmente “leve”. Este é o tópico mais conceitual e menos prático do grupo, mas que eu considero não menos importante. O fato é que designers precisam entender que alguns sites devem ser construídos para compartilhar informação e não para se tornarem obras de arte rebuscadas. Não há nada de errado com o simples e o enxuto. A prova disso é o iPhone. Manter um design simples não significa ter um design feio, significa apenas que o design foi pensado na função. Nem tudo deve seguir esta regra, mas ela pode ser seguida em milhares de casos.
5 - Redução na quantidade de requisições ao servidor
Este deve ser um trabalho em conjunto com todos envolvidos no projeto. A começar pelo design e o programador de interface e continuando no programador. Programadores devem procurar sempre fazer as coisas mais enxutas possíveis. Os designers podem pensar em projetos mais úteis e menos rebuscados e os programadores de interface podem e devem pensar em soluções de recortes mais inteligentes e enxutos.
Já vi milhares de trabalhos de profissionais que usam imagens onde conseguiriam exatamente o mesmo efeito somente com CSS. Uma classe dentro de uma folha de estilos é uma requisição a menos no servidor, ao contrário de mais uma imagem. Quer colocar bordas nas imagens? Faça com CSS, não coloque a borda na imagem. Há vários trechos do design que tem uma sombra atrás de algum elemento? Pense em usar a mesma imagem para o máximo de locais possíveis. Possui muitos elementos como ícones e símbolos? Use CSS Sprites, uma técnica simples onde, ao invés de ter dezenas de imagens separadas, elas ficam todas em uma única imagem. Quanto menos arquivos forem requisitados ao servidor, mais rápido será o carregamento do site.
6 - Resuma seu CSS
Alguns atribuem a forma como o CSS fica organizado a questão de estilo. Eles não estão errados. Mas em alguns casos, resumir o CSS e colocar as declarações uma na frente da outra, você consegue enxugar alguns bytes. Pense os ganhos em um site com 100 mil visitantes por dia. Ganhos de tráfego e performance são altos e valem à pena. Vejam abaixo um exemplo:
#exemplo {
float: left;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #CCCCCC;
width: 255px;
height:150px;
position: relative;
}
Este trecho poderia ser assim:
#exemplo {float:left; margin:10px; border:1px solid #CCC; width: 255px; height:150px; position: relative}Resumir o CSS é simples e fácil. Você pode ler mais sobre resumo de CSS aqui. Este é o mesmo caso da redução do javascipt, com a exceção de que eu me acostumei a trabalhar com arquivos resumidos e não costumo guardar backup de um arquivo de CSS “expandido”. Mas isso já é questão de estilo.
7 - Coloque javascript somente nas páginas em que ele for usado
Se você vai fazer um site com programação no lado do servidor, muito provavelmente você irá utilizar includes. Certo? Nada de errado com isso, mas o fato é que vários programadores ficam com “preguiça” de identificar “na mão” quais páginas realmente vão precisar de determinado scprit e quais não vão precisar e preferem colocá-lo em um include que está presente em todas as páginas. Ou seja, mesmo aquelas páginas que não vão usar aquele script vão carregar o script de qualquer maneira. Shame on you! Não faça isso se quiser ter um site otimizado. Scripts devem ser chamados somente onde e quando forem necessários.
8 - Otimize o tamanho de suas imagens
Não acredite naqueles que, ao serem confrontados sobre o tamanho gigante das imagens de seus sites, alegam que hoje todo mundo tem banda larga. Ainda há vários cenários de acessos com conexões lentas (celulares navegando em edge por exemplo), sem falar nos milhares de gigas que você pode economizar com servidor naqueles sites com milhares de acesso.
Se você é daqueles que sempre salva as imagens com 90% de qualidade no Photoshop, comece a balancear a forma com que você as gera. É possível obter imagens com uma qualidade decente o suficiente sem necessariamente salvá-las com 90% de qualidade.
9 - Não use javascript proprietário de browsers
Esta deveria ser uma dica que não precisaria ser dada nunca mais. Parece assunto da época em que o Internet Explorer brigava com o Netscape. Mas o fato é que várias pessoas ainda usam scripts engraçadinhos que fazem coisas somente em um browser ou em outro. Os usuários que visitarem seu site por um navegador cujo seu script não vai funcionar, irá carregá-lo de qualquer maneira, inutilmente. Por isso, se for usar javascript, pense se ele vai funcionar em todos os navegadores e pense se ninguém irá baixar algo inutilmente que não irá funcionar. Assim você prejudica o usuário e o dono do servidoror consumir parte da banda dele com scripts inúteis.
10 - Utilize cache no servidor
Como eu disse no início, quanto maior for a audiência do seu site, mais importância você dará para boa práticas de desenvolvimento e dicas de otimização. Se você possui um site onde os visitantes retornam com muita freqüência, com certeza há trechos do seu site que podem ser cacheados, para que da próxima vez que eles acessarem, não seja necessário baixar scripts e folhas de estilos por exemplo, tudo novamente. Isso também vale para aquelas páginas que você não as atualiza com freqüência. Ao atribuir cache no servidor, você fará com que o navegador do usuário guarde arquivos em sua própria máquina para que ele ao acessar seu site novamente, não precise carregar os mesmos arquivos novamente. Assim o usuário vai carregar seu site mais rápido e menos requisições serão feitas ao seu servidor.
Henrique Pereira trabalha com planejamento digital, desenvolvimento e arquitetura da informação e mantêm o blog Revolução Etc (http://revolucao.etc.br) sobre tecnologia e desenvolvimento desde 2005.
11 respostas até agora ↓
1 Tioni Oliv // 6 de Maio de 2009 às 7:39
Vlw pelas dicas. Gostei da 5 - CSS sprites - eu não havia relacionado isso ao número reduzido de requisições.
2 Daniel Lobão // 7 de Maio de 2009 às 0:27
Como sempre, um grande post, não precisando ser um post grande. Hoje em dia eu estou MUITO focado principalmente nas questões 1, 4, 5 e 6. Realmente trazem um grande diferencial.
3 Janilto Oliveira // 7 de Maio de 2009 às 8:32
Muito boa a dica, nota 10 pra todas elas pois estou em inicio da caminhada de web e tudo esta sendo absorvido com exito em minha base de conhecimento, parabens a todos da equipe uol host e obrigado por tudo .
4 Nairon // 8 de Maio de 2009 às 10:52
Excelente texto, algumas dicas são de conhecimento geral dos desenvolvedores, porém tem algumas que sinceramente não havia parado para pensar.
5 ed1nh0 // 10 de Maio de 2009 às 15:23
Mestre! Como sempre condensando o melhor das informações sobre o assunto abrangendo iniciantes, intermediários e avançados.
6 Thomas // 29 de Maio de 2009 às 11:41
Uma dica para salvar as imagens e deixá-las com tamanho pequeno, é redimencioná-la no photoshop de acordo com seu site e salvá-la com 100% de qualidade. Depois disso abra a imagem com o paint e só salve-a de novo. O tamanho dela vai caír uns 85% ou 90%.
Fiz e deu certo… meu irmão que passou a dica. Agora quem usa mac ou linux eu não sei se da certo… mas no vista funcionou de boa.
7 ronaldo // 11 de Junho de 2009 às 19:47
Uma dúvida: separar cada seção do site em diretórios é recomendado? ou é melhorar deixar tudo na raiz, utilizando os mesmos arquivos de imagem e style para todas as páginas?
8 Renato // 12 de Junho de 2009 às 11:35
Ronaldo,
Quebrar em diretórios melhora a organização e o gerenciamento. Se forem milhares de arquivos, irá melhorar a performance também.
Padronizar imagens e CSS também melhorar por que o servidor pode utilizar uma forma de “cache” e assim servir os arquivos mais rapidamente.
Renato.
9 Fernanda // 24 de Junho de 2009 às 14:49
Parabéns Henrique pelo artigo.
Sou estudante de análise e desenvolvimento de sistemas, graduada em administração.
Estou criando um website e o artigo foi de grande valia, além do BLOG.
10 Erick Dantas // 10 de Dezembro de 2009 às 21:39
olha amigo estou no inicio da caminhada e
te digo foi a minha melhor aula de web
pois programar é fácil o difícil e ter em mente qualidade no faz e pensar no cliente acima de tudo
parabéns amigo
11 Romer // 15 de Janeiro de 2010 às 0:50
Ótimo post!! Mais uma dica, para otimizar o CSS recomendo esse site http://www.cleancss.com/
Deixe um comentário