Conheça 8 verdades inconvenientes sobre velocidade de sites. Bom, que todas as pessoas com sites na Internet desejam um tempo de carregamento cada vez mais curto, ninguém duvida. Entretanto, ter um site que carregue muito rápido, do tipo que o pessoal do SEO diz que agrada ao bot, demanda muitos cuidados que vão além de ter um bom servidor e um bom cache.
Por isso, nos próximos parágrafos vamos falar sobre algumas verdades desagradáveis sobre velocidade de carregamento de sites. Desagradáveis, mas importantes e necessárias. E certamente óbvias, mas nem por isso negligenciadas.
Seções desta página
8 – Existem fatores ocultos que influenciam a rapidez do site
O protocolo HTTP e o HTTP/2 contam com algumas sutilezas que podem impactar no tempo de carga de uma página. Ou seja, cabeçalhos de http push, preload, dns prefetch e outros podem fazer com que o navegador antecipe quais recursos vão ser necessários para a exibição da página. Carregando-os ao mesmo tempo que os demais objetos, utilizando-se da multiplexação TCP quando aplicável. Ou mesmo pela correta utilização de uma conexão TCP extra.
Contudo, não fazer uso destas sutilezas técnicas não vai prejudicar seu site. Mas caso seu desenvolvedor web aceite o desafio de afinar seu site nos mínimos detalhes, você poderá se sobressair ante a concorrência.
7 – Anúncios acabam com a velocidade do site
Não há o que elaborar no que diz respeito a esse aspecto. Anúncios acabam com a velocidade de carregamento de qualquer site, por uma série de motivos. Sendo o principal é que as redes de anúncios disparam diversos scripts secundários que acompanham um simples banner, com o objetivo de garantirem estatísticas e métricas que são necessárias para justificar o investimento dos anunciantes.
7.1 – “Pixels” e scripts de rastreamento também deixam o site lento
Então, se os scripts de rastreamento das redes de anúncios deixam o site lento, o seu Analytics, os pixels do Facebook, de suas redes de afiliados, e quaisquer outros scripts de acompanhamento também têm essa característica.
6 – Medidas de velocidade são relativas
Sendo assim, quando alguém quer ter um site rápido, deveria logo em seguida perguntar-se para quem quer que essa rapidez seja aparente. Por exemplo, vamos fingir que todos nós pensamos na percepção do usuário, e não na do Googlebot, para continuar a reflexão.
A primeira coisa a se avaliar é onde estão os usuários. Ou onde está a persona com relação a onde está, fisicamente, o servidor que hospeda nosso site.
Ou seja, para ilustrar, vamos comparar duas medidas de velocidade da página inicial da própria PortoFácil. Usando dois locais de medição do Pingdom Tools.
Na primeira medição a ferramenta apresentou um tempo de praticamente meio segundo para o carregamento da página. Na segunda, a mesma página apresentou um tempo 4× o primeiro, acima de 2s. Por quê?
A única diferença foi que escolhemos locais de teste diferentes em cada medição. No primeiro testamos de Nova Iorque, Estados Unidos. No segundo testamos a partir de Melbourne, na Austrália.
Acontece que a nossa persona não está nem lá nem acolá. O público do nosso site está bem aqui, no Brasil. Ou seja, nenhum dos dois testes tem qualquer validade absoluta, mas apenas relativa.
5 – Nenhum medidor de velocidade tem precisão
Embora todo mundo use prints deste ou daquele medidor de velocidade de sites para impressionar, vamos ser honestos: nenhum tem precisão suficiente para ser considerado individualmente.
Explico: a maior utilidade destas ferramentas é apontar as possibilidades de melhoria em uma determinada página. Além de servir como um guia para que façamos a otimização dos recursos que temos com o máximo possível de eficiência.
A ênfase no termo “possível”, reiteramos, é porque muitas vezes não haverá a menor possibilidade executar uma ou mais das medidas propostas pelas ferramentas. Por exemplo, o tempo extra implicado pelos anúncios. Ou seja, se for para não ter anúncios, a maioria de nós tampouco terá motivos para ter sites.
Então, se você quiser saber realmente o quão rápido o seu site carrega, calce os sapatos do seu visitante. Ou seja, abra suas páginas no navegador com as ferramentas de desenvolvimento ativas e fique de olho na aba “rede”. Se não souber fazer isso, ou não conseguir interpretar a informação, peça ajuda ao seu programador.
No caso da página inicial da PortoFácil o resultado no nosso Chrome é o seguinte:
Embora o documento tenha sido completamente carregado em 377ms, o carregamento total da página levou 1,37s. A marca de 377ms é tempo que devemos tentar diminuir. E a partir daí poderemos usar as sugestões das ferramentas como um guia do que tentar fazer, porque é isso que o bot considera. E não o tempo de execução da página, que é o segundo adicional na medição acima.
5.2 – Medidores de velocidade ignoram tecnologias mais avançadas
Contudo, outro problema crônico dos medidores de velocidade é sua incapacidade de adaptar-se às tecnologias mais recentes com agilidade.
Sendo assim, no momento em que este artigo é redigido, nenhum dos testes de velocidade de site leva em consideração o fato de o protocolo HTTP/2 fazer multiplexação de requisições. Ou seja, numa única conexão TCP trafegam em paralelo todos os arquivos (do mesmo domínio que o documento inicial) que são referenciados pela página.
Desta forma não faz mais sentido utilizar medidas para combinar e encolher — minify — scripts e folhas de estilo. Bem, o minify ainda faz sentido. Mas combinar os arquivos custa mais caro (em recursos de processamento) do que o suposto ganho de velocidade de carregamento da página.
Outro exemplo é que nenhum medidor dá suporte ao protocolo Brotli de compactação. Ou seja, que compacta bem mais que o Gzip e já é suportado por todos os navegadores modernos e por qualquer webserver que se preze.
4 – A latência pode fazer diferença
É fato que este é um assunto requer um pouco mais de cuidado em sua abordagem. Pois muita gente aposta só na redução da latência como fator de aceleração do download de uma página.
Ou seja, em termos de rede, latência é o tempo necessário para que uma menor unidade de informação saia de um determinado dispositivo, vá ao seu destino e retorne. Trocando em miúdos, é o popular ping.
Sendo assim, dizemos que a latência pode fazer diferença, em vez de afirmar categoricamente. Porque existem muitas outras variáveis mais importantes nesse universo de aceleração de sites.
Além disso, poderíamos citar o exemplo da largura de banda disponível para o site. Há empresas que vendem servidores no Brasil com uma banda tão estreita que a vantagem do ping baixo fica totalmente anulada.
Como diminuir o ping de seu site
Enfim, existem duas maneiras de diminuir o ping de seu site. Hospedando-o em um servidor geograficamente perto do seu visitante. Ou utilizando um serviço de proxy que tenha pontos de presença próximos a ele.
Servidores no Brasil
Por exemplo, a PortoFácil dispõe de VPSs no Brasil nos datacenters mais modernos de São Paulo (e da América Latina). Com largura de banda suficiente para qualquer tamanho de cliente.
No momento da redação deste artigo temos disponibilidades de máquinas nos datacenters da Claro e da Vivo, com as seguintes configurações de rede:
- datacenter da Claro: 25Mbps de largura de banda, ping de 11ms
- datacenter da Vivo: 300Mbps de largura de banda, ping de 15ms
O tempo de ping acima é medido de nosso laboratório, com conexão de rede Vivo Fibra de 100Mbps.
Sendo assim, somente para fins de comparação, o ping para o datacenter da Amazon em São Paulo fica na faixa dos 50ms, de nossa conexão. Enquanto o ping para nossos próprios servidores no Canadá fica em torno de 160ms.
Utilização de um proxy
O proxy mais barato e mais fácil de usar para quem quer diminuir ping é, sem dúvida, a Cloudflare.
Por exemplo, os tempos de ping para a Cloudflare, a partir de nosso laboratório (o mesmo das medidas de ping para os servidores no Brasil) são:
- contas gratutias: 100ms
- contas pagas: 22ms
Inclusive, esta é uma novidade recente da Cloudflare: as contas gratuitas não estão mais sendo roteadas pelo seu ponto de Presença em Guarulhos (SP), mesmo que seja esta a rota mais curta, por causa dos custos de conectividade no Brasil. Sendo assim, o tráfego da conta gratuita está sendo roteado pelo ponto de presença que eles têm em Buenos Aires.
Entretanto, as contas pagas são roteadas pelo melhor ponto de presença, de modo a proporcionar ao usuário o menor tempo de ping possível.
Por isso, falando especificamente de ping, uma conta Pro da Cloudflare pode ser melhor para o site do que um servidor no Brasil quando a audiência desejada não estiver localizada em terras tupiniquins. Caso contrário, é melhor investir em um VPS brasileiro mesmo.
3 – AJAX pode ser prejudicial à velocidade de carregamento
Na nossa vivência diária, lidando com milhares de sites de clientes, é comum observarmos com uma certa tristeza as pessoas fazendo uso muito ineficiente do AJAX para carregamento assíncrono de partes do site.
Entretanto, em se tratando de blogs, particularmente, devemos evitá-lo a todo custo. E quando for algo realmente necessário, todos os esforços devem ser feitos no sentido de usar os recursos da maneira mais sensata e otimizada possível.
No caso da página inicial da PortoFácil — pelo menos na época da redação deste artigo — temos três chamadas que são responsáveis pelo retardo no carregamento:
- Os preços dos VPSs e dos servidores dedicados mais baratos disponíveis em estoque são dinâmicos, ou seja, com duas chamadas AJAX.
- Nosso plugin antispam (WPBruiser) também carrega um script dinâmico que demanda um certo tempo de carregamento e processamento.
- E, de bônus, o Analytics também ajuda a adicionar uns bons milissegundos ao tempo total.
Por isso, em resumo, evite recursos bobos como rolagem infinita, busca com AJAX, e outras amenidades inúteis. Elas podem ter um impacto bem ruim na velocidade de seu site.
2 – Otimize suas imagens
Essa preocupação os clientes da PortoFácil não precisam ter, pois a Mônica otimiza imagens nos servidores automaticamente.
Entretanto, a Mônica não faz nenhum tipo de adequação nas dimensões das imagens armazenadas no servidor. Justamente porque ela não tem como saber que dimensões são adequadas para cada caso.
Nossa recomendação é utilizar o plugin Imsanity para garantir que as imagens enviadas para o servidor não excedam as dimensões úteis para o tema. Visto que o plugin pode redimensionar automaticamente as imagens maiores que um limite previamente determinado.
Além de implicar economia de espaço de armazenamento, esta prática também colabora para que não haja o carregamento de objetos desnecessariamente grandes e pesados no navegador do visitante. Ainda mais quando o visitante é o bot que tanto tentamos agradar.
1 – Cache é fator mais importante na velocidade do site
Principalmente em se tratando de blogs, nada é mais importante do que a eficiência do cache de páginas para a rapidez das páginas. Ou seja, se uma pessoa tem por objetivo obter tempos mínimos de carregamento, então deve priorizar o uso eficiente de caches a qualquer custo.
No site da PortoFácil usamos o recurso do “cache everything” da Cloudflare, cuja utilização está descrita em detalhes no links abaixo:
Para a maioria dos nossos clientes recomendamos usar o WordPress com o cache baseado em REDIS. Contudo, há casos em que será necessário optar por uma outra abordagem. Por exemplo, cache estático, com arquivos fisicamente criados no disco para evitar totalmente as regras de reescrita de URL do WP.
Claro que nem todo mundo consegue adaptar-se a estes caches agressivos. Sendo assim, vale o dito popular: o que não tem remédio, remediado está.
Desempenho extremo com cache “aquecido” previamente
Novamente, nem todo mundo consegue tirar proveito desta dica. Tais como os blogs e sites com muitos milhares de artigos publicados. Mas é o hack que nós usamos para fazer com que nossos próprios sites estejam com os caches sempre povoados com as versões mais recentes de cada post.
Ou seja, trata-se de um script em Bash, feito para rodar no Terminal do Mac OS X (macOS). Provavelmente funcionará — com ou sem modificações — no Windows 10. E muito provavelmente funcionará sem modificação alguma no Linux.
Entretanto, para utilizá-lo tem que saber linha de comando.
cachewarmer.sh:
#!/bin/bash
UAString='Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko'
IgnoreExtensions="\.(jpeg|jpg|png|gif|svg|pdf)"
fqdn=$1
time wget --user-agent "$UAString" --quiet https://$fqdn/sitemap_index.xml --no-cache --output-document - | egrep -o "https://$fqdn[^<]+" | while read line; do
wget --user-agent "$UAString" --quiet $line --no-cache --output-document - | egrep -o "https://$fqdn[^<]+" | egrep -v -i $IgnoreExtensions | sort | while read line2; do
curl -A "$UAString" -s -L $line2 > /dev/null 2>&1
echo $line2
done
echo $line
doneCode language: PHP (php)Salve o arquivo acima e execute-o passando como parâmetro o nome do seu domínio:
. cachewarmer.sh www.portofacil.net
Observações sobre o script
- O código acima está preparado para abrir um sitemap no formato do YOAST SEO. A partir dele todas as demais URLs são descobertas e uma por uma será requisitada como se fosse um visitante utilizando o IE11. Para outros formatos de sitemap será necessário alterar o código.
- O script só trabalha com sites com suporte a SSL (HTTPS) (entenda por quê).
- Informe a URL final de seu site, com ou sem
www.. O código não está preparado para ir atrás da versão correta do seu site. - As requisições são feitas uma de cada vez, em sequência, de forma a gerar o mínimo impacto no servidor. Mas problemas podem acontecer.
- Dependendo do tamanho do seu site (na verdade, do XML de mapa do site) o script poderá demorar de minutos a horas para finalizar. É normal.
- Idealmente esse script deve ser executado sempre que algum evento de limpeza de cache ocorrer. Caberá a você decidir qual é a periodicidade adequada para cada um de seus sites.
É claro que não esperamos que todo mundo tenha a possibilidade de rodar esse script por si mesmo em suas máquinas. Por isso, nossos clientes só precisam entrar em contato com o suporte técnico para obter ajuda para fazer esse docinho rodar corretamente.
Vale lembrar, também, que existem plugins para o WordPress que prometem manter o cache do blog sempre povoado. Mas não encontramos nenhum que fizesse realmente este trabalho de maneira eficiente e confiável.
A “prova do crime”
Desde que passamos a utilizar o expediente de pré-carregamento dos caches em nosso site, reduzimos o tempo de download de página, no Google Webmaster Tools ou Search Console, à metade.
Por exemplo, a imagem abaixo reproduz o gráfico fornecido pelo próprio Google. A setinha marca o dia em que passamos a usar essa técnica efetivamente. Inclusive, houve um teste antes, mas uma setinha vermelha é suficiente para este gráfico.
Considerações finais
Ter um site rápido é o sonho de todos que vivem de Internet. Porém, nem todo mundo está disposto a efetivamente adequar seu site para obter este resultado.
No presente artigo, propositalmente omitimos observações óbvias ou que já deveriam ser de amplo conhecimento, como: (1) não usar plugins desnecessários; (2) evitar plugins ou sistema de estatística no servidor e (3) não usar webfonts.
- Guia de Plugins WordPress: lista dos melhores plugins essenciais
- Lista de web fontes seguras para usar no seu site
O objetivo é citar os principais aspectos que impactam diretamente na velocidade de carregamento de uma página. Com exemplos práticos e evidências.
Por fim, nosso suporte está ao seu dispor para ajudar a encontrar a melhor fórmula para que as páginas de seu site carreguem tão rapidamente quanto possível, para você deixar a concorrência comendo poeira.