Otimizar a velocidade de exibição das páginas

Dezembro 2016


Na Internet, a velocidade de exibição das páginas é crucial para um web site. Uma página, um pouco mais lenta para carregar, pode fazer você perder visitantes, e aborrecer aqueles que permanecem.

Existem ferramentas capazes de analisar as suas páginas e de orientá-lo a fim de melhorá-las.

Yahoo lançou o YSlow e Google, o PageSpeed para ajudá-lo nesta tarefa. Eles são plugins a serem instalados no Firefox, mas, em princípio, um web site pode analisar as páginas, sem precisar instalar estas ferramentas.

Vá neste site http://gtmetrix.com/ e entre o endereço da página a ser analisada.

As guias "YSlow" e "PageSpeed" indicarão os pontos a serem trabalhados, em primeiro lugar, para melhorar as suas páginas.



Cada ponto técnico, a ser verificado, receberá uma nota de A a F :
  • A para excelente (não precisa melhorar)
  • F para ruim, tem realmente que ser corrigido.


Clique em cada linha para ver os detalhes do problema.

A coluna "Priority" permite que você saiba que ponto tratar em primeiro lugar. Os ítens marcados "High" são tratados com prioridade: são eles que te darão as maiores melhorias de desempenho.
Saiba que alguns itens podem não ser aplicáveis ao seu site. Normalmente, para um site pessoal a recomendação de uso dos CDN não é aplicável.

Exemplo


A otimização mais recomendada (e mais fácil de aplicar) é a do cache cache. Também é a que dá, imediatamente, ótimas melhorias de desempenho.

Ao especificar uma data de expiração, longe o suficiente no futuro, para o seu conteúdo (imagens, páginas ...), você permitirá que o conteúdo do seu site fique armazenado no cache do navegador.

Com isso, não só as páginas aparecerão mais rapidamente quando o usuário voltar ao seu site, mas também reduzirá a carga do servidor.

Se o seu servidor web for Apache2 e o htaccess estiver ativo, basta colocar um arquivo de texto .htaccess na raiz do site:

# Pôr no cache por um mês 
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf)$"> 
Header set Cache-Control "max-age=2592000" 
</FilesMatch> 

# Pôr no cache por uma semana
<FilesMatch ".(js|css|pdf|txt)$"> 
Header set Cache-Control "max-age=604800" 
</FilesMatch> 

# Pôr no cache por um dia
<FilesMatch ".(html|htm|php)$"> 
Header set Cache-Control "max-age=43200" 
</FilesMatch>


Assim sendo, o conteúdo que muda pouco (imagens, ícones...) será mantido no cache durante um período maior, evitando a recarga. O conteúdo que se move mais (html) será recarregado com mais freqüência.

Este é apenas um exemplo: você pode, naturalmente, adaptá-lo ao seu site.


Veja também

Artigo original publicado por . Tradução feita por pintuda. Última modificação: 12 de maio de 2010 às 13:41 por pintuda.
Este documento, intitulado 'Otimizar a velocidade de exibição das páginas', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.