Principais métricas da Web: LCP FID CLS
Entenda o que Largest Contentful Paint, First Input Delay e Cumulative Layout Shift medem e por que o Google os usa como sinais de classificação.
Principais métricas da Web: LCP FID CLS é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
Por que o desempenho importa
Páginas lentas perdem usuários. O Google transformou o desempenho em um sinal de classificação: sites com pontuações ruins nos Core Web Vitals aparecem em posições inferiores nos resultados de pesquisa. Além do SEO, cada 100 ms de atraso reduz de forma mensurável a conversão e o envolvimento.
As três métricas essenciais da Web
O Google mede três métricas da experiência do usuário: LCP (velocidade de carregamento), FID (interatividade) e CLS (estabilidade visual). Cada uma tem limites de classificação "Bom", "Precisa melhorar" e "Ruim".
Maior renderização de conteúdo (LCP)
LCP mede quando o maior elemento de conteúdo visível (imagem, miniatura de vídeo ou bloco de texto) termina de ser renderizado. Bom: menos de 2,5 s. Ruim: mais de 4 s. Otimize pré-carregando as imagens principais, reduzindo os recursos que bloqueiam a renderização e usando uma CDN rápida.
Atraso da primeira interação (FID) e INP
FID mede o atraso entre a primeira interação do usuário (clique ou toque) e a resposta do navegador. Bom: menos de 100 ms. Em 2024, o FID foi substituído pelo Interação até a próxima renderização (INP), que mede todas as interações, não apenas a primeira.
Deslocamento cumulativo de layout (CLS)
CLS mede deslocamentos inesperados no layout durante o carregamento da página. Bom: abaixo de 0,1. Ruim: acima de 0,25. Isso é causado por imagens sem dimensões, fontes carregadas tardiamente e anúncios inseridos depois da primeira renderização.
Medindo CWV no navegador
Use o pacote npm web-vitals para capturar métricas de usuários reais e enviá-las ao seu ponto de acesso de análise.
import { onLCP, onINP, onCLS } from 'web-vitals';
onLCP(metric => sendToAnalytics(metric));
onINP(metric => sendToAnalytics(metric));
onCLS(metric => sendToAnalytics(metric));
function sendToAnalytics({ name, value, id }) {
fetch('/analytics', {
method: 'POST',
body: JSON.stringify({ name, value, id }),
keepalive: true
});
}Corrigindo o LCP: pré-carregue a imagem principal
Instrua o navegador a baixar a imagem principal antecipadamente, antes de analisar o restante do HTML.
<!-- In <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- In <body> -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">Corrigindo o CLS: reserve espaço
Sempre defina width e height em imagens e conteúdos incorporados para que o navegador reserve espaço antes da chegada do recurso. Use o CSS aspect-ratio para contêineres responsivos.
.video-embed {
aspect-ratio: 16 / 9;
width: 100%;
}
/* HTML */
<img src="/photo.jpg" width="800" height="450" alt="">Corrigindo o INP: divida tarefas longas
Tarefas longas de JavaScript bloqueiam a linha de execução principal e atrasam a resposta aos cliques. Divida o trabalho em partes usando scheduler.yield() ou setTimeout para que o navegador possa renderizar e responder às entradas.
async function processLargeList(items) {
for (let i = 0; i < items.length; i++) {
process(items[i]);
if (i % 50 === 0) await new Promise(r => setTimeout(r, 0));
}
}Dados de laboratório versus dados de campo
Dados de laboratório (Lighthouse) são um teste sintético realizado em um ambiente controlado. Dados de campo (CrUX, RUM) são coletados de usuários reais em dispositivos reais. Os dados de campo são a fonte de verdade para a classificação em SEO.
Orçamentos de desempenho
Defina limites explícitos: por exemplo, LCP abaixo de 2 s e pacote de JavaScript abaixo de 200 KB. Faça cumprir esses limites na integração contínua com o Lighthouse CI ou o @bundle-analyzer para que as compilações que reduzam o desempenho falhem.
Verificação rápida
Qual métrica principal da Web mede saltos visuais inesperados durante o carregamento da página?
Recapitulação: principais métricas da Web
LCP: velocidade de carregamento do maior elemento, com meta abaixo de 2,5 s. INP (anteriormente FID): capacidade de resposta, com meta abaixo de 200 ms. CLS: estabilidade visual, com meta abaixo de 0,1. Faça a medição com o pacote web-vitals em produção e use o Lighthouse na integração contínua. Os dados de campo orientam o SEO, não os dados de laboratório.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 41
- Aulas
- 163
Perguntas Frequentes
A aula “Principais métricas da Web: LCP FID CLS” é grátis?
Sim — o texto completo de “Principais métricas da Web: LCP FID CLS” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Principais métricas da Web: LCP FID CLS”?
Entenda o que Largest Contentful Paint, First Input Delay e Cumulative Layout Shift medem e por que o Google os usa como sinais de classificação. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Principais métricas da Web: LCP FID CLS”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Principais métricas da Web: LCP FID CLS
- Auditorias e pontuação do Lighthouse
- Otimização de imagens: carregamento tardio e formatos WebP
- Divisão de código e rotas sob demanda