A Largest Contentful Paint (LCP) é uma métrica estável das Core Web Vitals para medir a velocidade de carga percebida. Ele marca o ponto na linha do tempo de carregamento da página em que o conteúdo principal provavelmente foi carregado. Uma LCP rápida ajuda a garantir ao usuário que a página é útil.
Historicamente, os desenvolvedores da Web têm enfrentado um desafio para medir a velocidade com que o conteúdo principal de uma página da Web carrega e fica visível para os usuários. Métricas mais antigas, como load ou DOMContentLoaded, não funcionam bem porque não correspondem necessariamente ao que o usuário vê na tela. Além disso, as métricas de desempenho mais recentes e centradas no usuário, como a Primeira exibição de conteúdo (FCP, na sigla em inglês), capturam apenas o início da experiência de carregamento. Se uma página mostrar uma tela de apresentação ou um indicador de carregamento, esse momento não será muito relevante para o usuário.
No passado, recomendamos métricas de desempenho, como Primeira exibição significativa (FMP, na sigla em inglês) e Índice de velocidade (SI) (ambos disponíveis no Lighthouse) para ajudar a capturar mais da experiência de carregamento após a exibição inicial, mas essas métricas são complexas, difíceis de explicar e muitas vezes erradas, o que significa que ainda não identificam quando o conteúdo principal da página foi carregado.
Com base em discussões no W3C Web Performance Working Group e em pesquisas feitas no Google, descobrimos que uma maneira mais precisa de medir quando o conteúdo principal de uma página é carregado é observar quando o maior elemento é renderizado.
O que é LCP?
A LCP informa o tempo de renderização da maior imagem ou bloco de texto visível na janela de visualização em relação ao momento em que o usuário navegou pela primeira vez à página.
O que é uma boa pontuação de LCP?
Para oferecer uma boa experiência do usuário, os sites precisam ter uma LCP de 2,5 segundos ou menos. Para garantir que essa meta seja atingida para a maioria dos usuários, um bom limite é o 75o percentil de carregamentos de página, segmentado em dispositivos móveis e computadores.
Quais elementos são considerados?
Conforme especificado na API Largest Contentful Paint, os tipos de elementos considerados para a Maior exibição de conteúdo são:
- Elementos
<img>. O tempo da primeira apresentação de frame é usado para conteúdo animado, como GIFs ou PNGs animados. - Elementos
<image>dentro de um elemento<svg> - Elementos
<video>. O tempo de carregamento da imagem do pôster ou o tempo de apresentação do primeiro frame para os vídeos é usado, o que ocorrer primeiro. - Um elemento com uma imagem de plano de fundo carregada usando a função
url(), em vez de um gradiente CSS. - Elementos no nível de bloco que contêm nós de texto ou outros filhos de elementos de texto inline.
Restringir os elementos a esse conjunto limitado foi intencional para reduzir a complexidade.
Elementos adicionais (como o suporte completo a <svg>) poderão ser adicionados no futuro,
conforme mais pesquisas forem realizadas.
Além de considerar apenas alguns elementos, as medições da LCP usam heurísticas para excluir determinados elementos que os usuários provavelmente consideram "não conteúdo". Para navegadores baseados no Chromium, incluem:
- Elementos com opacidade 0, o que os torna invisíveis ao usuário.
- Elementos que cobrem a janela de visualização completa e que provavelmente são elementos de plano de fundo.
- Imagens de marcador de posição ou outras imagens com baixa entropia, que provavelmente não refletem o verdadeiro conteúdo da página.
É provável que os navegadores continuem melhorando essas heurísticas para garantir que correspondam às expectativas do usuário sobre qual é o maior elemento contentful.
Essas heurísticas de "conteúdo" são diferentes das usadas pela FCP, que pode considerar alguns desses elementos, como imagens de marcador de posição ou imagens de janela de visualização completa, mesmo que não possam ser candidatos à LCP. Apesar de ambos usarem "conteúdo" no nome, o objetivo dessas métricas é diferente. A FCP mede quando qualquer conteúdo é exibido na tela, enquanto a LCP mede quando o conteúdo principal é pintado.
Como o tamanho de um elemento é determinado?
O tamanho do elemento informado para LCP normalmente é o tamanho visível para o usuário na janela de visualização. Se o elemento se estender para fora da janela de visualização, ou se algum elemento for recortado ou tiver um overflow não visível, essas partes não serão contabilizadas no tamanho do elemento.
Para elementos de imagem redimensionados do tamanho intrínseco, o tamanho informado é o visível ou o intrínseco, o que for menor.
Para elementos de texto, a LCP considera apenas o menor retângulo que pode conter todos os nós de texto.
Em todos os elementos, a LCP não considera margens, preenchimentos ou bordas aplicados usando CSS.
.Quando a LCP é informada?
As páginas da Web geralmente são carregadas em etapas e, como resultado, o maior elemento da página pode mudar durante o carregamento.
Para lidar com esse potencial de mudança, o navegador envia uma
PerformanceEntry
do tipo largest-contentful-paint identificando o maior elemento de conteúdo
assim que o navegador mostra o primeiro frame. Depois de renderizar
os frames subsequentes, ele envia outro
PerformanceEntry
sempre que o maior elemento de conteúdo muda.
Por exemplo, em uma página com texto e uma imagem principal, o navegador pode
renderizar inicialmente apenas o texto e enviar uma entrada largest-contentful-paint
cuja propriedade element faz referência a <p> ou <h1>. Depois que a imagem
principal termina de carregar, uma segunda entrada largest-contentful-paint é enviada,
com uma propriedade element referenciando o <img>.
Um elemento só pode ser considerado o maior elemento de conteúdo depois de ser
renderizado e visível para o usuário. As imagens que ainda não foram carregadas não
são consideradas "renderizadas". Os nós de texto também não usam fontes da Web durante o
período de bloqueio das fontes.
Nesses casos, um elemento menor pode ser informado como o maior elemento
de conteúdo, mas assim que o elemento maior termina a renderização, outro
PerformanceEntry é criado.
Além do carregamento tardio de imagens e fontes, uma página pode adicionar novos elementos ao DOM à medida que novos conteúdos são disponibilizados. Se algum desses novos elementos for
maior que o maior elemento de conteúdo anterior, um novo PerformanceEntry
será criado.
Se o maior elemento de conteúdo for removido da janela de visualização ou mesmo do DOM, ele continuará sendo o maior elemento de conteúdo, a menos que um elemento maior seja renderizado.
O navegador deixa de informar novas entradas assim que o usuário interage com a página (com um toque, uma rolagem ou um pressionamento de tecla), porque a interação do usuário geralmente muda o que está visível para ele (especialmente ao rolar a tela).
Para fins de análise, informe apenas o PerformanceEntry enviado mais recentemente ao seu serviço de análise.
Tempo de carregamento versus tempo de renderização
Por motivos de segurança, o carimbo de data/hora de renderização das imagens não é exposto para
imagens de origem cruzada que não tenham o
cabeçalho
Timing-Allow-Origin. Em vez disso, apenas o tempo de carregamento, que outras APIs já expõem, ficará
disponível.
Isso pode levar à situação aparentemente impossível em que a LCP é informada pelas APIs da Web como anterior à FCP. Isso ocorre apenas por causa dessa restrição de segurança e não representa o que está realmente acontecendo.
Sempre que possível, recomendamos definir o cabeçalho
Timing-Allow-Origin
para tornar as métricas mais precisas.
Como as mudanças de layout e tamanho do elemento são processadas?
Para manter baixa a sobrecarga de desempenho relacionada ao cálculo e ao envio de novas entradas de desempenho, as mudanças no tamanho ou na posição de um elemento não geram novos candidatos à LCP. Somente o tamanho e a posição iniciais do elemento na janela de visualização são considerados.
Isso significa que as imagens que são inicialmente renderizadas fora da tela e depois passam por ela podem não ser informadas. Isso também significa que os elementos inicialmente renderizados na janela de visualização que são empurrados para fora da visualização ainda informam o tamanho inicial na janela de visualização.
Exemplos
Confira alguns exemplos de quando a Maior exibição de conteúdo ocorre em alguns sites conhecidos:
Em ambas as linhas do tempo, o maior elemento (destacado em verde) muda conforme o conteúdo é carregado. No primeiro exemplo, um novo conteúdo é adicionado ao DOM, alterando qual elemento é o maior. No segundo exemplo, o layout muda, removendo um maior elemento de conteúdo anterior da janela de visualização.
Geralmente, o conteúdo de carregamento tardio é maior do que o conteúdo que já está na página, mas não é necessariamente o caso. Os próximos dois exemplos mostram a LCP acontecendo antes da página ser totalmente carregada.
No primeiro exemplo, o logotipo do Instagram é carregado relativamente cedo e permanece o maior elemento, mesmo à medida que outro conteúdo é adicionado. No exemplo da página de resultados da Pesquisa Google, o maior elemento é um parágrafo de texto exibido antes de qualquer uma das imagens ou do logotipo terminar de carregar. Como cada imagem individual é menor que esse parágrafo, ela continua sendo o maior elemento durante todo o processo de carregamento.
Como medir a LCP
A LCP pode ser medida no laboratório ou no campo e está disponível nas seguintes ferramentas:
Ferramentas de campo
- Chrome User Experience Report
- PageSpeed Insights
- Search Console (relatório de Core Web Vitals)
- Biblioteca JavaScript
web-vitals
Ferramentas de laboratório
- Chrome DevTools (link em inglês)
- Farol
- PageSpeed Insights
- WebPageTest
Medir a LCP no JavaScript
Para medir a LCP em JavaScript, use a
API Maior Contentful Paint.
O exemplo a seguir mostra como criar um PerformanceObserver que detecta entradas largest-contentful-paint e as registra no console.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('LCP candidate:', entry.startTime, entry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});
No exemplo anterior, cada entrada largest-contentful-paint registrada representa
o candidato à LCP atual. Em geral, o valor startTime da última entrada
emitida é o valor da LCP. No entanto, nem todas as entradas largest-contentful-paint são
válidas para medir a LCP.
A seção a seguir lista as diferenças entre o que a API informa e como a métrica é calculada.
Diferenças entre a métrica e a API
- A API envia entradas
largest-contentful-paintpara páginas carregadas em uma guia em segundo plano, mas essas páginas precisam ser ignoradas no cálculo da LCP. - A API continua enviando entradas
largest-contentful-paintdepois que uma página fica em segundo plano, mas essas entradas precisam ser ignoradas no cálculo da LCP. Os elementos só podem ser considerados se a página ficou em primeiro plano o tempo todo. - A API não informa entradas
largest-contentful-paintquando a página é restaurada do cache de avanço e retorno, mas a LCP precisa ser medida nesses casos porque os usuários as veem como visitas distintas à página. - A API não considera os elementos dentro de iframes, mas a métrica faz isso porque
eles fazem parte da experiência do usuário na página. Em páginas com uma LCP em
um iframe, por exemplo, uma imagem do pôster em um vídeo incorporado, isso
será exibido como uma diferença entre o CrUX e o RUM.
Para medir a LCP corretamente, você deve incluir iframes. Os subframes podem usar a API para informar
as entradas
largest-contentful-paintao frame pai para agregação. - A API mede a LCP desde o início da navegação. Para
páginas pré-renderizadas,
meça a LCP de
activationStart, porque ele corresponde ao tempo de LCP conforme a experiência do usuário.
Em vez de memorizar todas essas diferenças sutis, recomendamos que os desenvolvedores
usem a biblioteca JavaScript web-vitals
para medir a LCP, que processa a maioria dessas diferenças para você. Ele não
cobre o problema do iframe.
import {onLCP} from 'web-vitals';
// Measure and log LCP as soon as it's available.
onLCP(console.log);
Consulte o código-fonte de onLCP()
para ver um exemplo completo de como medir a LCP em JavaScript.
E se o elemento maior não for o mais importante?
Em alguns casos, os elementos mais importantes da página não são iguais aos maiores. Por isso, os desenvolvedores podem estar mais interessados em medir os tempos de renderização desses outros elementos. Isso é possível usando a API Element Timing, conforme descrito no artigo sobre métricas personalizadas.
Como melhorar a LCP
Um guia completo sobre como otimizar a LCP está disponível para orientar você no processo de identificação de tempos de LCP no campo e como usar dados de laboratório para detalhar e otimizá-los.
Outros recursos
- Lições aprendidas com o monitoramento de desempenho no Chrome por Annie Sullivan em performance.now() (2019)
Registro de alterações
Às vezes, bugs são descobertos nas APIs usadas para medir as métricas e, às vezes, nas definições das próprias métricas. Por isso, às vezes é necessário fazer alterações, que podem aparecer como melhorias ou regressões nos seus relatórios e painéis internos.
Para ajudar você a gerenciar isso, todas as mudanças na implementação ou definição dessas métricas são exibidas neste registro de alterações.
Se você tiver feedback sobre essas métricas, envie-o no Grupo do Google web-vitals-feedback.