Medindo os principais indicadores da Web
Monitore e melhore as métricas de desempenho.
Medindo os principais indicadores da Web é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 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 Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Por que as métricas vitais são importantes
As Core Web Vitals são métricas de desempenho do Google centradas no utilizador. Elas quantificam o carregamento, a interatividade e a estabilidade visual, influenciando tanto a experiência do utilizador quanto a classificação nas pesquisas.
As três métricas
O trio é composto por LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) e INP (Interaction to Next Paint). Cada métrica avalia um aspecto diferente do desempenho percebido.
LCP
LCP mede quando o maior elemento visível (imagem principal ou título) termina de ser renderizado. Um bom resultado é inferior a 2,5 segundos. O SSR ajuda ao entregar esse conteúdo no HTML inicial.
CLS
CLS mede mudanças inesperadas no layout enquanto a página é carregada. Um bom resultado é inferior a 0,1. Reserve espaço para imagens e anúncios e evite inserir conteúdo acima de conteúdo existente.
<img src="hero.jpg" width="800" height="450" alt="...">
<!-- explicit dimensions prevent shift -->INP
INP mede a capacidade de resposta às interações do utilizador durante toda a vida da página, substituindo o FID, mais antigo. Um bom resultado é inferior a 200 ms. JavaScript pesado na linha principal prejudica o INP.
Como o SSR ajuda as métricas vitais
O SSR melhora o LCP ao exibir o conteúdo mais cedo e pode reduzir o CLS ao fornecer antecipadamente um layout estável. A hidratação incremental melhora o INP ao enviar menos JavaScript de início.
Dados de laboratório e de campo
Os dados de laboratório vêm de ferramentas sintéticas, como o Lighthouse, em um ambiente controlado. Os dados de campo (CrUX, RUM) vêm de utilizadores reais. Otimize usando ambos; os dados de campo são os utilizados na classificação.
Medindo com o Lighthouse
Execute o Lighthouse no Chrome DevTools ou na integração contínua para obter o LCP e o CLS de laboratório, uma aproximação do tempo total de bloqueio para o INP e diagnósticos práticos.
// npx lighthouse https://example.com --viewA biblioteca web-vitals
Colete métricas vitais de utilizadores reais no navegador com a biblioteca web-vitals e envie-as para o seu endpoint de análise.
import { onLCP, onCLS, onINP } from 'web-vitals';
onLCP(console.log);
onCLS(console.log);
onINP(console.log);Reduzindo o JavaScript
Pacotes menores melhoram o INP e o tempo até a interatividade. Use carregamento tardio por rota, @defer, hidratação incremental e eliminação de código não utilizado para reduzir o JS enviado.
Itere e verifique
O trabalho de desempenho consiste em medir, alterar e medir novamente. Depois de ativar SSR, hidratação ou defer, execute novamente o Lighthouse e acompanhe a tendência dos dados de campo ao longo das semanas para confirmar ganhos reais.
Verificação rápida
Verifique o seu conhecimento sobre as Core Web Vitals.
Resumo
Aprendeu sobre as Core Web Vitals (LCP, CLS e INP), como o SSR e a hidratação incremental as melhoram, a diferença entre dados de laboratório e de campo e como medir com o Lighthouse e a biblioteca web-vitals, iterando depois com novas medições.
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
- 38
- Aulas
- 144
Perguntas Frequentes
A aula “Medindo os principais indicadores da Web” é grátis?
Sim — o texto completo de “Medindo os principais indicadores da Web” é 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 Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Medindo os principais indicadores da Web”?
Monitore e melhore as métricas de desempenho. Você pratica Angular 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 Angular Academy?
Nenhuma experiência prévia é necessária. Angular 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 4 de 4.
Quanto tempo leva a aula “Medindo os principais indicadores da Web”?
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 Angular Academy?
Sim. Cada aula de Angular 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
- O que é hidratação
- Ativando a hidratação completa
- Hidratação incremental com @defer
- Medindo os principais indicadores da Web