Velocidade do site: por que importa e como deixar o seu mais rápido

Velocidade do site é o tempo que uma página leva para aparecer, responder e ficar estável na tela de quem visita. Parece um detalhe técnico, mas ela afeta diretamente quantas pessoas continuam navegando, quantas compram e como o seu site é percebido pelos buscadores.

Segundo o estudo Milliseconds Make Millions, encomendado pelo Google e conduzido pela 55 e pela Deloitte, uma melhora de 0,1 segundo na velocidade no celular aumentou as conversões em 8,4% no varejo e em 10,1% no setor de viagens. O estudo analisou 37 sites de marcas da Europa e dos EUA, com mais de 30 milhões de sessões, usando dados do fim de 2019. Neste guia, você entende o que esses números significam, quais métricas o Google usa e o que fazer, na ordem certa, para deixar seu site mais rápido.

O que os dados mostram sobre velocidade e vendas

O estudo Milliseconds Make Millions acompanhou 37 sites de marcas da Europa e dos EUA e mais de 30 milhões de sessões, com dados do fim de 2019. A pergunta era simples: o que acontece com o comportamento dos visitantes quando o site fica um pouco mais rápido no celular? A resposta mostrou que diferenças pequenas, de um décimo de segundo, já aparecem nos resultados.

No mesmo levantamento, o setor de viagens teve aumento de 10,1% nas conversões com a mesma melhora de 0,1 segundo. No varejo, além de converter mais, os visitantes gastaram mais: o valor médio do pedido subiu 9,2%, segundo o estudo encomendado pelo Google.

Como ler esses números com cuidado: eles vêm de marcas grandes da Europa e dos EUA, não de pequenas lojas brasileiras, e descrevem o que aconteceu naquele conjunto de sites. Eles não garantem o mesmo resultado no seu negócio. O que eles mostram com clareza é a direção: quem visita pelo celular reage à velocidade, e reage rápido. Por isso vale tratar desempenho como parte da experiência de compra, junto com preço, fotos e atendimento.

As três métricas do Google em linguagem simples

O Google reúne a experiência de carregamento em um conjunto chamado Core Web Vitals, ou métricas essenciais da web. São três números, e cada um responde a uma pergunta que o visitante faz sem perceber.

LCP: quando o conteúdo principal aparece

LCP significa Largest Contentful Paint, ou maior exibição de conteúdo. Ele mede quanto tempo leva para o maior elemento visível da tela, normalmente a foto principal ou o título, aparecer. Na prática, responde à pergunta: a página já carregou o que importa?

INP: quanto a página demora para responder

INP significa Interaction to Next Paint, ou interação até a próxima exibição. Ele mede o tempo entre um toque, clique ou digitação e a resposta visual da página. Se você toca em “Adicionar ao carrinho” e nada acontece por um instante, o INP está alto. Ele substituiu o FID, a métrica anterior de resposta, em 12 de março de 2024.

CLS: se a página fica parada no lugar

CLS significa Cumulative Layout Shift, ou mudança cumulativa de layout. Ele mede quanto os elementos pulam de posição enquanto a página carrega. Sabe quando você vai tocar em um link e um banner empurra tudo para baixo? Isso é CLS alto. Diferente das outras duas, essa métrica não tem unidade de tempo: é uma pontuação.

Tabela das faixas

Pelos limites publicados pelo Google, cada métrica tem três faixas. A avaliação usa o percentil 75 das visitas reais, ou seja, o resultado precisa ser bom para pelo menos três em cada quatro visitas, e não apenas para a média.

Como medir a velocidade do seu site

A ferramenta gratuita mais usada é o PageSpeed Insights, do Google. Ela analisa qualquer endereço público e mostra as métricas e sugestões de melhoria. Siga este passo a passo:

1. Abra o PageSpeed Insights no navegador e cole o endereço completo da página, por exemplo a página de um produto, e não só a página inicial.
2. Clique em analisar e espere o relatório. Ele abre na aba de celular; confira também a de computador.
3. Leia primeiro o bloco de dados de usuários reais, que mostra LCP, INP e CLS das visitas de verdade, quando há tráfego suficiente.
4. Depois veja o diagnóstico de laboratório, com a pontuação de desempenho e a lista de oportunidades.
5. Anote os números, faça uma mudança por vez e teste de novo para comparar.

Dados de laboratório e dados de usuários reais

Os dados de laboratório vêm de um teste simulado, feito em um aparelho e uma conexão padronizados. São ótimos para encontrar problemas e conferir se uma correção funcionou, porque o teste se repete nas mesmas condições.

Os dados de usuários reais, também chamados de dados de campo, vêm das visitas de pessoas reais em aparelhos e redes variados. É sobre eles que o Google aplica as faixas das Core Web Vitals, no percentil 75. Um site novo ou com pouco tráfego pode não ter dados reais suficientes; nesse caso, use o laboratório como guia até eles aparecerem.

Um exemplo concreto: a pontuação de laboratório da página de produto pode estar baixa por causa de um vídeo pesado, enquanto os dados reais ainda aparecem bons porque a maioria das visitas chega por outra página. Os dois olhares se completam.

O que deixa um site lento

Na maior parte dos casos, a lentidão vem de poucas causas que se repetem:

• Imagens grandes demais: fotos enviadas direto da câmera, em tamanho muito maior do que a tela exibe, e em formatos antigos.
• Scripts de terceiros: chats, pixels de anúncios, mapas, widgets de avaliações e ferramentas de análise que carregam código de outros servidores.
• Fontes: várias famílias e pesos de letra baixados de fora, que atrasam o texto ou fazem a página pular quando trocam.
• Hospedagem fraca: servidor lento para responder, distante do público ou sem cache.
• Excesso de plugins: em plataformas como WordPress, cada extensão pode adicionar scripts e estilos em todas as páginas, mesmo onde não são usados.

Banners que entram depois do carregamento, anúncios sem espaço reservado e imagens sem largura e altura definidas são as causas mais comuns de CLS alto. Botões que demoram a responder costumam vir de scripts pesados rodando ao mesmo tempo, o que piora o INP.

Passo a passo para deixar o site mais rápido

Siga a ordem abaixo, que vai do mais fácil ao mais difícil. Teste depois de cada etapa.

1. Comprima e redimensione imagens

Exporte as imagens no tamanho em que aparecem na tela e use formatos modernos, como WebP. Uma foto de produto exibida em uma coluna estreita não precisa ter a largura de uma tela de cinema.

2. Defina tamanho para imagens e espaços

Informe largura e altura das imagens e reserve espaço para banners e avisos. Assim o navegador sabe quanto lugar guardar e a página não pula, o que melhora o CLS.

3. Carregue imagens de baixo só quando necessário

Ative o carregamento sob demanda, chamado lazy loading, para imagens que ficam mais abaixo na página. A exceção é a imagem principal do topo: ela deve carregar logo, porque costuma ser o elemento medido pelo LCP.

4. Revise os scripts de terceiros

Liste tudo o que foi instalado ao longo do tempo: chats, pixels, pop-ups, testes antigos. Remova o que ninguém usa e adie o que não precisa estar pronto no primeiro segundo. Esse passo costuma ajudar tanto o LCP quanto o INP.

5. Simplifique as fontes

Use uma ou duas famílias de letra, com poucos pesos. Sempre que possível, hospede os arquivos no próprio site e indique ao navegador qual fonte é prioritária.

6. Reduza plugins e temas pesados

Desative plugins sem uso e troque os que fazem a mesma coisa por um só. Prefira temas leves e evite construtores visuais que carregam muito código em toda página.

7. Ative cache e avalie a hospedagem

Cache guarda versões prontas das páginas para entregar mais rápido. Se, depois de tudo isso, o servidor ainda demora para responder, considere uma hospedagem melhor ou uma rede de distribuição de conteúdo. Essa é a etapa mais trabalhosa e deve vir por último, quando as outras já foram feitas.

Se você está montando a loja agora, o guia de como montar uma loja virtual ajuda a escolher uma plataforma que já resolve parte desses pontos desde o início.

Velocidade e SEO: o que o Google considera

SEO é a otimização para buscadores. As Core Web Vitals fazem parte dos sinais de experiência da página que o Google considera. Elas não substituem o essencial: um conteúdo relevante para a busca continua sendo o fator decisivo. Um site rápido com conteúdo fraco não passa na frente de uma página que responde melhor à pergunta do usuário.

Na prática, velocidade funciona como critério de qualidade e de desempate, e influencia o comportamento de quem chega: uma página que carrega rápido segura o visitante que veio da busca. Se você investe em conteúdo para atrair visitas, a velocidade ajuda a aproveitar cada uma delas.

Para entender como velocidade se encaixa na sua estratégia de divulgação, vale ler o comparativo entre tráfego pago ou orgânico. Nos dois casos, você paga pelo visitante de alguma forma, em dinheiro ou em esforço, e uma página lenta desperdiça esse investimento. Depois de deixar o site rápido, o próximo passo é organizar as páginas para vender: veja o guia sobre site que converte.

Checklist de velocidade

• Medi as páginas principais no PageSpeed Insights, no celular e no computador.
• Anotei LCP, INP e CLS dos dados reais, quando disponíveis.
• Imagens estão no tamanho de exibição e em formato moderno.
• Imagens e banners têm espaço reservado.
• Imagem principal do topo carrega primeiro; as de baixo, sob demanda.
• Removi scripts de terceiros sem uso e adiei os não essenciais.
• Uso no máximo duas famílias de fonte.
• Plugins sem uso foram desativados.
• Cache está ativo.
• Testo de novo depois de cada mudança.

Erros comuns

• Testar só a página inicial: as páginas de produto e de checkout costumam ser as mais pesadas e as que mais importam para a venda.
• Olhar só a pontuação: a nota de laboratório ajuda, mas as métricas de usuários reais são as que o Google avalia.
• Testar só no computador: o estudo citado mediu a velocidade no celular, e é no celular que a maioria das limitações aparece.
• Mudar tudo de uma vez: sem testar cada mudança, você não sabe o que funcionou nem o que quebrou.
• Instalar mais um plugin para resolver lentidão: às vezes resolve, mas muitas vezes acrescenta peso. Comece removendo.
• Usar lazy loading na imagem principal: atrasa justamente o elemento que define o LCP.

Conclusão

Velocidade é parte da experiência de compra. Meça as páginas que vendem, entenda LCP, INP e CLS, corrija primeiro imagens e scripts e só depois pense em trocar hospedagem. Pequenas melhorias somadas fazem diferença para quem visita pelo celular.

Fontes

• Milliseconds Make Millions — web.dev — estudo encomendado pelo Google, conduzido pela 55 e pela Deloitte, com 37 sites de marcas da Europa e dos EUA e dados do fim de 2019
• Web Vitals — web.dev — limites e faixas oficiais das Core Web Vitals do Google