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](https://web.developers.google.cn/static/articles/fcp/image/fcp-timeline-googlecom.png?authuser=9&hl=pt)
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.
Como medir a FCP
A FCP pode ser medida no laboratório ou em campo e está disponível nestas ferramentas:
Ferramentas de campo
- PageSpeed Insights
- Experiência do usuário no Chrome Relatório
- Search Console (Velocidade relatório)
- Biblioteca JavaScript
web-vitals
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:
- Elimine os recursos de bloqueio de renderização
- Minifique o 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 enormes
- Disponibilizar recursos estáticos com uma política de cache eficiente
- Evitar um DOM de tamanho excessivo
- Minimize 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 reduzir o tamanho das transferências
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.