First Contentful Paint (FCP)
O First Contentful Paint (FCP) mede quanto tempo leva para o primeiro elemento de conteudo - texto, imagem, SVG ou canvas nao branco - ser renderizado na tela depois que o usuario solicita uma pagina. E o momento em que os usuarios veem o primeiro sinal de que "esta pagina esta respondendo".
O First Contentful Paint (FCP) mede quanto tempo leva para o primeiro elemento de conteudo - texto, imagem, SVG ou canvas nao branco - ser renderizado na tela depois que o usuario solicita uma pagina. E o momento em que os usuarios veem o primeiro sinal de que "esta pagina esta respondendo".
Por Que Isso Importa
Usuarios encarando uma tela em branco abandonam rapido. Pesquisas do Nielsen Norman Group mostram que a atencao cai acentuadamente assim que a primeira resposta visual ultrapassa 1 segundo. O FCP nao e uma Core Web Vital oficial hoje, mas e um componente-chave da pontuacao de desempenho do Lighthouse e um indicador antecipado do LCP. Se o FCP for lento, o LCP nunca podera ser bom.
Limites
| Classificacao | FCP |
|---|---|
| Bom | <= 1,8s |
| Precisa melhorar | 1,8 a 3,0s |
| Ruim | > 3,0s |
Medido no 75o percentil (p75) dos dados de usuarios reais do Chrome User Experience Report.
TTFB -> FCP -> LCP -> INP
O carregamento da pagina e uma linha do tempo de metricas sequenciais.
- TTFB: Tempo ate o servidor enviar o primeiro byte
- FCP: Tempo ate o primeiro conteudo ser renderizado
- LCP: Tempo ate o maior elemento de conteudo ser renderizado
- INP: Tempo ate uma interacao do usuario responder visualmente
A ordem importa: se o TTFB for lento, o FCP nao pode ser rapido, e o LCP tambem nao. O trabalho de desempenho precisa comecar "de cima".
O Que Torna o FCP Lento
TTFB lento: Um servidor lento atrasa o FCP na mesma medida.
Recursos que bloqueiam a renderizacao: CSS externo e JS sincrono no <head> precisam ser baixados e executados antes que o navegador possa renderizar. Se forem muitos ou muito grandes, o FCP trava.
DOM de grande tamanho: Milhares de elementos no HTML inicial custam tempo de parsing e layout.
Carregamento de web fonts: Fontes personalizadas ainda nao carregadas causam o FOIT (flash de texto invisivel), fazendo o FCP parecer atrasado.
Renderizacao no lado do cliente (CSR): Aplicacoes React e Vue que renderizam o conteudo apenas depois de baixar e executar o bundle JS atrasam bastante o FCP.
Como Otimizar
Melhore o TTFB: CDN, cache no lado do servidor e otimizacao do banco de dados - a base.
Elimine recursos que bloqueiam a renderizacao: Use async e defer para adiar o JS. Coloque o CSS critico inline e carregue o restante de forma assincrona.
Renderizacao no lado do servidor (SSR): Use frameworks como Next.js, Astro ou Remix para pre-gerar o HTML no servidor.
Otimizacao de fontes: font-display: swap exibe um texto alternativo imediatamente enquanto as fontes personalizadas carregam. Use preload apenas para as fontes criticas.
Reduza os bundles de JS: Tree shaking, code splitting e a remocao de bibliotecas nao utilizadas reduzem o bundle inicial.
Otimizacao de imagens: Use <link rel="preload"> na imagem principal (hero) e sirva WebP ou AVIF.
Ferramentas de Medicao
- PageSpeed Insights: Dados de campo do CrUX + dados de laboratorio
- Lighthouse: Diagnostico em nivel de pagina
- Chrome DevTools -> Performance: FCP na linha do tempo
- Biblioteca JS web-vitals: Coleta dados de usuarios reais no seu proprio site
Fontes: