Medir e otimizar o FCP (First Contentful Paint)

Quanto mais tempo uma tela permanece branca durante o carregamento de um site, mais inquietos os visitantes ficam. O First Contentful Paint (FCP) refere-se ao tempo decorrido até que o navegador renderize o primeiro elemento de um site. O FCP é influenciado tanto pela configuração do site quanto pela qualidade da conexão com a internet.

Neste post, mostraremos por que um bom FCP é importante para seu site e como você pode otimizá-lo.

O que é First Contentful Paint?

Após inserir um URL na barra superior do navegador e pressionar “Enter”, você poderá notar que a janela do navegador fica branca por alguns instantes. Logo em seguida, o plano de fundo do site solicitado aparecerá, provavelmente seguido por texto, imagens e elementos interativos, como botões e a interface da página.

O período de tempo entre o momento em que você pressiona “Enter” e o aparecimento do conteúdo solicitado é conhecido como First Contentful Paint (FCP).

Em sites que carregam rapidamente, isso pode levar alguns milissegundos, tornando-se praticamente imperceptível. No entanto, a tela pode permanecer branca por vários segundos em sites com FCPs mais longos.

O primeiro elemento exibido pode ser um quadro, um bloco de texto, uma imagem ou um objeto HTML (botão, banner, barra, etc.). Ao pesquisar “comprar um carro usado” no Google, o primeiro elemento exibido é o logotipo do Google e a barra de pesquisa com a consulta. Neste exemplo, esses dois elementos seriam usados para medir o FCP.

Ao realizar uma pesquisa no Google, como a acima, acontece o seguinte:

1. O navegador (cliente) envia uma solicitação ao servidor DNS, que prepara o endereço IP do Google.
2. Quando seu navegador obtém o endereço IP do Google, ele se conecta ao servidor do Google e, se estiver em uma conexão HTTPS, ocorre um handshake seguro com ambas as partes se identificando mutuamente.
3. O servidor envia o pacote de dados solicitado.
4. O primeiro byte de dados é recebido pelo cliente (Tempo até o Primeiro Byte, TTFB).
5. Seu navegador começa a renderizar conteúdo. As cores de fundo da tela geralmente são as primeiras a mudar (First Paint).
6. O primeiro elemento (como uma parte do texto) aparece (First Contentful Paint ou FCP).
7. Em seguida, o primeiro elemento significativo no site é carregado (First Meaningful Paint, FMP).
8. Depois disso, o maior elemento (bloco de texto, imagem, etc.) é carregado (Largest Contentful Paint, LCP).
9. Por fim, o usuário pode interagir com o site (Time to interactive, TTI).

Por que um bom FCP é importante?

Ao contrário de outras métricas, como o Tempo até o Primeiro Byte, o First Contentful Paint não é apenas um indicador técnico, mas também fornece insights sobre o tipo de experiência que os usuários podem esperar.

Os usuários percebem sites com um FCP ruim como “lentos” ou “não responsivos”, pois a tela permanece branca por muito tempo. Isso, por sua vez, faz com que eles abandonem o site e não queiram mais visitá-lo.

Ao contrário do Largest Contentful Paint, o FCP não é um dos chamados “Core Web Vitals”. Essas métricas são consideradas (por organizações como o Google, por exemplo) as métricas de desempenho técnico mais críticas para um site e, desde 2021, influenciam fortemente o posicionamento dos sites na gigante da internet.

Mesmo assim, o FCP impacta a experiência do usuário, já que o visitante estará mais propenso a usar um site com o qual possa interagir mais rapidamente do que um com conteúdo igualmente bom, mas que demore mais para carregar.

Qual é a diferença entre First Contentful Paint e First Meaningful Paint?

Os testes de desempenho às vezes diferenciam entre First Contentful Paint (FCP) e First Meaningful Paint (FMP Primeira Pintura Significativa).

Enquanto a FCP se refere ao primeiro elemento que aparece na tela, a segunda se refere ao primeiro elemento significativo que o usuário vê. Para dar um exemplo: o “relógio” da FCP é interrompido assim que um menu ou logotipo aparece, enquanto a FMP só termina após a materialização de uma imagem ou bloco de texto.

Como posso medir o First Contentful Paint do meu site?

Existem várias maneiras de medir a First Contentful Paint do seu site, com diversas ferramentas e testes detalhados de velocidade de página disponíveis online. Além do FCP, eles geralmente medem outras métricas, como Tempo até o Primeiro Byte (TTFB) e Largest Contentful Paint.

O Google permite descobrir o FCP do seu site ao usar o PageSpeed Insights. Além disso, a ferramenta exibe uma série de parâmetros essenciais, como Largest Contentful Paint, Tempo de Interação e Mudança Cumulativa de Layout.

A versão gratuita do GTmetrix analisa um site e exibe suas estatísticas mais importantes. Um aspecto interessante dessa ferramenta é que ela reflete quanto tempo leva para o site carregar completamente (Fully Loaded Time), exibindo todo o processo em uma janela na tela.

O que é um bom First Contentful Paint?

Segundo o Google, um FCP abaixo de 1,8 segundos é considerado bom (verde). Aqueles entre 1,8 e 3 segundos são satisfatórios (laranja), enquanto FCPs acima de 3 segundos são considerados carregamento lento (vermelho).

Como posso melhorar o First Contenful Paint do meu site?

Como mencionado acima, o First Contentful Paint é composto pelo Tempo até o Primeiro Byte mais o tempo de carregamento do navegador.

Para melhorar o FCP, você precisará remover elementos que dificultam a renderização e quaisquer outros fatores que limitam a velocidade da conexão. Sempre que o Google identificar um FCP como necessitando de melhorias ou atenção imediata, você pode tentar otimizá-lo executando o seguinte:

Melhore o TTFB – Plugins de cache, redes de distribuição de conteúdo (CDNs), uso de HTTP/2, compactação de imagens e alteração do seu host da web podem melhorar o desempenho do seu site.
Simplifique JavaScript e CSS – Um arquivo CSS é uma espécie de folha de instruções que fornece um modelo de como sites HTML individuais são exibidos em um dispositivo final. Códigos inchados ou mal escritos tornam a renderização mais lenta. Por esse motivo, é importante remover comentários, recursos (tabuladores) e espaços vazios desnecessários do script CSS. Plugins do WordPress como WP Rocket e Swift Performance podem ajudar a exibir rapidamente o cabeçalho no navegador, mesmo antes de todo o arquivo CSS ser baixado.
Definir viewports – Os viewports definem as áreas de exibição de um site dependendo do meio de onde são solicitados (por exemplo, tablet, smartphone, laptop, etc.). Ao especificar um viewport para dispositivos móveis, o navegador não precisará dimensionar o site, economizando tempo.
Compactar arquivos – Algoritmos como GZIP e Brotli compactam arquivos durante a transferência, ajudando a acelerar o tempo de carregamento. Quase todas as versões mais recentes dos navegadores Chrome, Edge, Mozilla e Safari suportam compactação e extração de arquivos.
Reduza o tamanho do DOM do seu site – O Document Object Model (DOM) é uma interface de navegador que representa uma página HTML e todos os objetos que ela contém como nós. O navegador precisa analisar o HTML antes de renderizar o site correspondente. Como resultado, quanto maior for a árvore DOM, mais tempo levará para carregar. Para garantir que o DOM do seu site seja o mais compacto possível, é uma boa ideia organizá-lo em várias seções menores e eliminar scripts CSS desnecessários. Em geral, um DOM não deve conter mais de 1.500 nós. Também não é uma boa ideia que ele tenha uma profundidade superior a 32 níveis.
Minimize o JavaScript que bloqueia a renderização – Sempre que um site é renderizado, o navegador carrega a árvore DOM, que descreve a estrutura HTML do site. Assim que encontra um script, ele o executa, o que aumenta significativamente o tempo de renderização. Por esse motivo, certifique-se de que os scripts necessários sejam o mais simples e concisos possível. Scripts não essenciais devem ser executados somente após a conclusão da primeira renderização.
Use o encaminhamento com moderação – Nos chamados encaminhamentos 301, o servidor envia ao cliente um novo endereço, como meusite.meublog.com em vez de minhapagina.meublog.com . As cadeias de encaminhamento têm um impacto extremamente negativo no FCP e devem ser usadas apenas em casos raros. Se o seu URL mudou várias vezes, encaminhe os visitantes para o endereço mais recente e não para todas as iterações entre elas.

Medir e otimizar o FCP. Conclusão

Os menores First Contentful Paints são bons indicadores de experiências positivas do usuário, pois mostram que o conteúdo carrega rapidamente para o usuário em seu navegador. Mesmo que o parâmetro não seja considerado um Core Web Vital pelo Google, é uma boa ideia otimizá-lo.

Diversas ferramentas podem ser usadas para descobrir o FCP do seu site. Se ele puder ser melhorado ou exigir atenção imediata, há medidas que você pode tomar agora mesmo. Os culpados mais comuns são árvores DOM superdimensionadas, scripts CSS redundantes ou cadeias de encaminhamento longas.

Agora que você já sabe como Medir e otimizar o FCP, leia outros posts em nosso Blog de SEO