First Contentful Paint (FCP)

Philip Walton

Compatibilidade com navegadores

  • Chrome: 60.
  • Borda: 79.
  • Firefox: 84.
  • Safari: 14.1.

Origem

O que é FCP?

A métrica First Contentful Paint (FCP, na sigla em inglês) mede o tempo entre o momento em que o usuário navega pela primeira vez até a página e o momento em que qualquer parte do conteúdo dela é renderizada na tela. Para esta métrica, "conteúdo" refere-se a texto, imagens (incluindo imagens de plano de fundo), elementos <svg> ou elementos <canvas> não brancos.

.
Linha do tempo da FCP em google.com
Nessa linha do tempo de carregamento, a FCP acontece no segundo frame, porque é quando os primeiros elementos de texto e imagem são renderizados na tela.

Na linha do tempo de carregamento representada na imagem anterior, a FCP acontece no segundo frame, ou seja, quando os primeiros elementos de texto e imagem são renderizados na tela.

Você vai notar que, embora parte do conteúdo tenha sido renderizado, nem todo o conteúdo foi renderizado. Essa é uma distinção importante entre a First Contentful Paint e a Maior exibição de conteúdo (LCP), que visa medir quando o conteúdo principal da página terminou de carregar.

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

Para oferecer uma boa experiência ao usuário, os sites precisam ter uma First Contentful Paint de 1,8 segundos ou menos. Para garantir que você alcance essa meta para a maioria dos usuários, um bom limite para medir é o 75o percentil de carregamentos de página, segmentado em dispositivos móveis e computadores.

Bons valores de FCP são de 1,8 segundos ou menos, valores ruins são maiores do que 3,0 segundos, e qualquer item entre eles precisa ser melhorado.
Bons valores de FCP têm no máximo 1,8 segundo. Os valores ruins são maiores que 3 segundos.
.

Como medir a FCP

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

Ferramentas de campo

Ferramentas do laboratório

Medir a FCP em JavaScript

Para medir a FCP em JavaScript, use a API Paint Timing. O exemplo a seguir mostra como criar um PerformanceObserver que detecta 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});

No snippet de código anterior, a entrada first-contentful-paint registrada vai informar quando o primeiro elemento contentful foi exibido. 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 vai enviar uma entrada first-contentful-paint para páginas carregadas em uma guia em segundo plano, mas essas páginas precisam ser ignoradas ao calcular a FCP. Os tempos da first paint só deverão ser considerados se a página estiver em primeiro plano o tempo todo.
  • A API não informa entradas first-contentful-paint quando a página é restaurada do cache de avanço e retorno, mas a FCP precisa ser medida nesses casos, já que os usuários as utilizam como visitas distintas à página.
  • A API pode não informar os tempos de exibição de iframes de origem cruzada, mas, para medir corretamente a FCP, considere todos os frames. Os subframes podem usar a API para informar o tempo de pintura ao frame pai para agregação.
  • A API mede a FCP desde o início da navegação, mas para páginas pré-renderizadas, a FCP precisa ser medida usando activationStart, já que isso corresponde ao tempo de FCP 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 FCP, que lida com essas diferenças para você (quando possível). O problema com o iframe não é abordado:

import {onFCP} from 'web-vitals';

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

Consulte o código-fonte de onFCP() (em inglês) para ver um exemplo completo de como medir a FCP em JavaScript.

Como melhorar a FCP

Para saber como melhorar a FCP de um site específico, faça uma auditoria de desempenho do Lighthouse e preste atenção a oportunidades ou diagnósticos específicos sugeridos.

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

Registro de alterações

Às vezes, eles são descobertos nas APIs usadas para medir as métricas e, às vezes, nas definições das próprias métricas. Como resultado, é preciso fazer alterações algumas vezes e elas podem aparecer como melhorias ou regressões nos seus relatórios e painéis internos.

Para ajudar você a gerenciar isso, todas as alterações na implementação ou na definição dessas métricas serão exibidas neste registro de alterações.

Se você tiver feedback sobre essas métricas, envie no Grupo do Google web-vitals-feedback.