Existem, literalmente, centenas de maneiras para aumentar a performance de um site. Os métodos variam e alguns, obviamente, são mais eficientes que outros. As três áreas principais que você pode trabalhar são: hardware (servidor web), otimização de scripts server-side (PHP, Python, Java, etc) e performance do front-end. Este artigo se concentra no terceiro ponto: performance do front-end.
Inspecione suas páginas para encontrar os culpados
É muito útil inspecionar suas página web para encontrar componentes desnecessários ou componentes que podem ser otimizados. Esse tipo de inspeção geralmente envolve uma ferramenta como o Firebug (mas existem outras ferramentas) para determinar quais os componentes (imagens, arquivos CSS, documentos HTML, arquivos javascript, etc) estão sendo solicitados pelo usuário, quanto tempo levam para carregar e o quão grandes são (tamanho em KB). Regra geral, deve-se mantê-los tão pequenos quanto possível (até 25KB é uma boa meta).
A aba “Rede” do Firebug pode ajudá-lo a caçar os arquivos que “atolam” o site. No exemplo acima, tem-se uma visão geral de todos os componentes da página, incluindo: o que é, onde está, o quão grande é e quanto tempo demorou para carregar.
Salve as imagens no formato correto
Se o site possui várias imagens, é essencial aprender sobre os diferentes formatos e qual é o ideal para cada imagem. Há três formatos comuns para imagens na web: JPG, GIF e PNG. Em geral, deve-se usar JPG para fotos realistas com gradações suaves e tons de cores (degradês) e GIF ou PNG para imagens com cores sólidas (tais como gráficos e logotipos).
Para mais informações a esse respeito, leia o artigo sobre como otimizar imagens para web – guia de otimização de imagens.
Minimize seu CSS e javascript
Minimização é o processo de remoção de caracteres desnecessários (tais como tabulações, espaços comentários do código fonte, etc) a partir do código fonte para reduzir o tamanho do arquivo. Por exemplo:
|
1 2 3 4 5 |
.classe { color: #ffffff; line-height: 20px; font-size: 9px; } |
Pode ser “convertido” para:
|
1 |
.classe{color:#fff;line-height:20px;font-size:9px;} |
E não se preocupe: não é preciso reformatar o código manualmente! Há uma infinidade de ferramentas gratuitas à disposição para minimizar arquivos CSS e javascript. Para CSS, é possível encontrar várias ferramentas no artigo sobre ferramentas e recursos para desenvolvimento web; para javascript, algumas opções são /packer/, JSMIN, YUI Compressor e JavaScript Code Improver. Lembre-se: uma boa minify tool é aquela que permite reverter o processo de minimização.
Combine arquivos CSS e javascript para fazer menos requisições HTTP
Para cada componente necessário para renderizar uma página web, é criada uma solicitação HTTP no servidor. Então, se você tiver cinco arquivos CSS para uma página, serão necessários, pelo menos, 5 requisições HTTP separadas. Ao combinar arquivos, é possível reduzir a sobrecarga de solicitações HTTP necessárias para gerar uma página web.
Confira o recomendadíssimo artigo de Niels Leenheer sobre como combinar arquivos CSS e JS usando PHP (pode ser adaptado para outras linguagens). SitePoint discute um método similar para “empacotar” CSS e javascript – eles conseguiram reduzir o tempo de resposta em 76% em relação ao tempo original!
Use sprites CSS
CSS Sprite é uma combinação de imagens menores em uma imagem grande (já comentado no artigo “Otimização WordPress: aumente a performance e desempenho de seu blog/site“). Para mostrar a imagem correta, é preciso ajustar os valores da propriedade CSS background-position. Combinando várias imagens desta forma, é possível reduzir os pedidos HTTP (e reduzir requisições HTTP é um importantíssimo passo rumo à melhora de performance e desempenho de um site).
É possível fazer Sprites CSS manualmente, mas há uma ferramenta online chamada CSS Sprite Generator que dá a opção de fazer upload de imagens para serem combinados em um único sprite, gerando o código CSS (os valores de background-position) para renderizar as imagens.
Use compressão server side para diminuir o tamanho dos arquivos
Fazendo uma analogia, compactar objetos da página via server side é semelhante a zipar um arquivo grande para enviar por e-mail: você (servidor web) zipa um retrato grande da família (o componente da página) e envia por e-mail para seu amigo (o browser) que, por sua vez, descompacta o arquivo zip para ver a imagem. Os métodos de compressão mais comuns são Deflate e gzip.
Se o site está sendo executado em servidor próprio dedicado ou há um serviço de VPS e a compactação não está ativada, confira este guia sobre como instalar mod_gzip no Apache. Se não for o caso, entre em contato com seu servidor de hospedagem e peça instruções sobre como ativar a compactação server side.
Evite CSS e javascript incorporado e inline
Por padrão, CSS externo e arquivos javascript são armazenados em cache pelo browser do usuário. Se esse usuário sai do site, ainda sim ele possui o javascript e CSS em sua máquina; então, da próxima vez em que retornar ao site, não haverá necessidade de baixar esses arquivos novamente. Se há um monte de CSS e JavaScript no documento HTML (inline ou incorporado), não é possível se valer do benefício de cache do navegador. Portanto, sempre que possível, dê preferência ao uso de folhas de estilo e scripts externos.
Utilize serviços terceirizados para seus componentes e recursos
Aliviar um pouco o site de componentes e recursos, utilizando serviços de terceiros, reduz enormemente o trabalho do seu servidor web. O princípio é que a “carga total” é compartilhada com outro(s) servidor(es).
É possível usar o Feedburner para gerenciar feeds, Flickr para as imagens (apesar de algumas implicações de uso), Google AJAX Libraries API para servir estruturas javascript populares (como Mootools, jQuery e Dojo), dentre outros.
E você, tem alguma dica de como melhorar a performance de um site?