LoadView

15 dicas para aumentar a velocidade do site

| Dicas de tecnologia, Teste de desempenho

A importância da velocidade do site

  • Retenção de visitantes. Quanto mais tempo sua página demorar para carregar, maior a probabilidade de um usuário saltar.
  • Ranking de mecanismos de busca do Google. O Google leva em conta a velocidade de carga da página como um dos muitos sinais de classificação usados para determinar rankings de mecanismos de pesquisa.
  • Vença seus concorrentes. Se o seu site está constantemente carregando mais rápido do que a concorrência, os usuários são mais propensos a ficar com você do que alcançar os sites mais lentos.
  • Melhor experiência do usuário. Evite a frustração do usuário com um site lento e dê-lhes uma experiência otimizada do usuário.
    Acelere seu site

    No mundo instantâneo de hoje, velocidade é tudo!

Como otimizar o desempenho do site

Aqui temos uma lista de coisas que você pode fazer para otimizar a velocidade do seu site. Muitas dessas técnicas podem exigir conhecimento adicional, como usar os sprites CSS mencionados abaixo. Não queremos reinventar a roda aqui, mas você pode encontrar tutoriais online com um pouco de Google-fu (pesquise no Google as palavras-chave que você não está familiarizado ou gostaria de saber a melhor maneira de implementar). Vamos começar.

      1. A velocidade de hospedagem é essencial. Você pode ter o código mais otimizado do planeta, mas se você estiver hospedando com um provedor de segunda categoria que tem tempo de atraso significativo e um tempo lento para o primeiro byte (TTFB), seus esforços de otimização serão principalmente fúteis. Execute testes de desempenho baseados em métricas para determinar o host web mais rápido. O monitoramento de desempenho pode ser configurado posteriormente para garantir que sua empresa de hospedagem esteja em dia.

     

      1. Limite o número de solicitações exigidas por uma página. Cada vez que um usuário envia uma solicitação de um navegador para o servidor, ele perde milissegundos preciosos. Ao consolidar elementos em arquivos únicos, como um arquivo Sprite CSS no lugar de dezenas de arquivos de imagem, você limita o número de solicitações que o navegador fará

     

      1. Gere um arquivo sprite CSS. Em vez de baixar dezenas de imagens para cada página em seu site, um arquivo sprite CSS deve exigir apenas um único download. Isso eliminaria a necessidade de ter muitas imagens menores para coisas como menus, bordas arredondadas e imagens de fundo. A essência de um arquivo sprite CSS é que você empilhe todas as imagens do seu site em um único arquivo PNG e crie referências a cada local de imagem em seu CSS. Agora, quando você precisa exibir a imagem, basta chamar a classe CSS dentro de uma tag div.

     

      1. Use CSS sempre que possível. Livre-se de estilos inline, imagens e outros conteúdos compartilhados em várias páginas em seu site.

     

      1. Consolide suas folhas de estilo para que haja apenas uma solicitação de CSS. Uma vez que você baixa a folha de estilo, ela elimina pedidos futuros para todos os itens relacionados ao estilo.
        Uma possível exceção à regra de uma folha de estilo por site é se você estiver otimizando o tempo de interação ou o conteúdo “acima da dobra”. O conteúdo que aparece no topo da página que permite que um usuário comece a interagir com o site deve ser priorizado quando você está preocupado que os usuários saltem se a página demorar muito tempo para carregar. Neste caso, você pode carregar um arquivo CSS para exibir acima do conteúdo do fold corretamente imediatamente e, em seguida, carregar o segundo arquivo CSS para otimizar tudo o resto na página.

     

      1. Use CDNs (Content Delivery Networks, redes de entrega de conteúdo). Os CDNs colocam o conteúdo do site, particularmente imagens maiores, arquivos de vídeo e mídia o mais próximo possível do usuário final. Em vez de todos os usuários chamando os elementos do seu servidor web, eles agora baixam esses elementos de um servidor CDN que está hospedado a apenas alguns saltos de distância em um data center perto de sua localização geográfica.
        Desde que você não use mais do que alguns domínios, a divisão de elementos entre vários domínios (como seu domínio base e um CDN) maximizará os downloads paralelos simultâneos no navegador. Nesse ponto, o custo da busca de DNS começa a contar contra você.

     

      1. Minimize o número de buscas de DNS exigidas pelo seu site. Cada elemento hospedado por um domínio único pode exigir uma pesquisa adicional que pode adicionar segundos ao seu tempo de carga. Mesmo solicitações em domínios relacionados (como www.example.com e css.example.com) ainda requerem uma pesquisa adicional. Se isso soa contra-intuitivo depois que apenas recomendamos o uso de CDNs, é porque deve haver um meio feliz. Basta tentar limitar o número de domínios adicionais referenciados. Otimizadores extremos chegam ao ponto de eliminar todos os botões de mídia social porque eles chamam para cada domínio.

     

      1. Certifique-se de que seu servidor permite o cache do navegador com base na idade do arquivo, expiração e Etag. Isso significa que qualquer conteúdo que um navegador tenha baixado recentemente do servidor, como um logotipo da empresa, não será baixado novamente enquanto ainda for válido. Certifique-se também de que cada elemento tenha um TTL adequado, ou idade do arquivo, para tirar proveito do cache do navegador.

     

      1. Mova JavaScript para o final da sua página. Isso garante que o conteúdo seja carregado antes de esperar em arquivos JavaScript maiores para carregar.

     

      1. Quando você tiver a opção, consolide ou elimine o maior número possível de plugins JavaScript. Embora seja ótimo coletar dados sobre como seus visitantes usam seu site, você não quer que a coleta de scripts esses dados desacelere seu site e afete negativamente a experiência do usuário. Se você vai adicionar um novo plugin a um site, certifique-se de que você não está duplicando a funcionalidade de um plugin existente e, se estiver, remova o plugin antigo.

     

      1. Utilize compactação em seu site. O uso do gzip pode diminuir significativamente o tamanho total dos arquivos que você está enviando do servidor para o navegador. A compressão muitas vezes proporciona uma redução de mais de 70% no uso da largura de banda.

     

      1. Otimize os tamanhos dos arquivos enviando apenas o menor tamanho de imagem exigido pela página. Edite a imagem para ser o tamanho exato do pixel necessário na página. Ao escolher um formato de arquivo para imagens, use PNGs ou JPEGs, em vez de TIFFs e BMPs. Use uma ferramenta de compressão de imagem, como TinyPNG. É uma ótima ferramenta para reduzir o tamanho do arquivo de imagens antes de colocá-las em seu site. Evite também etiquetas de origem vazias nas imagens. Uma tag vazia faz com que o navegador envie uma solicitação adicional ao servidor.

     

      1. Minificar o código. Uma vez concluída a página, execute um código de minifier. A versão do Google(https://developers.google.com/speed/docs/insights/MinifyResources),remove todos os códigos desnecessários, como espaços vazios, linhas vazias, etc., salvando KBs do tamanho do arquivo.

     

      1. Otimize seu banco de dados. Se o seu site usa um banco de dados para hospedar conteúdo dinâmico, você deseja ter certeza de que o banco de dados está devidamente indexado. Depois que o banco de dados for indexado, minimize o número de chamadas feitas no banco de dados. Por exemplo, se o seu site pegar resultados do banco de dados para exibir uma lista de produtos, reutilize os resultados da consulta em vez de enviar uma consulta adicional ao perfurar um subconjunto de resultados.

     

      1. Monitore seu site diariamente para solicitações quebradas. Se o seu site contém código que aponta para um elemento que não existe mais, seja no seu servidor ou de terceiros, então você está desnecessariamente perdendo tempo enviando e esperando por 404 erros.

     

      1. Dica bônus! Teste regularmente seu site para compatibilidade em diferentes navegadores, incluindo diferentes plataformas móveis. Os visitantes móveis estão começando a dominar o mercado de navegadores. Concentre-se em testar seu site no celular antes do desktop.

    Seguindo essas etapas, você deve ser capaz de otimizar a velocidade de carga da sua página web e aumentar a usabilidade do seu site. Garantir a qualidade do seu conteúdo para reter a atenção dos visitantes do site depende de você!

    Além de executar um teste de velocidade do site para obter uma imagem clara de como seu site se sai de todo o mundo, a ferramenta de insights de velocidade de página do Google é ótima para analisar sua página web e fornecer sugestões sobre como realizar muitas das otimizações listadas neste artigo. O plugin Yslow também é uma ótima ferramenta para encontrar maneiras adicionais de otimizar uma página web.