O que LCP, INP e CLS medem, os limites bons e ruins, dados de campo e de laboratório, um medidor ao vivo para esta página e 25 receitas de correção com código agrupadas por causa, além de notas por plataforma.
Core Web Vitals são três medições de visitas reais: Largest Contentful Paint (carregamento, bom com 2.5 segundos ou menos), Interaction to Next Paint (responsividade, bom com 200 milissegundos ou menos) e Cumulative Layout Shift (estabilidade, bom com 0.1 ou menos). Uma página passa quando pelo menos 75% das visitas atingem os três.
Pontuações boas
O medidor abaixo mede esta página no seu próprio navegador enquanto você a usa. Depois, encontre a métrica em que você está reprovando e siga as receitas para ela; cada uma diz qual causa corrige e traz o código.
O Interaction to Next Paint substituiu o First Input Delay como Core Web Vital em março de 2024. O INP considera todas as interações da página, não só a primeira, e inclui o tempo para pintar o resultado.
O Lighthouse é um teste em um dispositivo simulado. Os Core Web Vitals usam visitantes reais ao longo de 28 dias, em celulares e redes mais lentos, e incluem o INP, que o Lighthouse não consegue medir.
Eles fazem parte dos sinais de experiência na página do Google. O Google descreve relevância e qualidade do conteúdo como muito mais importantes, então bons vitals ajudam mais quando as páginas são parecidas em todo o resto.
Os dados de campo cobrem os 28 dias anteriores, então as melhorias aparecem aos poucos ao longo de cerca de quatro semanas depois da publicação.
Limites (avaliados no percentil 75 das visitas reais)
Dados de campo e dados de laboratório
fetchpriority="high" diz ao navegador que esta imagem é a mais importante. Nunca use lazy-load na imagem do LCP.
Imagens de fundo são descobertas tarde, depois que o CSS carrega. Um preload no head inicia o download na hora.
srcset e sizes deixam um celular baixar um arquivo pequeno em vez do arquivo de desktop.
AVIF e WebP costumam ser bem menores que JPEG com a mesma qualidade. picture permite que navegadores antigos usem uma alternativa.
font-display: swap mostra o texto com a fonte alternativa na hora, então um título que é o elemento de LCP não fica esperando o download da fonte.
preconnect faz o handshake de DNS, TCP e TLS antecipadamente para uma origem de terceiros que você vai precisar.
Scripts no head sem defer ou async bloqueiam a renderização. defer mantém a ordem, mas espera o HTML ser analisado.
Se o elemento de LCP é criado por JavaScript, nada pode ser pintado até o bundle baixar e rodar. Renderização no servidor ou pré-renderização o coloca na primeira resposta. Veja nosso guia de SEO para single page apps para conhecer as opções.
Uma resposta lenta do servidor atrasa tudo. Faça cache de páginas estáticas em uma CDN e defina um Cache-Control sensato.
Uma tarefa acima de 50 ms bloqueia a entrada. Devolva o controle à thread principal entre os blocos para que um clique possa ser tratado no meio. scheduler.yield é mais novo; a alternativa com setTimeout funciona em todo lugar.
Atualize o botão imediatamente e só faça o trabalho pesado depois que o navegador tiver a chance de pintar.
Filtrar uma lista longa a cada tecla faz a digitação travar. Espere uma pausa curta.
startTransition deixa o React manter o campo responsivo e renderizar o resultado pesado quando puder.
Widgets de conversa e gerenciadores de tags muitas vezes rodam código pesado no carregamento. Carregue-os depois que a página ficar ociosa ou na primeira interação.
Páginas enormes deixam toda atualização de estilo e layout mais lenta. content-visibility pula a renderização de seções fora da tela até elas chegarem perto.
Ler offsetHeight depois de cada mudança de estilo força um layout toda vez. Leia tudo primeiro e depois escreva.
Analisar um arquivo grande ou ordenar milhares de linhas pode rodar em um worker sem bloquear cliques.
width e height permitem que o navegador reserve o espaço antes de o arquivo chegar. O CSS ainda pode deixá-los responsivos.
Mapas, vídeos e iframes costumam carregar tarde. aspect-ratio mantém a caixa deles aberta.
Conteúdo inserido acima do que as pessoas estão lendo empurra o texto para baixo. Dê ao espaço uma altura mínima com antecedência.
Quando a fonte web entra no lugar, o texto pode quebrar linhas de outro jeito. size-adjust em uma fonte alternativa local deixa as duas mais próximas em largura.
Mover coisas com transform não desloca outros elementos, então não conta como mudança de layout.
Uma barra fixa na parte de baixo da tela não move a página; uma inserida no topo move.
Um placeholder de carregamento deve ocupar o mesmo espaço do que vai substituí-lo.
Páginas restauradas do cache de voltar/avançar aparecem na hora, sem novas mudanças de layout. Um handler de unload impede isso; use pagehide no lugar.
Notas por plataforma
Imagens são o culpado habitual do LCP; reduza-as com o
Medidor ao vivo desta página
Mede LCP, CLS e INP desta página no seu navegador, quando houver suporte.
Bom
Precisa melhorar
Ruim
Sem suporte neste navegador
INP (o mais lento até agora)
Aguardando a maior pintura
Clique ou digite em qualquer lugar para medir
Comece grátis · Sem cartão de crédito