Teste de velocidade do site: o que LCP, INP e CLS dizem sobre carregamento, resposta e estabilidade

Comece pela experiência que você quer criar

Escolha uma tarefa importante e descreva como seria a versão fluida dela. Em uma página de produto, o título, o preço e a imagem principal devem ajudar a entender o item rapidamente. Um filtro deve responder com clareza a uma seleção. O botão de compra deve ficar em uma posição previsível enquanto as informações complementares aparecem.

Registre exatamente a página, o dispositivo, a conexão e a ação que você vai estudar. O mesmo produto pode atender quem pesquisa no computador e quem compra pelo celular, então analise cada percurso separadamente. Para que as comparações sejam úteis, mantenha iguais as condições de primeira visita ou retorno, cache, login e consentimento de cookies. Esses detalhes transformam uma meta genérica em uma experiência que dá para reproduzir.

Siga o caminho do servidor até a tela

O navegador recebe uma resposta, lê o HTML e descobre folhas de estilo, JavaScript, fontes e imagens. Em seguida, busca esses recursos e monta a página na tela. Recursos descobertos cedo começam a carregar antes, enquanto as dependências definem a ordem do restante do trabalho. A resposta do servidor, a entrega dos recursos e a renderização definem, juntas, o momento em que o conteúdo útil aparece.

Depois do carregamento, manipuladores de eventos, scripts e renderização continuam disputando o mesmo tempo de processamento. Tarefas curtas e focadas dão ao navegador oportunidades de responder à entrada do usuário e mostrar a próxima atualização. Reservar espaço para o conteúdo mantém o layout estável enquanto os recursos chegam. Esse modelo liga cada escolha a uma destas frentes: trabalho do servidor, entrega, processamento no navegador ou apresentação.

Leia três sinais da experiência do usuário

As métricas do Core Web Vitals descrevem aspectos importantes dessa experiência. Na avaliação com dados de visitas reais, os limites de uma boa experiência são aplicados ao percentil 75, separando celular e computador. Cada métrica responde a uma pergunta concreta.

O Lighthouse faz um teste de laboratório, útil para diagnóstico. O CrUX (Chrome User Experience Report) reúne experiências de usuários reais elegíveis quando há dados suficientes. A documentação do PageSpeed Insights explica que essas fontes descrevem condições diferentes. Os dados de campo cobrem os 28 dias anteriores e, quando a URL testada não tem dados suficientes, o PageSpeed Insights mostra os dados da origem inteira; confira qual dos dois você está lendo. O teste de laboratório estuda uma página em condições repetíveis; os dados de campo acrescentam a experiência de um conjunto maior de visitantes.

Mostre o conteúdo importante mais cedo

Identifique o elemento LCP e acompanhe como ele chega à tela. Se for uma imagem, observe quando a requisição começa e quanto é transferido. Faça o navegador descobrir esse recurso cedo, escolha dimensões e formato adequados e não use carregamento lento (lazy loading) na imagem principal da primeira dobra. O momento da requisição e o tamanho do arquivo, juntos, definem quando a imagem aparece.

Analise a resposta inicial do servidor, incluindo consultas ao banco de dados e oportunidades de cache. Depois, examine os estilos que bloqueiam a renderização, as fontes e as dependências na sequência de carregamento da página. O guia de otimização do LCP divide esse caminho em quatro partes: tempo até o primeiro byte (TTFB), atraso no carregamento do recurso, duração do carregamento do recurso e atraso na renderização do elemento. Imagens fora da primeira dobra podem carregar depois, quando fizer sentido; reserve o espaço delas e veja como aparecem durante a rolagem.

Crie interações ágeis e um layout estável

Grave no navegador o desempenho de uma interação importante, como um filtro ou um menu, e examine o trabalho que produz a próxima atualização visível. Mantenha os manipuladores de eventos enxutos, organize as atualizações de forma eficiente e divida trabalhos longos em tarefas menores. Quando uma ação leva tempo, um indicador de progresso claro ajuda a pessoa a entender o que está acontecendo.

O guia de otimização do INP explica as três partes de uma interação: atraso de entrada, tempo de processamento e atraso de apresentação. O Total Blocking Time (TBT) é uma métrica de laboratório útil para diagnóstico, mas não é a mesma coisa que o INP. Para manter o layout estável, reserve dimensões para imagens, vídeos, banners e conteúdos incorporados. Planeje a troca de fontes e a exibição de avisos para que as pessoas continuem lendo e tocando no elemento certo com tranquilidade.

Compare a experiência antes e depois

1. Anote a URL, o dispositivo, o horário, o estado do consentimento e a tarefa estudada.
2. Registre a métrica e o detalhe que a explica, como o elemento LCP ou a gravação da interação.
3. Faça uma mudança coerente na imagem, no script ou no componente de layout relevante.
4. Repita vários testes de laboratório em condições comparáveis e observe o padrão geral.
5. Percorra a tarefa principal nos tamanhos de tela e estados de login relevantes.
6. Volte aos dados de campo quando a janela de coleta já incluir sobretudo visitas posteriores à mudança.

Analise a experiência completa junto com os números. Mantenha as imagens legíveis e confirme se um script adiado não faz falta em outras páginas. Documente a situação inicial, o componente e a mudança, para que outra pessoa da equipe entenda o resultado. Esse registro facilita planejar a próxima rodada de melhorias.

Coloque em prática: o que o Sitelemetry mostra

A área de desempenho do Sitelemetry consulta o Google PageSpeed Insights para a URL informada, por padrão no perfil de celular, e reúne o resultado de laboratório do Lighthouse e, quando existem, os dados de campo do CrUX: LCP, INP, CLS, FCP e TTFB. Quem acessa a página nesse teste é o próprio Google, então os números vêm do PageSpeed Insights, e não de uma medição própria do Sitelemetry.

Escolha uma jornada importante no celular, ligue cada medida à imagem, ao script ou ao componente de layout correspondente e compare a mesma experiência depois de uma melhoria. Mantenha a tarefa do usuário ao lado dos números. A área de desempenho faz parte da auditoria das seis áreas, disponível a partir do plano Starter (US$ 49 por mês); o plano Free cobre apenas verificações de segurança.