Tempo de leitura: 6 minutos
Se seus sites estiverem com problemas de resposta e desempenho, siga estas etapas para tentar resolver os problemas e fazer os usuários sorrirem.
Você pode identificar os problemas que normalmente causam resposta lenta e desempenho reduzido para sites usando ferramentas como o Google Page Speed e o Teste de velocidade do site Pingdom.
Estas são as ferramentas de avaliação de desempenho de sites mais utilizadas pelo mercado e são realmente aliadas neste processo de otimização.
Depois que as ferramentas de diagnóstico identificarem os problemas, você precisará saber como resolvê-los.
Neste artigo, listo os recursos, objetos, elementos, arquivos e outros problemas típicos que fazem com que os sites tenham um desempenho ruim ou exibam tempos de resposta lentos, e depois descrevo como eliminá-los ou pelo menos reduzi-los.
Lembre-se de que você sempre deseja tornar seu site acessível ao maior número de usuários e, embora possa parecer arcaico, ainda existem muitos usuários que dependem de conexões que podem não ser tão rápidas quanto as suas.
Metas e limites de otimização devem se basear em padrões que permitam tempos de carregamento mais rápidos nas conexões mais lentas do usuário.
Melhore a utilização da rede do seu site
Sabe-se que os itens listados abaixo causam problemas de utilização da rede nos sites, e as sugestões ajudarão a minimizar esses gargalos conhecidos.
- Cookies: embora os cookies sejam ferramentas muito úteis para sites, eles também diminuem o tempo de resposta. As práticas recomendadas para gerenciar seus cookies são:
Minimize o tamanho do arquivo de cookies, mantendo-os o menor possível – 3000 bytes (ou menos) cada, se possível.
Elimine cookies desnecessários, defina-os no nível de domínio apropriado e sirva conteúdo estático de um domínio que não serve cookies.
- Imagens: você deve otimizar suas imagens para sites usando as seguintes diretrizes:
Os sprites de CSS são incorporados agrupando várias imagens em um único arquivo e, em seguida, posicionando-as no CSS ajuda a reduzir o número de solicitações.
O URI de dados fornece uma maneira de incluir dados em linha e permite que elementos normalmente separados, como imagens e folhas de estilo, sejam chamados em uma única solicitação HTTP, e não em várias solicitações HTTP.
Especifique a largura e a altura no código do tamanho real da imagem; redimensionar imagens maiores que as dimensões codificadas leva mais tempo para renderizar.
- Tamanho total dos arquivos HTML: mantenha o tamanho total dos arquivos HTML em menos de 50K para ajudar a reduzir o tempo de carregamento ao mínimo e garantir tempos de resposta inferiores a 10 segundos para conexões mais lentas.
- Número total de objetos: tente manter o número total de objetos em cada documento da página da Web em HTML abaixo de 20.
Quanto mais objetos totais você tiver, mais latência pode ser esperada, o que diminuirá o tempo de resposta.
A sobrecarga do objeto contribui para mais de 80% dos problemas de latência da página inteira.
Tamanho total dos objetos: tente manter o tamanho total dos arquivos de páginas da Web em 100K ou menos, para garantir que os tempos de carregamento e resposta permaneçam em menos de 20 segundos nas conexões mais lentas.
Melhorar o desempenho da página da web
Os itens a seguir ajudarão a aumentar o tempo de carregamento e resposta da página da Web e oferecerão aos visitantes uma experiência on-line muito melhor.
- Otimize a ordem dos arquivos CSS e de script: certifique-se de vincular chamadas a arquivos CSS externos em paralelo e incluí-las no <head>. O estilo embutido no <body> também diminuirá a renderização, portanto, verifique se todo o CSS está contido nos arquivos CSS externos. Todos os arquivos de script devem ser colocados na parte inferior da <body> e logo antes da tag de fechamento </body>; isso permite a exibição progressiva do conteúdo da página da web. Sempre que possível utilizar atributo assíncrono para renderização;
- Hospedagem de Site: Procure hospedar seu site em servidores
que ficam geograficamente em locais com baixa latência com relação a região
geográfica de onde a maioria dos visitantes se encontram. No Brasil, os
melhores servidores em tempo de latência são os que estão no próprio país ou na
costa leste dos Estados Unidos;
- Remover regras CSS não utilizadas: as
regras CSS que não são usadas pela página da Web adicionam sobrecarga
desnecessária, que precisa ser carregada primeiro antes que qualquer conteúdo
<body> seja carregado.
- Total de arquivos e tamanho de CSS:
combinar seu CSS em um arquivo e reduzir o CSS ajudará bastante a otimizar os
tempos de carregamento do estilo. Combinar, minificar e compactação GZIP são
bons meios de otimizar seu CSS.
- Total de arquivos e tamanho de script: eu
sei que é mais fácil falar do que fazer em algumas implementações, mas tente
combinar os arquivos de script <script> com o mínimo possível, pois cada
arquivo de script externo adicionará mais sobrecarga às suas páginas da web. As
técnicas de otimização para arquivos de script incluem as mesmas opções que
CSS, combinar, minificar ou até incorporar scripts, quando aplicável.
- Aproveitar o cache do navegador: definir
uma data de validade ou uma idade máxima em cabeçalhos de recursos HTTP
estáticos (que incluem instruções para o navegador carregar objetos baixados
anteriormente do cliente local em vez de puxá-los pela rede) fará melhorias
significativas nos tempos de resposta do navegador e desempenho do site.
- Minimizar redirecionamentos: quando, por
exemplo, páginas da Web antigas são renomeadas ou movidas para novos locais, um
redirecionamento simples direciona os usuários para a nova página ou local;
outras opções incluem o uso de redirecionamentos JavaScript ou Meta. Os
redirecionamentos devem ser usados no mínimo para reduzir os tempos de ida e
volta.
- Remova cadeias de consulta em URLs de
recursos estáticos: para ativar o cache de proxy para recursos estáticos,
verifique se os parâmetros do nome do arquivo são usados no lugar das cadeias
de consulta (por exemplo, “?”).
- Evitar solicitações incorretas: Outro recurso temido bastante semelhante aos redirecionamentos é a solicitação incorreta ou as respostas “Não encontrado” ou 410 “Ocultas” que ocorrem quando o código do front-end não foi atualizado para refletir objetos ou recursos que foram movidos ou renomeados . Não sei quantas vezes tivemos que executar uma verificação de “link quebrado” em sites e microsites porque recursos externos foram movidos ou renomeados.
Estas otimizações se aplicadas no site de sua empresa pode gerar resultados significativo no desempenho de carregamento.