Como melhorar a velocidade do site: guia prático de Core Web Vitals

O que são Core Web Vitals?

As Core Web Vitals são métricas do Google voltadas para experiências reais de carregamento, interatividade e estabilidade visual. O conjunto atual inclui Largest Contentful Paint, Interaction to Next Paint e Cumulative Layout Shift. Elas podem ser acompanhadas em ferramentas como PageSpeed Insights, Chrome DevTools e Search Console.

O Google recomenda, no 75º percentil das visitas e separando celular de computador, LCP de até 2,5 segundos, INP de até 200 milissegundos e CLS de até 0,1. Isso significa que a avaliação considera a experiência da maioria dos usuários, não apenas um teste realizado no computador do proprietário.

Core Web Vitals fazem parte da experiência na página, mas não são a única condição para aparecer na Pesquisa. Conteúdo útil, relevância, acessibilidade, segurança e outros sinais continuam importantes. Melhorar desempenho é valioso para pessoas e negócios, não um atalho garantido para subir posições.

• LCP: rapidez para mostrar o maior conteúdo visível
• INP: resposta da página às interações
• CLS: estabilidade dos elementos durante o uso

LCP: quando o conteúdo principal aparece

O LCP mede quanto tempo leva para o maior elemento de conteúdo visível ser renderizado. Em uma página de serviço, esse elemento pode ser a imagem principal, um banner ou um bloco grande de texto. Quando ele demora, o visitante percebe que a página ainda não está pronta.

As causas comuns incluem servidor lento, imagem hero muito pesada, recurso descoberto tarde pelo navegador, CSS que bloqueia a renderização e JavaScript executado antes do necessário. Por isso, trocar apenas o formato da imagem nem sempre resolve.

Comece identificando qual elemento é o LCP no PageSpeed ou no DevTools. Depois verifique a cadeia completa: tempo de resposta do servidor, descoberta do arquivo, download e renderização. A melhor correção é aquela que elimina o maior atraso real, não a que aparece primeiro em uma lista genérica.

INP: quando o site responde ao toque

O INP observa a capacidade de resposta ao longo da visita. Ele considera o tempo entre uma interação, como clique, toque ou digitação, e a próxima atualização visual. Um botão que demora para abrir o menu ou um formulário que congela ao preencher pode produzir uma experiência ruim.

JavaScript excessivo é uma causa frequente. Scripts de chat, rastreamento, animação, mapas, vídeos, widgets e bibliotecas podem disputar a linha principal do navegador. Em celulares menos potentes, tarefas longas se tornam mais perceptíveis.

Para melhorar, reduza o trabalho executado em cada interação, divida tarefas longas, carregue recursos não essenciais depois e evite recalcular grandes partes da interface sem necessidade. Também dê retorno visual rápido: ao enviar um formulário, mostre que a ação foi recebida enquanto o processamento continua.

CLS: quando a página para de pular

O CLS mede mudanças inesperadas de layout. O problema aparece quando uma imagem sem espaço reservado carrega e empurra o texto, um banner surge acima do conteúdo ou uma fonte troca de tamanho depois que a pessoa começou a ler.

Além de incomodar, a instabilidade pode causar cliques errados. O visitante tenta tocar no WhatsApp e o botão muda de lugar; tenta ler uma oferta e um bloco aparece no meio. Em páginas comerciais, isso reduz confiança e pode interromper a ação.

Defina largura e altura de imagens e vídeos, reserve espaço para elementos dinâmicos e evite inserir conteúdo acima do que já está visível. Fontes devem ser carregadas com estratégia e dimensões compatíveis. Animações que usam transform costumam ser mais previsíveis do que alterações que reposicionam o layout.

Como usar o PageSpeed Insights sem se prender à nota

O PageSpeed Insights apresenta dados de campo quando existe volume suficiente no Chrome User Experience Report e dados de laboratório gerados em uma simulação. Os dois grupos servem a objetivos diferentes. Campo mostra o que usuários reais viveram; laboratório ajuda a diagnosticar problemas em condições controladas.

Uma pontuação baixa é um alerta, não um diagnóstico completo. Leia qual métrica falhou, qual elemento foi identificado e quais recursos consomem tempo. Uma página pode ganhar pontos com mudanças que quase não alteram a experiência percebida, enquanto o problema comercial continua.

Execute testes mais de uma vez e registre data, página e condições. Avalie a página inicial, serviços, landing pages e artigos separadamente. Não conclua que todo o site está rápido apenas porque um endereço passou. Modelos, imagens e scripts podem variar entre páginas.

Dados de laboratório e dados reais podem divergir

O teste de laboratório usa um ambiente definido e é útil antes de publicar uma alteração. Ele permite repetir condições, comparar versões e encontrar recursos bloqueadores. Porém, não reproduz todos os aparelhos, redes e comportamentos.

Dados de campo reúnem experiências reais e podem refletir diferentes dispositivos e conexões. Eles são agregados ao longo do tempo, por isso uma correção não aparece instantaneamente no relatório do Search Console. Também pode não haver dados suficientes para páginas novas ou com pouco tráfego.

Use laboratório para investigar e validar durante o desenvolvimento; use campo para saber se a melhoria alcançou o público. Quando houver diferença, não escolha simplesmente o número mais favorável. Investigue segmentos como celular, modelo de página, região, navegador e origem do tráfego.

Otimize imagens sem estragar a apresentação

Imagens costumam representar grande parte do peso visual. Exporte no tamanho aproximado em que serão exibidas, comprima com qualidade adequada e considere formatos modernos como WebP ou AVIF quando compatíveis com o fluxo do projeto. Uma foto de milhares de pixels não precisa ser enviada integralmente para um card pequeno.

Use imagens responsivas para que o navegador escolha arquivos adequados à tela. Conteúdo abaixo da primeira dobra pode usar carregamento tardio, mas a imagem principal responsável pelo LCP não deve ser atrasada indiscriminadamente. Ela precisa ser descoberta e priorizada cedo.

O texto alternativo continua necessário para acessibilidade e compreensão da imagem; ele não acelera o arquivo. Evite colocar informações importantes somente dentro de banners. Texto em HTML é mais adaptável, selecionável e legível em diferentes telas.

Revise fontes, vídeos e recursos externos

Fontes personalizadas podem bloquear texto ou provocar troca visual. Reduza famílias e variações, hospede arquivos de forma eficiente quando fizer sentido e carregue apenas os pesos usados. Uma identidade consistente não precisa de muitas fontes.

Vídeos de fundo e animações chamam atenção, mas também consomem rede, processamento e bateria. Use capa estática, carregamento sob demanda e arquivos adequados ao dispositivo. No mobile, considere uma experiência mais leve quando o movimento não for essencial.

Recursos de terceiros merecem auditoria. Cada chat, mapa, pixel ou widget adiciona custo. Liste quem usa cada recurso, qual objetivo atende e se pode ser carregado após consentimento ou interação. Remover um script sem função costuma ser mais eficaz do que tentar otimizar seu impacto.

Melhore servidor, cache e entrega

Se o servidor demora para responder, o navegador começa todo o restante atrasado. Verifique hospedagem, processamento dinâmico, consultas, chamadas externas e localização da infraestrutura. Cache pode evitar gerar repetidamente páginas ou arquivos que mudam pouco.

Arquivos estáticos devem usar políticas de cache adequadas e compressão. Uma rede de distribuição de conteúdo pode aproximar imagens, estilos e scripts dos visitantes, mas não corrige aplicações ineficientes. Primeiro identifique o gargalo.

Em um negócio de Betim e Grande BH, muitos acessos podem ocorrer por rede móvel durante deslocamentos. Atendimento online em todo o Brasil amplia ainda mais a variedade de conexões. Projetar para condições realistas é mais útil do que testar somente em Wi-Fi rápido.

Dê prioridade ao conteúdo visível e à ação principal

A primeira tela não precisa carregar tudo. Priorize título, proposta, imagem essencial e chamada para ação. Galerias extensas, mapas, depoimentos em carrossel e integrações podem aguardar até se aproximarem da área visível.

Isso não significa esconder conteúdo de mecanismos de busca nem entregar uma página vazia. A estrutura principal deve existir e ser acessível. O carregamento progressivo serve para ordenar recursos, preservando conteúdo e funcionalidade.

Teste o caminho comercial: abrir serviço, tocar no WhatsApp, preencher formulário, alternar tema e navegar pelo menu. Um site tecnicamente rápido, mas com botão quebrado ou contraste ruim, ainda oferece uma experiência ruim.

Como priorizar correções sem refazer todo o site

Comece pelas páginas que recebem tráfego ou geram contatos. Meça a página inicial, o principal serviço e a landing page ativa. Para cada uma, registre o elemento LCP, as interações lentas, as mudanças de layout e os recursos mais pesados.

Classifique ajustes por impacto, esforço e risco. Comprimir uma imagem enorme pode ser simples e importante. Trocar toda a arquitetura exige mais teste. Faça alterações em pequenos grupos, compare antes e depois e verifique se nada funcional foi quebrado.

Evite perseguir 100 pontos como objetivo isolado. A meta é atingir limites recomendados para usuários reais e manter uma página útil. Se remover uma informação essencial aumenta a nota, a solução não é necessariamente melhor para o negócio.

• Corrigir imagens principais superdimensionadas
• Reservar espaço para mídia e blocos dinâmicos
• Remover scripts sem finalidade comprovada
• Adiar recursos abaixo da primeira tela
• Reduzir tarefas longas de JavaScript
• Ajustar cache e resposta do servidor

Monitoramento depois da correção

Desempenho pode regredir quando alguém adiciona um vídeo, troca o chat, instala um pixel ou publica imagens sem tratamento. Por isso, crie uma rotina mensal e testes antes de mudanças importantes.

O relatório de Core Web Vitals no Search Console agrupa URLs com comportamentos semelhantes e permite acompanhar problemas em celular e computador. O PageSpeed ajuda a investigar páginas específicas. Monitoramento próprio com a biblioteca web-vitals pode oferecer detalhe adicional quando o projeto necessita.

Registre alterações e datas para não confundir melhora técnica com variações de tráfego. Relacione performance a eventos de contato e abandono, mas evite atribuir toda mudança de conversão à velocidade. Oferta, preço, clareza e origem do visitante também influenciam.

Checklist prático para um site mais rápido

Faça a revisão abaixo primeiro no celular e depois no computador. Use pelo menos uma página institucional, um serviço, um artigo e uma landing page. Se o projeto tiver modelos diferentes, cada modelo merece teste.

Depois de corrigir, valide visualmente e percorra formulários e botões. Uma otimização só está concluída quando melhora desempenho sem quebrar conteúdo, acessibilidade ou rastreamento.

• Testar páginas prioritárias no PageSpeed Insights
• Identificar os elementos de LCP e CLS
• Verificar interações lentas e tarefas longas
• Redimensionar e comprimir imagens
• Revisar fontes, vídeos, animações e terceiros
• Configurar cache e compressão
• Testar WhatsApp, formulários, menu e tema
• Acompanhar dados de campo no Search Console
• Repetir a auditoria após alterações relevantes

Conclusão: velocidade é experiência, não troféu

Melhorar a velocidade do site significa fazer o conteúdo aparecer cedo, responder às ações e permanecer estável. LCP, INP e CLS oferecem uma linguagem comum para medir esses resultados, mas precisam ser interpretados junto com a experiência real.

Comece pelas páginas mais importantes, encontre o gargalo verdadeiro e corrija em etapas. Imagens, JavaScript, recursos externos, servidor e layout devem ser avaliados conforme o impacto. Teste no celular e acompanhe dados de campo.

A Exponha desenvolve e revisa sites para pequenos negócios de Betim e Grande BH, com atendimento online em todo o Brasil. O objetivo é equilibrar apresentação, conteúdo, conversão e desempenho, mantendo cada recurso porque ele cumpre uma função.