Qual é a velocidade de carregamento do seu site?

O desempenho de um site web é muito importante para manter suas visitas. Um site com desempenho ruim pode afastar seus clientes e diminuir suas vendas, como mostram diversos estudos realizados e coletados neste post do Sérgio Lopes, aqui da Caelum.

Para otimizar o desempenho de um site, é essencial saber por onde começar. Para ajudar nisso, existem diversas ferramentas que analisam o seu site e mostram o que está demorando para carregar e o que você pode fazer para melhorar o seu site, entre elas o Google PageSpeed Insights, o WebPageTest.org e o YSlow!.

O problema é que a gente sempre desenvolve sites no localhost e, com exceção do YSlow!, que pode ser testado localmente, essas ferramentas analisam apenas sites online. Além disso, no localhost a transferência de dados é quase imediata, não temos limitação de banda, o que muitas vezes acaba mascarando problemas de desempenho no carregamento das páginas. Depois de trabalhar muito num site, quando o colocamos em produção, acabamos descobrindo, por exemplo, que nossas imagens estão muito pesadas, ou temos Javascript demais sendo carregado por página, ou que usuários sem acesso a internet rápida estão sofrendo.

Há o Web Page Test, que pode gerar um video passo a passo do carregamento da sua página, possibilitando até a escolha da banda:

Ele também dá dados sobre o carregamento de cada um dos recursos do site:

Screen Shot 2013-05-13 at 4.21.32 PM

Pode ser chato ficar o tempo todo pedindo pro WebPageTest gerar um novo vídeo. Dá para simular essa limitação de banda no localhost com algumas ferramentas, entre elas uma chamada iprelay.

Se você tiver um servidor rodando na porta 8080 e quiser simular um acesso remoto a ele, você pode rodar o iprelay com o seguinte comando:

iprelay -b2500 9090:localhost:8080

E pronto! Agora, em vez de acessar a porta 8080, você pode acessar o localhost na porta 9090 e se sentir nas nossas belas redes 3G ou na era da Internet discada, com 2,5 KB de banda. Você controla o quanto de banda quer pelo argumento -b, passando a ele a taxa de bytes/segundo que deseja.

O iprelay é um script em Perl e, portanto, pode ser utilizado em qualquer sistema operacional com suporte a essa linguagem, o que inclui praticamente todos os sistemas mais utilizados atualmente.

E você, já viu se seu site está respondendo de maneira aceitável para usuários sem internet muito rápida?

22 Comentários

  1. Roberto Shizuo 21/05/2013 at 10:03 #

    excelentes dicas de ferramentas! obrigado luiz!

  2. Alexandre Cardoso 21/05/2013 at 10:58 #

    Excelente post. Não conhecia o iprelay. Gostei muito. Parabéns!

  3. Sérgio Lopes 21/05/2013 at 14:18 #

    Outra opção é usar alguns proxies, como o Charles, que tem essas possibilidades. A vantagem é poder configurar o proxy em qualquer aparelho, inclusive dispositivos móveis.

    Ou ainda, se o problema é expor remotamente uma página localhost pra rodar no WebPageTest/etc, dá pra usar o localtunnel que é bem fácil de rodar e expõe o localhost num endereço na internet:

    http://progrium.com/localtunnel/

  4. Julio Ikeda 22/05/2013 at 08:04 #

    Muito legal esse post!!

  5. VonNaturAustreVe 22/05/2013 at 16:11 #

    Excelente @Sérgio Lopes, com o uso de proxys podemos avaliar a performance do site sendo acessado em diversos pontos no mundo.

    []’s

  6. Custódio Leitão 28/05/2013 at 11:48 #

    Ilustres
    Alguns poderia me enviar uma apostilas completa de como trabalhar com Net bens incluindo exercícios ou ensinar a trabalhar linha de comandos pra programar em java.
    Obrigado

  7. Denis Santos 03/06/2013 at 11:24 #

    Opa, curti o http://www.webpagetest.org/
    preciso ativar o GZIP no ambiente de staging, hehe

  8. Tárcio Zemel 03/06/2013 at 11:24 #

    Não, peraí, mas a velocidade nesse vídeo é de localhost, né?

  9. Paulo Silveira 03/06/2013 at 13:11 #

    nao nao :). é simulando a conexao padrao americana.

  10. Kim Kaphwan 24/09/2013 at 11:48 #

    Esse YSlow ajudou bastante, obrigado.

  11. Danilo Agostinho 18/04/2014 at 23:04 #

    Gostei de todos os exemplos, inclusive o Google PageSpeed Insights. A ideia de lhe dar coordenadas para solução de problemas é muito foda.

  12. Cleverton Heusner 04/09/2014 at 10:01 #

    Sérgio, desculpe o incômodo, mas depois de usar o comando do iprelay com os parâmetros que passou no seu blog, a banda da minha porta não mudou.

    Recebo a resposta após o comando:
    Resolving address (localhost)…..
    …. determined as: 127.0.0.1
    Useing command line parameters:
    local_port 9090
    remote_addrs 127.0.0.1
    remote_port 8080
    bandwidth 2500
    forwarder 99 set.

    Porém, ao testar o carregamento das páginas com o Developer Tools do Chrome, vejo que a velocidade continua a mesma em minha aplicação JSF que usa o Tomcat.

    O que eu poderia estar fazendo de errado?

  13. Julio Cesar 05/02/2015 at 09:04 #

    Gostei mais do Google PageSpeed Insights, com os prints da versão mobile do site e coordenadas para solução de problemas.

  14. Uilson Candido 16/02/2015 at 23:52 #

    Muito boa estas dicas… gostei!

  15. Lailton Sabino 05/03/2015 at 18:55 #

    Ainda bem que meu site carrega rapidinho!

  16. José Koslyk Primo 06/03/2015 at 11:10 #

    Muito bom… irei usar para acompanhar o carregamento do meu site de camisetas.

  17. Neiart 17/03/2015 at 23:59 #

    Vou testar a velocidade do meu site, agora mesmo!

  18. KAREN PASTRE 13/04/2015 at 11:41 #

    Excelente dicas! Vou usar…

  19. Bruno Figueiredo 29/03/2016 at 14:31 #

    Faltou na lista o Teste de Performance (http://testedeperformance.com/) – uma alternativa brasileira (100% em português) e que não deixa nada a desejar. Além disso, é possível depois do teste já começar a alterar coisas que vão deixar o site mais rápido. Merece entrar nas referências. Abraço!

  20. Dieta Contra Câncer 25/01/2017 at 22:02 #

    Trabalhando com hospedagens em VPS, consegue-se aumentar a velocidade dos sites

  21. jefferson 08/03/2019 at 09:31 #

    Olá, tenho um slide feito com Owl Carousel, e o mesmo utiliza videos em sua montagem utilizando o iframe do vimeo. Minha dúvida seria como posso fazer para pausar o vídeo quando mudo o slide.

    Exemplo: Estou no slide 1 e quero ir para o 2, porém o vídeo no primeiro slide esta tocando, quando clicar para mudar o vídeo 1 para e muda para o segundo.

    Podem me ajudar, grato.

Deixe uma resposta