webperf Por Marshkalk

Core Web Vitals explicados: LCP, CLS e INP

Os Core Web Vitals da Google sao agora sinais de classificacao. Aprenda o que medem o LCP, o CLS e o INP, como sao as boas pontuacoes e como melhorar cada um.

O que sao os Core Web Vitals?

Os Core Web Vitals sao um conjunto de metricas de desempenho do mundo real definidas pela Google para medir a qualidade da experiencia do utilizador das paginas web. Tornaram-se um sinal de classificacao da Google em 2021 e foram atualizados desde entao. Medem o desempenho de carregamento, a estabilidade visual e a interatividade, os tres aspetos da experiencia de pagina que mais afetam os utilizadores.

Existem atualmente tres metricas de Core Web Vitals:

  1. LCP, Largest Contentful Paint (carregamento)
  2. CLS, Cumulative Layout Shift (estabilidade visual)
  3. INP, Interaction to Next Paint (interatividade, substituiu o FID em 2024)

LCP, Largest Contentful Paint

O que mede: quanto tempo demora o maior elemento de conteudo visivel a ser renderizado. Normalmente e uma imagem principal, um cabecalho grande ou o poster de um video em ecra completo.

Por que importa: o LCP e um indicador de "com que rapidez parece que a pagina carregou?" Os utilizadores formam a sua impressao primaria da velocidade da pagina quando o conteudo principal aparece.

Pontuacao:

  • Bom: <= 2,5 segundos
  • Precisa de melhoria: 2,5-4 segundos
  • Mau: > 4 segundos

Causas comuns de LCP fraco:

  • Uma imagem principal grande e nao otimizada (formato errado, sem loading="lazy" em imagens da primeira vista, na verdade, NAO faca lazy-load nos elementos LCP)
  • JavaScript ou CSS a bloquear a renderizacao
  • Tempo de resposta do servidor lento (TTFB > 600ms)
  • Ausencia de preloading do recurso LCP

Correcao principal: faca preload da sua imagem LCP. Adicione <link rel="preload" as="image" href="hero.webp"> no <head>. Isto por si so tipicamente reduz o LCP em 1-2 segundos.

CLS, Cumulative Layout Shift

O que mede: quanto o layout da pagina muda de forma inesperada durante o carregamento e uso. Cada mudanca e pontuada pela fracao do viewport afetada e a distancia que os elementos se moveram.

Por que importa: as mudancas inesperadas de layout causam cliques no elemento errado, perda da posicao de leitura e uma experiencia frustante. O exemplo classico: um botao "Registar" move-se mesmo quando clica nele e acidentalmente clica no anuncio abaixo.

Pontuacao:

  • Bom: <= 0,1
  • Precisa de melhoria: 0,1-0,25
  • Mau: > 0,25

Causas comuns de CLS:

  • Imagens sem atributos explicitos width e height (o browser nao reserva espaco antes de a imagem carregar)
  • Anuncios ou incorporacoes injetados sem espaco reservado
  • Tipos de letra web a causar um flash de texto sem estilo (FOUT) que altera o layout
  • Banners ou avisos de cookies carregados tarde que empurram o conteudo para baixo

Correcao principal: defina sempre width e height nos elementos <img>. O browser usa-os para reservar o espaco correto antes de a imagem carregar, evitando uma mudanca.

INP, Interaction to Next Paint

O que mede: a capacidade de resposta da pagina as interacoes do utilizador (cliques, toques, entrada de teclado). O INP mede o tempo desde o inicio da interacao ate a proxima atualizacao visual em todas as interacoes durante uma sessao, e indica o pior caso (excluindo valores aberrantes).

O INP substituiu o FID (First Input Delay) em marco de 2024. O FID so media a primeira interacao; o INP mede todas as interacoes ao longo da sessao.

Pontuacao:

  • Bom: <= 200 milissegundos
  • Precisa de melhoria: 200-500ms
  • Mau: > 500ms

Causas comuns de INP fraco:

  • JavaScript pesado na thread principal a bloquear a resposta
  • Tarefas longas (> 50ms) a correr durante a interacao
  • Operacoes DOM dispendiosas acionadas por cliques
  • Scripts de terceiros (analitica, anuncios) a competir pela thread principal

Correcao principal: divida as tarefas longas usando scheduler.yield() ou setTimeout(fn, 0). Audite e adie scripts de terceiros. Use um perfilador de desempenho (Chrome DevTools -> separador Performance) para identificar tarefas longas.

Como medir os Core Web Vitals

Monitorizacao de utilizadores reais (RUM):

  • Google Search Console -> relatorio Core Web Vitals (dados de campo de utilizadores reais do Chrome)
  • Chrome User Experience Report (CrUX), o conjunto de dados publico que a Google usa para classificacao

Testes de laboratorio (sinteticos):

  • PageSpeed Insights (pagespeed.web.dev), executa o Lighthouse e mostra dados de campo
  • Lighthouse no Chrome DevTools (Ctrl+Shift+J -> separador Lighthouse)
  • WebPageTest, cascata detalhada e filmstrip

Importante: as pontuacoes de laboratorio e de campo podem diferir significativamente. A Google usa dados de campo (CrUX) para classificacao. Se tiver dados de campo disponiveis, otimize para eles, nao apenas para a pontuacao do Lighthouse.

Verificar as suas meta tags para SEO

Meta tags bem estruturadas (titulo, descricao, canonical, Open Graph) apoiam o desempenho nos motores de busca. O Analisador de Meta Tags deste site verifica os metadados de qualquer URL quanto a integridade e correção.

Resumo

LCP (carregamento), CLS (estabilidade) e INP (interatividade) sao os tres sinais de classificacao Core Web Vitals da Google. Limites bons: LCP <= 2,5s, CLS <= 0,1, INP <= 200ms. Fazer preload do recurso LCP, adicionar dimensoes as imagens e eliminar o JavaScript a bloquear a thread principal sao as correcoes de maior impacto para a maioria dos sites.