First Contentful Paint (FCP)

First Contentful Paint (FCP)

Updated
Appears in: Metrics

A First Contentful Paint (FCP), ou primeira renderização de conteúdo, é uma métrica importante e centrada no usuário para medir a velocidade de carregamento percebida porque marca o primeiro ponto na linha do tempo de carregamento da página onde o usuário pode ver alguma coisa na tela: uma FCP rápida ajuda a tranquilizar o usuário que algo está acontecendo.

O que é FCP? #

A métrica First Contentful Paint (FCP) mede o tempo desde o início do carregamento da página até o momento em que qualquer parte do conteúdo da página é renderizada na tela. Para esta métrica, "conteúdo" se refere a texto, imagens (incluindo imagens de fundo), <svg> ou elementos <canvas> não-vazios.

Timeline FCP do google.com

Na linha do tempo de carregamento acima, a FCP acontece no segundo quadro, pois é quando os primeiros elementos de texto e imagem são renderizados na tela.

Você notará que embora parte do conteúdo tenha sido renderizado, nem todo ele foi renderizado. Esta é uma distinção importante a ser feita entre a First Contentful Paint (FCP) e a Largest Contentful Paint (LCP), que tem como objetivo medir quando o conteúdo principal da página terminou de carregar.

Bons valores de FCP são 1,8 segundos ou menos, valores baixos são maiores que 3,0 segundos e qualquer coisa entre as necessidades de melhoria

O que é uma boa pontuação de FCP? #

Para fornecer uma boa experiência ao usuário, os sites devem se esforçar para ter uma First Contentful Paint de 1,8 segundos ou menos. Para garantir que você esteja atingindo essa meta para a maioria de seus usuários, um bom limite para medir é o 75º percentil de carregamentos de página, segmentado através de dispositivos móveis e desktop.

Como medir a FCP #

A FCP pode ser medida em laboratório ou em campo e está disponível nas seguintes ferramentas:

Ferramentas de campo #

Ferramentas de laboratório #

Medição da FCP em JavaScript #

Para medir a FCP em JavaScript, você pode usar a API Paint Timing. O exemplo a seguir mostra como criar um PerformanceObserver que escuta uma entrada paint com o nome first-contentful-paint e a registra no console.

new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
console.log('FCP candidate:', entry.startTime, entry);
}
}).observe({type: 'paint', buffered: true});

Warning:

Este código mostra como registrar a entrada first-contentful-paint no console, mas medir a FCP em JavaScript é mais complicado. Veja os detalhes abaixo :

No exemplo acima, a entrada registrada first-contentful-paint informará quando o primeiro elemento de conteúdo foi renderizado. No entanto, em alguns casos, essa entrada não é válida para medir a FCP.

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 enviará uma entrada de first-contentful-paint para páginas carregadas numa aba em segundo plano, mas essas páginas devem ser ignoradas ao calcular a FCP (os tempos de primeira renderização só devem ser considerados se a página estiver em primeiro plano o tempo todo).
  • A API não relata first-contentful-paint quando a página é restaurada do cache back/forward, mas a FCP deve ser medida nesses casos, pois os usuários as experimentam como visitas de página distintas.
  • A API pode não relatar tempos de pintura de iframes de origem cruzada , mas para medir corretamente a FCP, você deve considerar todos os quadros. Subquadros podem usar a API para relatar seus tempos de pintura ao quadro pai para agregação.

Em vez de memorizar todas essas diferenças sutis, os desenvolvedores podem usar a biblioteca JavaScript web-vitals para medir a FCP, que já lida com essas diferenças (onde for possível):

import {getFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
getFCP(console.log);

Para um exemplo completo de como medir a FCP em JavaScript, consulte o código-fonte de getFCP().

Em alguns casos (como iframes de origem cruzada), não é possível medir a FCP em JavaScript. Consulte a seção de limitações da biblioteca web-vitals para mais detalhes.

Como melhorar a FCP #

Para aprender como melhorar a FCP para um site específico, você pode executar uma auditoria de desempenho do Lighthouse e prestar atenção a quaisquer oportunidades específicas ou diagnósticos que a auditoria sugerir.

Para saber como melhorar a FCP em geral (para qualquer site), consulte os seguintes guias de desempenho:

CHANGELOG #

Occasionally, bugs are discovered in the APIs used to measure metrics, and sometimes in the definitions of the metrics themselves. As a result, changes must sometimes be made, and these changes can show up as improvements or regressions in your internal reports and dashboards.

To help you manage this, all changes to either the implementation or definition of these metrics will be surfaced in this CHANGELOG.

Last updated: Improve article