Site lento perde cliente: o que é o PageSpeed e como chegar a 100

Por Robinson Batista da Silva, desenvolvedor sênior da Authentic Development

Quem abre o seu site pelo celular, no 4G, não espera. O PageSpeed Insights mostra quanto essa espera custa, e quase sempre dá para resolver.

O que é o PageSpeed Insights

O PageSpeed Insights é uma ferramenta gratuita do Google: você cola o endereço do site e recebe notas de 0 a 100 em quatro áreas: desempenho, acessibilidade, boas práticas e SEO. A nota de desempenho simula um celular intermediário com uma conexão lenta, de propósito: é a situação de boa parte de quem vai visitar o seu site.

Abaixo das notas, a ferramenta lista o que está atrasando a página. É um bom ponto de partida, mesmo para quem não é técnico.

As Core Web Vitals

Além da nota de laboratório, o Google acompanha três medidas da experiência real de quem visita, chamadas Core Web Vitals:

• LCP (maior conteúdo visível): quanto tempo o principal conteúdo da página leva para aparecer. O bom é até 2,5 segundos.
• INP (resposta a interações): quanto a página demora para reagir a um toque ou clique. O bom é até 200 milissegundos.
• CLS (estabilidade visual): quanto a página "pula" enquanto carrega, como quando você vai tocar num botão e ele muda de lugar. O bom é até 0,1.

Esses dados vêm de visitantes reais que usam o Chrome e só aparecem quando o site tem visitas suficientes. Eles entram como um dos sinais que o Google usa para ordenar os resultados. Não são o fator principal (o conteúdo ainda vem primeiro), mas entre duas páginas parecidas, a mais rápida leva vantagem.

Por que velocidade vira cliente

Cada segundo de tela branca é uma chance de a pessoa voltar para a busca e clicar no concorrente. E quem desiste não aparece em lugar nenhum: você nem fica sabendo que perdeu o contato. Um site rápido não garante a venda, mas garante que a pessoa chegue a ler o que você tem a oferecer.

O que costuma deixar um site lento

• Imagens pesadas: fotos enviadas direto da câmera ou do celular, com vários megabytes, para aparecer num espaço pequeno.
• Excesso de scripts: janelas de chat, pixels de anúncio, carrosséis, pop-ups e plugins que carregam código mesmo quando não são usados.
• Construtores visuais e temas prontos: costumam trazer muito código para atender a todos os casos, inclusive os que o seu site não usa.
• Muitas fontes: cada família e peso de letra é mais um arquivo para baixar.
• Hospedagem lenta: um servidor que demora a responder atrasa tudo o que vem depois.

Como chegar perto de 100

1. Redimensione as imagens para o tamanho em que aparecem e use formatos modernos, como WebP ou AVIF.
2. Informe largura e altura das imagens e reserve espaço para o que carrega depois. Isso resolve a maior parte do CLS.
3. Corte o que não traz cliente: cada script de terceiros precisa justificar o peso.
4. Prefira as fontes do sistema, ou no máximo uma família hospedada no próprio site.
5. Hospede em um serviço com CDN, que entrega os arquivos a partir de um servidor perto do visitante, e configure o cache.
6. Meça de novo depois de cada mudança. A nota varia um pouco entre medições; o que importa é a tendência.

Este site é o exemplo

Este blog e o site da Authentic Development são feitos em HTML e CSS puros, sem JavaScript, com as fontes do próprio aparelho e hospedagem com CDN. O resultado é 100 nas quatro notas do PageSpeed no celular. Você pode conferir agora: cole o endereço desta página na ferramenta.

Nem todo site precisa ser tão enxuto. Uma loja ou um sistema de agendamento precisa de mais recursos. Mas a regra vale para todos: cada coisa que entra na página tem que valer o tempo que ela custa a quem está esperando.