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.
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.
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 de laboratório
- Farol
- Chrome DevTools (link em inglês)
- PageSpeed Insights
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:
- Elimine recursos que bloqueiam a renderização
- Minimizar 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, na sigla em inglês)
- Evitar vários redirecionamentos de página
- Pré-carregar solicitações principais
- Evitar payloads de rede muito grandes
- Disponibilize recursos estáticos com uma política de cache eficiente
- Evitar o DOM de tamanho excessivo
- Minimizar a profundidade crítica da solicitação
- Garantir que o texto permaneça visível durante o carregamento da webfont
- Reduzir o número de solicitações e o tamanho das transferências
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.