First Contentful Paint (FCP)

Philip Walton

O que é FCP?

A First Contentful Paint (FCP, na sigla em inglês) mede o tempo decorrido desde o momento em que o usuário acessou a página pela primeira vez até 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> que não sejam brancos.

Na linha do tempo de carregamento mostrada na imagem anterior, a FCP acontece no segundo frame, porque é 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 tudo foi renderizado. Essa é uma distinção importante a ser feita 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.

Qual é uma boa pontuação de FCP?

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

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

• PageSpeed Insights
• Relatório de experiência do usuário do Chrome
• Search Console (Relatório de velocidade)
• Biblioteca JavaScript web-vitals

Ferramentas do laboratório

• Farol
• Chrome DevTools
• PageSpeed Insights

Medir a FCP no 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 informa quando o primeiro elemento com conteúdo 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 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 usando 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 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() (link 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 estes guias de performance:

• Eliminar recursos que bloqueiam a renderização
• Compactar CSS
• Remover CSS não usado
• Remover JavaScript não usado
• Pré-conectar às origens necessárias
• Reduzir os tempos de resposta do servidor (TTFB)
• Evitar vários redirecionamentos de página
• Pré-carregar solicitações de chave
• Evitar payloads de rede muito grandes
• Oferecer recursos estáticos com uma política de cache eficiente
• Evitar um DOM de tamanho excessivo
• Minimizar a profundidade de solicitações críticas
• Garantir que o texto continue visível durante o carregamento da webfont
• Mantenha as contagens de solicitações baixas e os tamanhos de transferência pequenos

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, às vezes é necessário fazer mudanças, que 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.