Historicamente, os desenvolvedores da Web têm dificuldade para medir a velocidade com que o conteúdo principal de uma página é carregado e 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 mostra uma tela de apresentação ou um indicador de carregamento, esse momento não é muito relevante para o usuário.
Antes, recomendamos métricas de desempenho como Primeira exibição significativa (FMP) e Speed Index (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 até a página pela primeira vez.
O que é uma boa pontuação de LCP?
Para oferecer uma boa experiência ao usuário, os sites precisam ter a Maior exibição de conteúdo 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 de CSS. - Elementos no nível de bloco que contêm nós de texto ou outros filhos de elementos de texto inline.
Observe que restringir os elementos a esse conjunto limitado foi intencional para manter a simplicidade no início. Elementos adicionais (como o suporte completo ao <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, que são invisíveis ao usuário
- elementos que cobrem a janela de visualização completa e provavelmente são considerados como plano de fundo em vez de conteúdo.
- 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 corresponder às expectativas dos usuários sobre qual é o maior elemento conteúdo.
Essas heurísticas de "conteúdo" podem ser diferentes daquelas usadas pela Primeira exibição de conteúdo (FCP, na sigla em inglês), que pode considerar alguns desses elementos, como imagens de marcador de posição ou imagens completas da janela de visualização, mesmo que eles não sejam qualificados para serem 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 e a LCP quando o conteúdo principal é pintado, de modo que a LCP tem a intenção de ser mais seletiva.
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.
Para 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 estágios e, consequentemente, é possível que o maior elemento da página mude.
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 pinta o primeiro frame. No entanto, depois de renderizar frames subsequentes, ele enviará outro PerformanceEntry sempre que o maior elemento de conteúdo mudar.
Por exemplo, em uma página com texto e uma imagem principal, o navegador pode, inicialmente, renderizar o texto. Nesse momento, ele envia uma entrada largest-contentful-paint cuja propriedade element provavelmente faria referência a <p> ou <h1>. Mais tarde, quando a imagem principal terminar de carregar, uma segunda entrada largest-contentful-paint será enviada e a propriedade element vai fazer referência ao <img>.
Um elemento só pode ser considerado o maior elemento de conteúdo depois de ser renderizado e estar 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 qualquer um desses novos elementos for maior que o maior elemento de conteúdo anterior, um novo PerformanceEntry também será informado.
Se o maior elemento com conteúdo for removido da janela de visualização ou mesmo do DOM, ele continuará sendo o maior elemento com conteúdo, a menos que um elemento maior seja renderizado.
O navegador deixará de informar novas entradas assim que o usuário interagir com a página (por toque, rolagem ou pressionamento de tecla), já que a interação do usuário geralmente muda o que é visível para ele (o que é especialmente verdadeiro com a rolagem).
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 sem o cabeçalho Timing-Allow-Origin. Em vez disso, somente o tempo de carregamento é exposto, já que ele já é exposto por muitas outras APIs da Web.
Isso pode levar à situação aparentemente impossível em que a LCP é informada pelas APIs da Web como anterior à FCP. Esse não é o caso, mas só aparece devido a essa restrição de segurança.
Sempre que possível, recomendamos definir o cabeçalho Timing-Allow-Origin para que as métricas sejam 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 a 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 registradas. Isso também significa que os elementos inicialmente renderizados na janela de visualização que são empurrados para baixo e fora da visualização ainda vão informar seu tamanho inicial na janela de visualização.
Exemplos
Aqui estão alguns exemplos de quando a Maior exibição de conteúdo ocorre em alguns sites conhecidos:
Em ambos os cronogramas acima, o maior elemento muda conforme o conteúdo é carregado. No primeiro exemplo, um novo conteúdo é adicionado ao DOM, e isso altera o elemento maior. No segundo exemplo, o layout muda e o conteúdo que antes era o maior é removido da janela de visualização.
Embora geralmente o conteúdo de carregamento tardio seja maior do que o conteúdo que já está na página, esse não é necessariamente o caso. Os próximos dois exemplos mostram a LCP ocorrendo antes de a página ser totalmente carregada.
No primeiro exemplo, o logotipo do Instagram é carregado relativamente cedo e permanece o maior elemento, mesmo à medida que outros conteúdos são mostrados progressivamente. No exemplo da página de resultados da Pesquisa Google, o maior elemento é um parágrafo de texto exibido antes do fim do carregamento de qualquer imagem ou logotipo. Como todas as imagens individuais são menores que esse parágrafo, ele continua sendo o maior elemento durante todo o processo de carregamento.
Como medir a LCP
A LCP pode ser medida no laboratório ou em 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 Largest 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 acima, cada entrada largest-contentful-paint registrada representa o candidato atual à LCP. Em geral, o valor startTime da última entrada emitida é o valor da LCP. No entanto, isso nem sempre é assim. 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 vai enviar 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 vai continuar enviando entradas
largest-contentful-paintdepois que uma página estiver em segundo plano, mas essas entradas vão 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, já que os usuários as veem como visitas diferentes à página. - A API não considera os elementos dentro dos iframes, mas a métrica considera eles 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 corretamente a LCP, você deve considerá-los. 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, mas, para páginas pré-renderizadas, ela precisa ser medida em
activationStart, já que isso corresponde ao tempo de LCP conforme a experiência do usuário.
Em vez de memorizar todas essas diferenças sutis, os desenvolvedores podem usar a biblioteca JavaScript web-vitals para medir a LCP, que processa essas diferenças para você (quando possível, o problema do iframe não é abordado):
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, o elemento mais importante da página não é igual ao maior, e os desenvolvedores podem ter mais interesse 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 marcações de tempo 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, são encontrados bugs nas APIs usadas para medir as métricas e, às vezes, nas próprias definições de métricas. Por isso, às vezes é preciso 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 serão exibidas neste registro de alterações.
Se você tiver feedback sobre essas métricas, envie seu feedback no Grupo do Google web-vitals-feedback.