First Contentful Paint (FCP)

Philip Walton

Compatibilidade com navegadores

  • 60
  • 79
  • 84
  • 14.1

Origem

A primeira exibição de conteúdo (FCP, na sigla em inglês) é uma métrica importante centrada no usuário para medir a velocidade de carga percebida. Ele marca o primeiro ponto na linha do tempo de carregamento de página em que o usuário pode ver qualquer coisa na tela. Uma FCP rápida ajuda a garantir ao usuário que algo está acontecendo.

A FCP 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 essa métrica, "conteúdo" se refere 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
Nesta 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.

Nem todo o conteúdo é renderizado quando o primeiro elemento de conteúdo é renderizado. Essa é uma distinção importante entre a FCP e a Maior exibição de conteúdo (LCP, na sigla em inglês), que mede quando o conteúdo principal da página termina de ser carregado.

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

Para oferecer uma boa experiência do usuário, os sites precisam ter uma FCP de 1,8 segundo 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.

Os valores bons de FCP são de 1,8 segundo ou menos, os valores ruins são maiores do que 3,0 segundos e qualquer valor entre eles precisa ser melhorado
Bons valores de FCP são 1,8 segundo ou menos. Valores ruins são maiores que 3,0 segundos.

Como medir a FCP

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

Ferramentas de campo

Ferramentas de laboratório

Medir a FCP no JavaScript

Para medir a FCP no JavaScript, use a API Painnt 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});

Nesse exemplo, a entrada first-contentful-paint registrada informa quando o primeiro elemento de conteúdo foi pintado. 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 envia uma entrada first-contentful-paint para páginas carregadas em uma guia em segundo plano, mas essas páginas precisam ser ignoradas no cálculo da FCP. Os tempos da primeira exibição são considerados apenas se a página ficou 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 porque os usuários as veem como visitas distintas à página.
  • A API pode não informar 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 os tempos 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 de activationStart, porque 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 processa essas diferenças sempre que possível (exceto em iframes):

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() 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, execute uma auditoria de desempenho do Lighthouse e preste atenção a oportunidades ou diagnósticos específicos sugeridos pela auditoria.

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

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 seu feedback no Grupo do Google web-vitals-feedback.