Desempenho das páginas
Hoje, os principais mecanismos de busca, como o Google, utilizam o tempo de carregamento dos arquivos, principalmente das imagens, como um dos fatores de ranqueamento das páginas. E isso é usado como vantagem competitiva e cujo diferencial se reverte em melhor posicionamento ao longo do tempo. Além de definir também o tempo de permanência do usuário na página visitada.
Fatores de desempenho das páginas
Os principais fatores são listados a seguir:
- Tempo de carregamento na primeira visita
- Compressão de elementos de texto
- Compressão de imagens
- Cache do conteúdo Estático
- CDN (Content Delivery Network)
- Keep Alive Ativado
Tempo de carregamento na primeira visita
O tempo de carregamento na primeira visita depende dos elementos carregados pelo DOM da página. As imagens, Javascripts e arquivos CSS interferem no tempo de carregamento de uma página, principalmente as imagens, que podem representar mais de 80% dos bytes de uma página.
Pagespeed
Está ferramenta foi desenvolvida pelo Google e é a principal usada para testes de desempenho dos sites.
- Instalar e configurar o módulo do Pagespeed Service no servidor: https://developers.google.com/speed/pagespeed/module
- Serviço online: Pagespeed
Compressão de elementos de texto
Compressão de elementos de texto como javascript e CSS por GZIP optimiza a velocidade da página, reduzindo o uso da banda e transferência, bem como oferece suporte á todos os navegadores atuais.
Prática: Comprimindo arquivos no servidor e habilitando o cache
- Primeiro deve-se habilitar os modos no servidor Apache:
- Daflate "mod_deflate";
- Expires "mod_expires".
- Hearders "mod_headers";
- Depois abrir o arquivo ".HTACCESS" e adicionar as linhas de código abaixo:
Compressão de arquivos
# Início da compressão de arquivos <ifModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript image/png image/jpeg </ifModule> # Fim da compressão de arquivos
Compressão de imagens
Como dito anteriormente, as imagens podem representar mais de 80% dos bytes de uma página. Com a compressão, o tamanho(bytes) dos arquivos de imagens podem reduzir consideravelmente, melhorando a experiência do usuário.
Comprima suas imagens
Se você usa o Photoshop, Fireworks ou outros programas de edição de imagens, use sempre a opção "Save for Web" ou ao menos utilize uma versão de JPG com redução de qualidade. Se você não possui, pode usar alternativas gratuitas também.
Existe uma ferramenta para instalar no servidor e otimizar as imagens ao se fazer upload para o sites. Isso seria o ideal. Podemos usar isso como diferencial:
Não reduza as imagens com HTML
Nunca use HTML puro para redimensionar suas imagens. Elas serão carregadas com o tamanho original (grande) e será redimensionada no browser. Isso também deixa as imagens feias (distorcidas, mal-redimensionadas ou de resolução alterada), o tratamento do browser não é eficiente e as imagens perdem suas características.
Especifique as dimensões da imagem
Sempre especifique os tamanhos das imagens no código HTML. Isso irá reduzir o tempo de renderização da página pois o browser saberá como encaixar os elementos na tela.
Imagens grandes? Corte-as
Se você precisa carregar uma imagem muito grande no seu site, divida-as em algumas partes para agilizar o carregamento. Claro, não reduzirá o tamanho mas passará impressão de agilidade na abertura do site.
Use CSS ao invés de imagens
Use CSS para criar os efeitos necessários para seu site quando possível. Obviamente, o conteúdo a ser carregado será muito menor. Pode parecer estranho, mas o carregamento das imagens como background de uma DIV é mais rápido do que carregar a imagem com as tags HTML.
Cache do conteúdo Estático
O cache dos arquivos estáticos reduz o número de requisições ao servidor, o que também facilita a experiência do usuário. Uma vez que o navegador armazena os arquivos no computador do mesmo e após o tempo de expiração, os arquivos são excluídos.
Prática: Cacheamento e optimização dos arquivos estáticos
# INÍCIO Expire headers <ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 5 seconds" ExpiresByType image/x-icon "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 216000 seconds" ExpiresByType application/javascript "access plus 216000 seconds" ExpiresByType application/x-javascript "access plus 216000 seconds" ExpiresByType text/html "access plus 600 seconds" ExpiresByType application/xhtml+xml "access plus 600 seconds" </ifModule> # FIM Expire headers
# INÍCIO Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpeg|png|gif|swf|jpg|)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(xhtml|php|html|htm)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# FIM Cache-Control Headers
# INÍCIO Turn ETags Off, pois o modo expires está ativo FileETag None # FIM Turn ETags Off
Redução de Requisições HTTP
Cada vez que você faz uma requisição HTTP, será necessário pedir o pacote, esperar a resposta, receber o pacote e confirmar sua chegada. Por isso, quanto menos requisições HTTP você tiver, mais rápido será o carregamento da sua página.
Não use HTTPS desnecessariamente
Somente use HTTPS quando for necessário. Esse tipo de conexão segura é pelo menos 3 vezes mais lentas que o HTTP normal.
Use arquivos CSS externos
Usando arquivos externos, você irá ajudar o robô de busca e o seu usuário, pois uma vez lido o CSS externo, ele será jogado no cache e não precisará ser recarregado a cada nova página.
Use arquivos Javascript externos também
Segue o mesmo princípio do CSS externo, principalmente para Javascript, para o qual será mais importante o cache dos arquivos.
CDN (Content Delivery Network)
Essa é uma prática de grande portais de conteúdo, blogs e outros sistemas que apresentam um grande volume de dados de mídias, como imagens e consiste na distribuição dos conteúdos por localidade, reduzindo as solicitações ao servidor. CDN é uma rede que fornece um conteúdo específico, como imagens, conforme a localização geográfica do usuário.
- Usar CDN do Cloud Fare - https://www.cloudflare.com/features-cdn
Habilitar o Keepalive
- Habilitar o KeepAlive: http://www.feedthebot.com/pagespeed/keep-alive.html
Separe servidores de conteúdo e de banco de dados
Se você possui um alto tráfego no seu site, criar servidores dedicados pode ajudar, e muito, na velocidade do seu site. Cada servidor será otimizado para um serviço.
Ferramentas para testar o desempenho dos sites
WebPageTest ou GTmetrix
Para testar o desempenho de um site, pode utilizar o GTmetrix ou o WebPageTest. Eles indicarão a situação atual do site com relação às principais métricas de desempenho e, após se logar neles, podem armazenar os dados dos testes para futuras comparações.
Pingdom
A ferramenta oferece um ótimo elatório de desempenho e mostra em percentual algumas métricas de desempenho.
Teste no site da Dash
Projeto Dash Uniformes - Google Docs
Referências Externas
- Blog do Celso Junior - Hacks para HTACCESS
- Forum - Como otimizar o Apache com o mod_deflate
- Melhorar as velocidades de carregamento
- Aumentar a performance do site (em inglês)
- Compressão de arquivos com Gzip
- Vídeo Aula – Sistema de Cache com PHP no Linux
- Cache para arquivos php, imagens, javascript e html (em inglês)
0 Comentários