O que é a primeira pintura com conteúdo (FCP)? Um guia completo para 2026 - PT

Seus visitantes não esperarão por um site lento. Uma pesquisa do Google mostra que conforme o tempo de carregamento da página passa de 1 para 3 segundos, a probabilidade de rejeição aumenta em 32%. O First Contentful Paint captura o momento crítico em que os usuários veem pela primeira vez algo diferente de uma tela em branco.

Resposta rápida: Primeira pintura com conteúdo (FCP) é uma métrica de desempenho que mede quanto tempo até o primeiro texto, imagem, ou SVG aparece na tela. Um bom FCP é 1.8 segundos ou menos. Embora o FCP não seja um fator direto de classificação do Google, afeta a percepção do usuário e se correlaciona com LCP, o que afeta as classificações.

Última revisão: fevereiro 2026. Informações verificadas em relação à documentação atual do web.dev.

O que a primeira pintura com conteúdo realmente mede

O FCP rastreia o tempo desde o início da navegação até o momento em que o navegador renderiza o primeiro conteúdo visível. Isso poderia ser um texto, uma imagem, um SVG, ou um elemento de tela não branco. As cores de fundo não contam. Nem os spinners de carregamento em branco.

Pense desta forma: antes do FCP disparar, seu visitante olha para uma tela branca se perguntando se algo está quebrado. Depois do FCP, eles sabem que a página está carregando e é mais provável que esperem.

Aqui está o que acontece antes que o FCP possa disparar:

Pesquisa DNS → Conexão TCP → Handshake SSL → Resposta do servidor (TTFB) → Download de HTML → Análise de CSS → Primeira pintura

Cada etapa adiciona tempo. É por isso que o FCP varia entre testes de laboratório e usuários reais. Seu ambiente de teste ignora a realidade confusa das pesquisas de DNS, redes móveis lentas, e servidores sob carga.

O que conta como “Conteúdo” para FCP

• Texto renderizado de HTML ou fontes da web
• Imagens (incluindo imagens de fundo CSS)
• Elementos SVG com conteúdo visual
• Elementos de tela não brancos (gráficos, desenhos)

O que não conta

• Telas brancas ou em branco
• Cores de fundo do espaço reservado
• quadros (eles medem seu próprio FCP)
• Elementos da interface do navegador

Por que o FCP é importante (Mesmo que não seja um fator de classificação)

FCP não é um dos Core Web Vitals do Google. Os sinais de classificação reais são LCP (Maior tinta com conteúdo), INP (Interação com a próxima pintura), e CLS (Mudança cumulativa de layout). Então, por que se preocupar com o FCP?

1. FCP é o piso para LCP. O LCP nunca pode ser mais rápido que o FCP. Se o seu FCP for 3 segundos, seu LCP (o sinal de classificação real) é pelo menos 3 segundos. Resolver problemas de FCP geralmente também resolve problemas de LCP.

2. FCP afeta a velocidade percebida. Os usuários julgam seu site pela rapidez com que ele parece, não pelo que suas métricas dizem. Uma página que mostra conteúdo em 1 segundo e termina em 3 segundos parece mais rápido do que aquele que não mostra nada até 2.5 segundos, mesmo que o tempo total de carregamento seja semelhante.

3. FCP impacta taxas de rejeição. Essa tela branca em branco é quando os usuários decidem ficar ou sair. Quanto mais tempo dura, quanto mais pessoas clicarem no botão Voltar antes mesmo de seu conteúdo aparecer.

4. Contas FCP para 10% da sua pontuação no Lighthouse. Embora as pontuações do Lighthouse não afetem diretamente as classificações, eles são usados ​​em muitas auditorias e relatórios de desempenho.

Limites de pontuação do FCP

Google define três faixas de desempenho:

• Boa: 1.8 segundos ou menos
• Precisa de melhorias: 1.8 para 3.0 segundos
• Pobre: Mais que 3.0 segundos

Aqui está o que importa: você precisa 75% de carregamentos de página para acertar o “Boa” limite. Uma carga rápida na Internet de fibra não compensa cem cargas lentas no celular.

Para contexto, o FCP médio na web é de cerca de 2.5 segundos no celular de acordo com dados do arquivo HTTP. Isso significa que a maioria dos sites está no “precisa de melhorias” zona. Batendo 1.8 segundos colocam você à frente da maioria.

As pontuações para dispositivos móveis e computadores diferem enormemente. Dispositivos móveis têm processadores mais lentos, e redes celulares adicionam latência. Uma pontuação do site “Boa” no desktop pode falhar no celular. Sempre verifique ambos.

FCP x LCP: Qual é a diferença?

Ambas as métricas medem o tempo de pintura, mas em momentos diferentes:

FCP: Quando qualquer conteúdo aparece pela primeira vez (até mesmo apenas o seu texto de navegação).

LCP: Quando o maior elemento de conteúdo terminar de carregar (geralmente sua imagem principal ou título principal).

FCP dispara primeiro. Se o texto do seu menu de navegação for renderizado em 0.8 segundos, isso é FCP. Quando sua imagem principal terminar de carregar às 2.5 segundos, isso é LCP.

A diferença de SEO: LCP é um Core Web Vital e afeta as classificações. FCP é uma métrica de diagnóstico que não. Mas como eles compartilham muitas causas, melhorar o FCP normalmente melhora o LCP.

Os limites atuais do Core Web Vitals:

• LCP: Bom abaixo 2.5 segundos
• INP: Bom abaixo 200 milissegundos
• CLS: Bom abaixo 0.1

Como medir o FCP

Você precisa de ambos os dados de laboratório (testes controlados) e dados de campo (usuários reais). Eles contam histórias diferentes.

Ferramentas de teste de laboratório

Google PageSpeed ​​Insights: Insira qualquer URL e obtenha pontuações FCP para dados de laboratório e de campo. o “Oportunidades” seção informa exatamente o que está atrasando as coisas. Livre, nenhuma configuração necessária.

Farol (Chrome DevTools): Clique com o botão direito em qualquer página, selecione Inspecionar, vá para a guia Farol. Mais controle sobre as condições de teste do que o PageSpeed ​​​​Insights. Mostra uma análise detalhada do que está bloqueando a renderização.

Teste de página da Web: Testes avançados em vários locais e velocidades de conexão. Útil para diagnosticar problemas específicos do local.

Dados de campo (Usuários reais)

Relatório de experiência do usuário do Chrome (CrUX): Dados reais de usuários do Chrome que visitam seu site. Aparece no PageSpeed ​​​​Insights se você tiver tráfego suficiente. Isto é o que o Google realmente usa para sinais de classificação.

Biblioteca JavaScript web-vitals: Adicione isto ao seu site para coletar dados FCP de cada visitante:

importar {noFCP} de 'web-vitais';

noFCP(metric => {
  // Enviar para o Google Analytics 4
  gtag('evento', 'web_vitals', {
    nome_métrica: 'FCP',
    valor_métrico: métrica.valor,
    classificação_métrica: classificação.métrica
  });
});

Painel de desempenho do Chrome DevTools

Para depuração, registrar um carregamento de página no painel Desempenho. Você verá o FCP marcado na linha do tempo exatamente com o que foi renderizado. Isso mostra se o seu FCP é um conteúdo significativo ou apenas um botão giratório de carregamento.

Vitórias rápidas: o 80/20 de Otimização FCP

Antes de chegarmos ao guia completo de otimização, aqui estão as mudanças que causam o maior impacto com o menor esforço:

1. Ativar compactação de texto. Se o seu servidor não estiver enviando respostas compactadas Gzip ou Brotli, habilitá-lo. Geralmente, essa é uma única alteração na configuração do servidor que pode reduzir o tamanho das transferências em 70%+.

2. Adicionar exibição de fonte: troque para suas fontes. Esta propriedade CSS evita texto invisível enquanto as fontes são carregadas. Os usuários veem as fontes do sistema imediatamente, então suas fontes personalizadas são trocadas.

3. Adiar JavaScript não crítico. Adicionar defer para qualquer tag de script que não precise ser executada imediatamente. Isso evita que o JavaScript bloqueie a primeira pintura.

4. Verifique sua hospedagem. Se o seu TTFB (Hora do primeiro byte) é superior a 600 ms consistentemente, nenhuma otimização de front-end levará você a um bom FCP. Seu servidor precisa responder mais rápido. Considerar Hospedagem VPS se você estiver em hospedagem compartilhada, ou adicione um CDN.

5. Execute o PageSpeed ​​​​Insights e corrija o primeiro “Oportunidade.” O Google informa exatamente o que está bloqueando sua pintura. Comece com o que tiver a maior economia estimada.

Guia completo de otimização

FCP depende de uma cadeia: DNS → Conexão → Resposta do servidor → Download de HTML → Análise de CSS → Paint. Veja como acelerar cada parte.

Reduza o tempo de resposta do servidor (TTFB)

O tempo até o primeiro byte costuma ser o maior contribuidor para o FCP. Se o seu servidor demorar 2 segundos para responder, seu FCP não pode estar abaixo 2 segundos.

• Use um CDN (rede de entrega de conteúdo) para servir em locais mais próximos dos usuários
• Habilite o cache do lado do servidor para consultas de banco de dados e HTML
• Reduzir redirecionamentos (cada um adiciona uma viagem completa de ida e volta)
• Atualize a hospedagem se o seu provedor não puder fornecer TTFB abaixo de 200 ms

Se você estiver ligado Hospedagem Compartilhada com TTFB lento, a solução mais barata é muitas vezes Armazenamento em nuvem com CDN integrado.

Elimine recursos de bloqueio de renderização

CSS e JavaScript no cabeçalho do documento bloqueiam a renderização até que sejam baixados e executados.

• CSS crítico embutido (estilos para conteúdo acima da dobra) diretamente em HTML
• Carregar CSS não crítico de forma assíncrona
• Adicionar async ou defer para JavaScript não essencial
• Mova o JavaScript para a parte inferior do seu HTML quando possível

Otimize a entrega de CSS

O navegador deve baixar e analisar todo o CSS antes de pintar o conteúdo que o CSS possa afetar.

• Minificar CSS (remover espaços em branco e comentários)
• Remova CSS não utilizado com ferramentas como PurgeCSS
• Evite CSS @import (cada um adiciona uma rede de ida e volta)
• Divida CSS por tipo de mídia usando atributos de mídia

Otimize fontes da web

Fontes personalizadas podem bloquear totalmente a renderização de texto até o download.

• Usar font-display: swap nas regras @font-face
• Pré-carregar fontes críticas: <link rel="preload" href="font.woff2" as="font" crossorigin>
• Limitar variantes de fonte (cada peso é um arquivo separado)
• Considere fontes do sistema para o corpo do texto

Comprimir e minimizar tudo

• Habilite a compactação Gzip ou Brotli em seu servidor
• Minimizar HTML, CSS, e JavaScript
• Otimizar imagens (WebP ou AVIF, dimensões apropriadas)

Use dicas de recursos

Pré-conectar para domínios de terceiros que você precisará:

<link rel ="pré-conectar" href ="https://fontes.googleapis.com">

Pré-carregar recursos críticos:

<link rel ="pré-carga" href ="crítico.css" como ="estilo">

Use com moderação. Pré-conectar-se a muitos domínios desperdiça recursos.

Simplifique seu DOM

Grande, HTML profundamente aninhado leva mais tempo para analisar. Mantenha sua estrutura plana, evite divs de wrapper excessivos, e carregamento lento de conteúdo abaixo da dobra.

Solução de problemas comuns de FCP

FCP varia entre testes

As condições da rede e os tempos de resposta do servidor flutuam. Execute vários testes e use a mediana. Para dados de campo, verifique se segmentos específicos (usuários móveis, certas regiões) mostrar pontuações piores.

Boas pontuações de laboratório, Dados de campo ruins

Os testes de laboratório são executados em condições ideais. Usuários reais têm conexões lentas, telefones antigos, e redes congestionadas. Confie nos dados de campo em vez dos dados de laboratório. Teste com limitação habilitada no DevTools.

FCP melhorou, mas LCP permaneceu ruim

Seu primeiro conteúdo pode ser menor (texto de navegação, logotipo) enquanto seu conteúdo principal (imagem do herói) ainda está lento. Verifique o que realmente está sendo renderizado no momento do FCP. Concentre a otimização em seu conteúdo principal.

Scripts de terceiros bloqueando o Paint

Google Analytics, widgets de bate-papo, e os scripts de anúncios geralmente bloqueiam a renderização. Audite-os. Adie ou remova qualquer coisa não essencial. Considere carregar alguns scripts somente após interação do usuário.

perguntas frequentes

O FCP é um fator de classificação do Google??

Não, FCP não afeta diretamente as classificações. Os Core Web Vitals que impactam o SEO são LCP, INP, e CLS. Contudo, Problemas de FCP geralmente também significam problemas de LCP, pois compartilham causas. Consertar o FCP geralmente melhora seus sinais reais de classificação.

O que causa FCP alto?

As causas mais comuns são resposta lenta do servidor (TTFB), CSS e JavaScript com bloqueio de renderização, fontes não otimizadas, e grandes recursos não compactados. Execute o PageSpeed ​​​​Insights para ver exatamente o que está bloqueando seu site.

Qual é uma boa pontuação FCP para celular?

Mesmo limite: debaixo 1.8 segundos é bom, 1.8 para 3 segundos precisam de melhorias, sobre 3 segundos é ruim. Os dispositivos móveis normalmente têm pontuação pior que os computadores devido à latência da rede e ao poder de processamento do dispositivo. Verifique o celular separadamente no PageSpeed ​​​​Insights.

Como descubro o que está bloqueando o FCP?

Use o PageSpeed ​​​​Insights e observe o “Oportunidades” seção. Para uma análise mais profunda, O painel de desempenho do Chrome DevTools mostra uma linha do tempo exatamente o que acontece antes do FCP ser acionado. O Lighthouse também sinaliza recursos específicos de bloqueio de renderização.

A hospedagem afeta o FCP?

sim. Sua hospedagem determina o TTFB, que geralmente é a maior parte do tempo do FCP. Resposta lenta do servidor significa FCP lento, período. Serviços CDN pode ajudar veiculando conteúdo de locais mais próximos dos seus usuários.

Devo me concentrar em FCP ou LCP?

Concentre-se no LCP se você puder escolher apenas um, pois é o sinal de classificação real. Mas a maioria das otimizações melhora ambas as métricas. Se o seu FCP é bom, mas o LCP é ruim, o problema é o seu conteúdo principal (grandes imagens de heróis, seções de carregamento lento) não é renderização inicial.

Como o FCP se relaciona com o Core Web Vitals?

FCP é uma métrica de diagnóstico, não é um Core Web Vital. Ajuda a identificar problemas, mas não contribui para os cálculos de classificação do Google. Os três Core Web Vitals são LCP (Carregando), INP (interatividade), e CLS (estabilidade visual).

O que fazer a seguir

Comece com medição. Execute seu site por meio do PageSpeed ​​​​Insights agora mesmo e anote sua pontuação FCP para dispositivos móveis e computadores. Olhe para o “Oportunidades” seção para recomendações específicas.

Se o seu TTFB estiver alto (mais de 500ms), endereço de hospedagem primeiro. Nenhuma otimização de front-end ajuda se o seu servidor estiver lento. Compare as opções em nosso Guia de hospedagem SSD ou considere Armazenamento em nuvem com CDN integrado.

Se o TTFB estiver bom, mas o FCP ainda estiver lento, trabalhe com os ganhos rápidos: ativar compactação, adicionar exibição de fonte: troca, adiar JavaScript não crítico. Estas mudanças por si só muitas vezes reduzem o FCP em 30-50%.

Para monitoramento contínuo, adicione a biblioteca web-vitals para rastrear o FCP do usuário real ao longo do tempo. Os dados de campo informam como os visitantes reais experimentam seu site, não apenas como ele funciona em testes controlados.