Guias

LCP, sigla de Largest Contentful Paint, e uma das Core Web Vitals do Google, as metricas que o Google usa para pontuar a experiencia real da pagina. Ela mede o desempenho de carregamento: o tempo desde o inicio do carregamento da pagina ate o momento em que o maior elemento de conteudo visivel no viewport e renderizado. Em termos simples, e o instante em que o seu conteudo principal realmente aparece na tela.

O elemento que o LCP observa e aquele que for o maior no viewport inicial enquanto a pagina carrega. Na maioria das vezes trata-se da imagem de destaque, um grande bloco de texto, o quadro de poster de um video ou uma imagem de fundo grande. O Google mede quando esse elemento especifico termina de ser pintado, porque esse e o ponto em que a pagina parece carregada para uma pessoa real, em vez de estar em branco ou meio desenhada.

Os limites do Google sao claros. Um LCP de 2,5 segundos ou menos e Bom, entre 2,5 e 4 segundos Precisa de melhoria, e acima de 4 segundos e Ruim. Como as outras Core Web Vitals, o LCP e avaliado com base em field data no percentil 75 dos carregamentos reais de pagina, de modo que reflete o que a maioria dos seus visitantes realmente vivencia, e nao uma unica execucao de laboratorio em uma conexao rapida.

O LCP importa porque corresponde de perto a rapidez com que uma pagina parece utilizavel. Um LCP lento significa que os visitantes ficam olhando para uma tela vazia ou incompleta enquanto o conteudo principal se arrasta ate aparecer, o que afasta as pessoas. Ele tambem faz parte das Core Web Vitals que alimentam os sinais de experiencia da pagina do Google, portanto um LCP ruim pode prejudicar tanto os usuarios quanto o posicionamento.

Ajuda enxergar o LCP como quatro partes empilhadas de ponta a ponta: time to first byte (quao rapido o servidor responde), atraso de carregamento do recurso (quanto tempo passa antes de o navegador sequer comecar a buscar o elemento do LCP), tempo de carregamento do recurso (quanto tempo esse elemento leva para baixar) e atraso de renderizacao do elemento (quanto tempo passa antes de ele ser de fato pintado). Um LCP lento e quase sempre uma ou duas dessas partes dominando, entao corrigi-lo comeca por descobrir qual parte e o problema.

O primeiro bloco, time to first byte, diz respeito ao seu servidor e a entrega. Um host lento ou distante adiciona atraso antes que qualquer coisa possa carregar, portanto um host rapido e bem localizado, mais um CDN que serve o conteudo de perto dos seus visitantes, reduzem essa parte diretamente. Essa e a correcao menos glamourosa, mas muitas vezes a de maior impacto, porque cada milissegundo aqui atrasa tudo o que vem depois.

O proprio elemento do LCP, normalmente uma imagem, e a proxima grande alavanca. Sirva-o em um formato moderno como WebP ou AVIF, dimensione-o corretamente para o layout em vez de enviar um original enorme, e diga ao navegador que ele e importante com preload ou uma fetch priority alta para que comece a baixar cedo. Um erro muito comum e aplicar lazy-loading a imagem de destaque: o lazy-loading e otimo para imagens abaixo da dobra, mas aplica-lo ao elemento do LCP atrasa exatamente aquilo pelo qual voce esta sendo medido.

Os recursos render-blocking sao o ultimo culpado comum. Arquivos grandes de CSS e JavaScript bloqueantes fazem o navegador esperar antes de poder pintar qualquer coisa, incluindo o seu maior elemento. Reduzir o CSS nao utilizado, adiar o JavaScript nao critico e embutir apenas os estilos criticos permitem que o navegador alcance a pintura mais cedo.

Para melhorar uma pontuacao de LCP na pratica: meca-a com uma ferramenta de field data para ver o numero real do percentil 75, identifique qual das quatro partes e a maior e entao ataque essa parte - um host ou CDN mais rapido para um servidor lento, otimizacao de imagem e preloading para um recurso lento, e menos codigo render-blocking para uma pintura lenta. Meca novamente com dados reais, ja que uma pontuacao de laboratorio em uma maquina rapida pode parecer boa enquanto usuarios reais em conexoes mais lentas passam dificuldade.

Em resumo: o Largest Contentful Paint mede quando o seu conteudo principal se torna visivel, e o Google quer isso em 2,5 segundos ou menos. Chegue la servindo com rapidez a partir de um bom host e CDN, otimizando e priorizando o maior elemento em vez de aplicar lazy-loading a ele, e removendo o codigo render-blocking do caminho. Faca isso e a pagina nao apenas pontua melhor - ela genuinamente parece mais rapida para as pessoas que a usam.