12 Novembro 2008 Escrito por Gonçalo Martins

Ultimamente tive em mãos a optimização de uma página de internet que demorava cerca de 25 segundos a abrir (nos dias bons), tendo o browser o cache vazio. O objectivo era fazer com que essa mesma página, sem alterar nada a nível gráfico e funcional, abrisse em menos de 4 segundos, tendo o browser o cache cheio, e em menos de 8 segundos, com o cache vazio.

Ora quando me propuseram o trabalho torci o nariz e perguntei-me para mim mesmo: "25 segundos e nos dias bons? O site só pode estar alojado na Conchixina ou na Patagónia! Não deve haver grande coisa a fazer além de mudar para um servidor mais perto do público-alvo. Bem deixa lá ver o site, pode ser que possua muitos efeitos gráficos ou algo do género!"

Abro o site... com o Firebug+YSlow a correr a primeira coisa que me vêm à vista são 18 scripts e 10 stylesheat no head. WOW 28 http requests. E para agravar mais a situação o javascript levava 8 segundos a realizar o load e a executar .

Deixa ir ver as imagens, ufff cerca de 950KB em imagens JPEG... espectáculo! Nunca se tinha ouvido falar de PNG-8 ou GIF! 

Aceitei o trabalho uma vez que verifiquei que o problema não era de nenhum erro na programação em si, mas si de uma extrema falta de "orientação" na construção do website! E talvez fosse possível passar de 25 segundos para 4 ou 5 segundos!

 

Falta ainda referir que o site "não tinha" backend embora fosse feito em Joomla 1.5. O developer "pensou no desempenho" do website e retirou o Mootools1.1 (necessário no backend para os menus) da pasta de scripts do joomla para que este não fosse carregado no index.php e pudesse utilizar outras frameworks, JQuery. Forma inteligente de resolver o assunto: meto-lhe aqui um erro 404 e assunto resolvido. Quando é nos nossos sites a coisa come-se mas no de um cliente é estar a pedir não arranjar mais trabalho!

Apesar de tudo um ponto excelente no site: A nível de design e funcionalidades estava maravilhoso!
 

Mas isto tudo para criar uma lista de 18 artigos que irei escrever ao longo do próximo mês, com o intuito de ensinar os developers que um design bonito e funcional não é tudo!

Os artigos irão abordar os seguintes temas:

0 - Introdução - Motivação / Ferramentas para medição de desempenho;
1 - Utilize correctamente imagens no seu website;
2 - O poder da compressão;
3 - Optimize o seu Javascript;
4 - O poder das CDN (Content delivery Network)/DNS Loockups;
5 - Http Requests (Pedidos Http);
6 - Junte os seus ficheiros CSS e Javascript;
7 - Descubra o cache/Expires Head;
8 - W3C o que é?;
9 - Load Dinamico / Compreenda o funcionamento dos protocolos web;
10 - Pré-Loading, o que é, como utilizar?;
11 - Atrase o load de ficheiros (Pós-Loading);
12 - PHP Flush, como e porque?;
13 - Use links da maneira correcta;
14 - ETags, quando podem ou não ser uteis!;
15 - Publicidade, uma forma de matar a performance! Soluções?;
16 - Javascript o porque do Google APIS / YUI;
17 - Google Analytics - Aumente o desempenho;
18 - Exemplo prático de implementação;