First Contentful Paint (FCP)
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.
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.
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 #
- PageSpeed Insights
- Relatório de experiência do usuário Chrome
- Console de Busca (relatório de velocidade)
- Biblioteca JavaScript
web-vitals
Ferramentas de laboratório #
Medição da FCP em JavaScript #
- Chrome 60, Supported 60
- Firefox 84, Supported 84
- Edge 79, Supported 79
- Safari 14.1, Supported 14.1
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});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-paintpara 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-paintquando 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 {onFCP} from 'web-vitals';
// Measure and log FCP as soon as it's available.
onFCP(console.log);Para um exemplo completo de como medir a FCP em JavaScript, consulte o código-fonte de onFCP().
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:
- Elimine recursos que causam bloqueio de renderização
- Minifique o CSS
- Remova o CSS não utilizado
- Pré-conecte a origens necessárias
- Reduza os tempos de resposta do servidor (TTFB)
- Evite múltiplos redirecionamentos de página
- Pré-carregue solicitações importantes
- Evite enormes cargas de rede
- Sirva ativos estáticos com uma política de cache eficiente
- Evite um tamanho excessivo do DOM
- Minimize a profundidade de solicitações críticas
- Certifique-se que o texto permanece visível durante o carregamento de webfonts
- Mantenha as contagens de solicitações baixas e os tamanhos de transferência pequenos
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.
If you have feedback for these metrics, you can provide it in the web-vitals-feedback Google group.