Meu site tem uma nota de velocidade baixa. O que fazer?

Essa pergunta é muito comum, infelizmente. E respondê-la é bastante complicada. De forma resumida, é possível que tenham algumas coisas técnicas que podem ser feitas para melhorar os resultados, mas provavelmente o problema não é tão grave quanto parece. Neste artigo, vou tentar explicar isso da melhor forma possível.

Uma observação importante. Neste artigo há diversas simplificações feitas em nome da didática. Se você busca uma explicação mais técnica, este texto não é para você.

O desafio de testar a performance de um site

Medir o desempenho de um site não é tão simples quanto parece.

Em primeiro lugar, o que é “velocidade”?

Por muito tempo, essa performance era medida pensando no tempo que um site demora para carregar. Quando as conexões de internet eram limitadas e os sites eram estáticos, quanto maior o tamanho do site, mais tempo o navegador levaria para baixar tudo. Então bastava ter um site pequeno, em bytes, que o site provavelmente seria mais rápido.

O problema é que os sites ficaram mais e mais complexos. Em muitos casos, o site só vai ser gerado no momento que o usuário quiser acessar o site. Imagine, por exemplo, que você está visitando o Facebook no navegador. Ele precisa decidir quais posts mostrar para você, então o site está sendo gerado constantemente conforme você navega por ele. Para uns usuários o site vai ter alguns kilobytes. Para outros ele pode ter milhares de vezes mais.

Além disso, muitas vezes os sites são construídos de forma elaborada no próprio navegador do usuário. Se a página tiver muitos scripts JavaScript, por exemplo, o conteúdo do site vai ser montado dinamicamente pelo computador ou celular do usuário e não pelo servidor de origem. Um computador mais lento pode passar um pouco mais de trabalho para fazer esse serviço.

Sabendo disso, não dá mais para dizer que um site de 5 mb é pior do que um site de 500 kb.

Ferramentas de análise

Como uma forma de encontrar resultados mais precisos, surgiram ferramentas de análise que testavam diferentes coisas no site para entender se ele era rápido ou não. É o caso do YSlow, do PageSpeed e do GTmetrix.

O que essas ferramentas fazem é o seguinte:

1. Elas acessam o seu site
2. Elas testam o site com base em uma lista de regras
3. Elas dão uma nota para o site dependendo se o site cumpre as regras ou não

Ou seja, essas ferramentas vão analisar coisas que podem atrapalhar a velocidade do site, mas elas não têm como saber se elas realmente atrapalham.

É bastante comum um site ter vários pontos negativos, mas ser rápido na prática. Ou então ter uma nota excelente e fazer tudo direitinho, mas ainda assim ser lento para quem usa.

O que afeta a velocidade de um site?

A gente poderia escrever um livro tentando listar tudo que pode afetar a velocidade de um site. Mas tentando resumir, nós poderíamos classificar assim:

• Conexão: se a internet do usuário for ruim, o site pode demorar mais para carregar.
• Desempenho do dispositivo: se o computador ou celular do usuário for mais lento, ele pode demorar mais para estruturar o site.
• Desempenho do servidor: o site fica hospedado em um servidor que envia os arquivos para os usuários. Se o servidor for lento ou estiver sobrecarregado, os arquivos vão demorar para ser enviados.
• Tamanho do site: se todos os arquivos do site forem muito pesados, pode demorar mais para baixá-los.
• Tecnologias envolvidas: para o site funcionar, ele pode usar algumas tecnologias como bibliotecas JS ou gerenciadores de conteúdo como o WordPress. Tecnologias desatualizadas ou desnecessárias podem acabar pesando seu site.
• Falta de otimização: algumas coisas podem ser feitas para o site funcionar mais rapidamente. Para dar um exemplo, imagine que uma imagem vai aparecer no site com apenas 100 pixels de largura. Nesse caso, não faz sentido enviar para o usuário uma imagem enorme, com 2000 pixels de largura, porque a maior parte desses pixels não será exibida. Reduzir imagens, comprimir código e ter uma política de cache são alguns exemplos de otimização.
• Problemas de código: às vezes, o site pode ter alguns problemas que podem atrapalhar seu carregamento. Isso pode acontecer se forem usados muitos plugins diferentes ou se algum plugin for mal feito.

Então, o que as ferramentas de análise fazem, é olhar para todos esses pontos aí e tentar medir como o seus site se sai em cada um deles.

Entretanto, existe uma questão traiçoeira: algumas coisas que o site precisa ter podem atrapalhar seu carregamento. Por exemplo, se sua marca usa uma fonte tipográfica especial, ela precisa estar carregada no site. Como o usuário provavelmente não tem a fonte instalada no próprio computador, é mais um arquivo pesado que ele precisa baixar toda vez que entrar no site. Sem dúvidas, a internet seria muito mais rápida se todos os sites usassem apenas Times New Roman ou Arial, mas isso não é uma opção.

Outro exemplo que costuma afetar bastante os sites são scripts de terceiros. Para usar o pixel do Facebook, o código de rastreamento do Google Analytics ou o popup do RD Station, é necessário instalar códigos no site que, muitas vezes, afetam diretamente a performance.

Usando dados práticos

Uma outra abordagem é tentar medir seu site na prática. Ferramentas como o PageSpeed Insights usam dados reais de usuários do Chrome para saber quanto tempo, em média, um site demora para ser carregado. O Google Analytics também oferece dados desse tipo. Nesse caso os resultados são mais confiáveis, já que eles mostram como o seu site se sai no dia-a-dia. Mas, sozinhos, eles são menos claros, já que não dá para saber exatamente o que está afetando a performance.

Por isso, é muito interessante ficar de olho tanto nas boas práticas quanto nos dados reais de usuários.

As métricas do Google: Core Web Vitals

Em 2020, o Google lançou o Web Vitals.

As Web Vitals são uma iniciativa do Google para fornecer orientação unificada em relação a sinais de qualidade essenciais que visam proporcionar uma ótima experiência ao usuário na web.

A ideia é tentar entender, dentre todas as coisas que dá para medir em um site, o que é realmente o mais importante?

Pensando nisso, eles se concentraram em três aspectos fundamentais da experiência do usuários:

• Carregamento: medido pela métrica Largest Contentful Paint (LCP). Na prática, é analisado quanto tempo leva para carregar os elementos maiores e mais visíveis do site.
• Interatividade: medido pelo First Input Delay (FID), ele mensura quanto tempo leva entre uma ação do usuário (ex.: clicar em um botão) até realmente acontecer alguma coisa
• Estabilidade visual: medido pelo Cumulative Layout Shift (CLS) que analisa o quanto uma página muda visualmente depois do carregamento.

Além de outras métricas complementares.

Observação: o FID está sendo substituído por outra métrica, o Interaction to Next Paint (INP). Se um usuário clica em um botão que deveria abrir um popup, por exemplo, na métrica antiga era medido quanto tempo levava desde o clique no botão até o popup estar completamente carregado. Agora, será medido o tempo que leva até qualquer coisa acontecer (como por exemplo, aparecer um aviso de "carregando"). Saiba mais aqui.

A grande mudança desse novo método do Google é que, agora, não importa muito quanto tempo leva para o site todo carregar, mas sim a sensação de que as coisas estão acontecendo. Essa escolha faz todo o sentido: para o usuário, é muito melhor que ele possa já interagir com o site logo ao invés de ficar olhando para uma tela em branco por muito tempo. Por outro lado, essas métricas tornam a análise muito mais exigente. É uma métrica bem mais difícil de ter sucesso, porque mesmo que você tenha uma nota de 100% em outros métodos como o GTmetrix, você ainda pode ter uma nota baixa aqui. Ou seja, não basta mais seguir todas as boas práticas de programação, você precisa garantir que elas tenham um impacto positivo na experiência do usuário.

Passar no teste ou ser funcional?

Sabendo disso tudo, o grande desafio é tentar entender o que é realmente importante para você. Obviamente, os resultados de análises desse tipo dão pistas úteis de melhorias que podem ser feitas no seu site e, inclusive, podem indicar que há um problema a ser resolvido.

Mas, por outro lado, cumprir todos os critérios que os testes analisam pode ser ruim para você. Como eu comentei, diversas ferramentas necessárias no seu site podem estar deixando ele lento. Para fazer bons anúncios nas plataformas do Facebook, é essencial usar o pixel de rastreamento em seu site. Remover o pixel pode deixar o site mais rápido, mas também pode significar anúncios piores e menos vendas. Nesse caso, provavelmente é impossível tirar uma nota máxima em um site de vida real. Inclusive, um estudo mostrou que só 39% dos sites passam na avaliação dos Core Web Vitals.

Minha opinião é a de que o Google está sendo exigente na avaliação de propósito, como uma forma de pressionar os desenvolvedores a prestar atenção em coisas que eles nem sempre prestam. Mas eles sabem que não é possível alcançar a nota máxima.

Portanto, caso o seu site tenha uma nota de velocidade ruim, não é o fim do mundo. É importante revisar os pontos do relatório para ver se é possível fazer alguma otimização e também ficar de olho na sua conversão para ver se ela não caiu ou se está dentro do aceitável. Em alguns casos, é possível fazer ajustes pequenos. Em outros casos, talvez você tenha que abrir mão de alguma funcionalidade no site para melhorar. Em situações extremas pode até ser necessário fazer um site novo. Mas, o mais provável é que você não vai conseguir passar nesse teste com nota máxima, então pode ficar tranquilo.