Performance de Sites: Guia de Core Web Vitals e Otimização

Aprenda a medir e melhorar LCP, INP e CLS com dados de campo, diagnóstico por página e ações práticas para imagens, JavaScript, fontes e servidor.

Otimizar a performance de um site significa melhorar a experiência real de carregamento, resposta e estabilidade visual. O trabalho começa medindo páginas e usuários representativos, identifica o maior gargalo e valida se a mudança produziu resultado sem quebrar funcionalidade ou acessibilidade.

Pontuações de laboratório ajudam no diagnóstico, mas não substituem dados de campo. Rede, aparelho, localização, consentimento e comportamento real mudam a experiência.

O que são Core Web Vitals

Os Core Web Vitals são métricas de experiência mantidas pelo projeto Web Vitals:

LCP mede quando o maior elemento de conteúdo visível é apresentado;
INP mede a capacidade de resposta às interações ao longo da visita;
CLS mede mudanças inesperadas de layout.

As faixas recomendadas são LCP de até 2,5 segundos, INP de até 200 milissegundos e CLS de até 0,1. A avaliação deve observar o percentil 75 das visitas, separado por dispositivos móveis e desktop.

Esses limites são referências de experiência, não a única definição de qualidade. Uma página pode atender aos três e ainda possuir erros, fluxo confuso ou conteúdo inacessível.

Dados de campo e laboratório têm funções diferentes

Dados de campo mostram o que visitantes reais vivenciam. Podem vir do Chrome User Experience Report, Search Console ou de monitoramento próprio com uma biblioteca de Web Vitals.

Ferramentas de laboratório, como Lighthouse e painéis de desempenho do navegador, reproduzem condições controladas e detalham causas. Use campo para descobrir onde existe impacto e laboratório para investigar e repetir testes.

Compare páginas equivalentes e observe distribuição, não apenas média. Uma pequena parcela com experiência muito ruim pode desaparecer no valor médio.

Como melhorar LCP

O elemento de LCP costuma ser imagem principal, bloco de texto ou banner. Investigue o tempo até o primeiro byte, o momento em que o navegador descobre o recurso, a duração do download e o atraso para renderizar.

Ações frequentes:

reduza redirecionamentos e tempo do servidor;
coloque o conteúdo principal no HTML inicial;
não carregue a imagem de LCP de forma preguiçosa;
use imagem dimensionada e formato eficiente;
priorize o recurso principal quando necessário;
reduza CSS e JavaScript que bloqueiam apresentação;
use cache e distribuição adequados ao conteúdo.

Não aplique prioridade alta a muitas imagens; prioridade deixa de ter efeito quando tudo é prioritário.

Como melhorar INP

INP piora quando o navegador demora para iniciar ou concluir a resposta a uma interação. JavaScript longo, renderizações extensas e muitos componentes atualizados ao mesmo tempo são causas comuns.

Registre quais interações apresentam atraso. Depois:

divida tarefas longas e permita que o navegador processe eventos;
reduza JavaScript próprio e de terceiros;
evite hidratar componentes que não precisam de interatividade;
limite o trabalho executado por clique ou digitação;
use virtualização em listas realmente grandes;
adie processamento não essencial;
ofereça retorno visual imediato quando a operação levar tempo.

Trocar o framework sem um perfil de execução raramente é o primeiro passo mais eficiente.

Como melhorar CLS

CLS mede deslocamentos inesperados. Reserve dimensões para imagens, vídeos, embeds e anúncios. Evite inserir banners acima do conteúdo já apresentado e cuide da troca de fontes.

Para conteúdo dinâmico, use espaços reservados que se aproximem do tamanho final. Animações de transformação tendem a ser mais estáveis que mudanças em propriedades que recalculam layout.

Teste também estados de consentimento, erro e personalização; eles podem não aparecer no caminho padrão do laboratório.

Imagens responsivas

Enviar uma imagem grande para uma tela pequena desperdiça rede e processamento. Use tamanhos alternativos e informe ao navegador quanto espaço a imagem ocupará. O artigo do web.dev sobre imagens responsivas explica o uso de recursos como srcset e sizes.

Comprima sem comprometer a finalidade visual, remova metadados desnecessários e carregue de forma preguiçosa imagens fora da primeira tela. Sempre preserve dimensões para evitar deslocamento.

Fontes e terceiros

Subconjuntos de fonte, poucos pesos e preload seletivo podem reduzir custo. Configure comportamento de exibição conscientemente e verifique se a troca altera o layout.

Scripts de analytics, atendimento, anúncios e testes podem dominar a thread principal. Inventarie cada terceiro, seu proprietário e seu valor. Carregue após consentimento e somente nas páginas necessárias. Remover um script sem uso costuma ser melhor que tentar otimizá-lo.

Servidor, cache e dados

Uma resposta lenta pode vir de consultas em cascata, chamadas externas, ausência de índice ou geração repetida de conteúdo estável. Meça cada dependência com traces e métricas.

Cache exige política: o que pode ser reutilizado, por quanto tempo e como invalidar. Conteúdo personalizado ou sensível não deve entrar em cache público por engano.

Se o projeto envolve arquitetura e operação mais amplas, veja o guia de aplicações web modernas.

Orçamento e monitoramento contínuo

Defina limites para JavaScript, imagens, fontes e métricas por tipo de página. Inclua verificações no desenvolvimento, mas evite bloquear uma implantação por variação mínima de laboratório.

Em produção, acompanhe regressões por versão e segmento. Uma mudança pode ajudar aparelhos rápidos e prejudicar os mais modestos. Relacione métricas técnicas com abandono, conclusão e erros, sem confundir correlação com causa.

Plano de otimização

Selecione páginas e fluxos de maior importância.
Colete dados de campo por dispositivo.
Reproduza o problema em laboratório.
Identifique o elemento, interação ou dependência responsável.
Faça uma alteração pequena e mensurável.
Teste funcionalidade e acessibilidade.
Publique de forma controlada.
Aguarde dados suficientes e compare a distribuição.

Para aplicar esse processo em um projeto novo ou existente, conheça nosso serviço de criação de sites.

Conclusão

Performance sustentável vem de medição contínua e responsabilidade compartilhada. Core Web Vitals fornecem sinais úteis, mas o objetivo final é uma experiência rápida e estável para pessoas reais, sem sacrificar conteúdo, segurança ou acessibilidade.