Está tendo dificuldades com o tempo de First Contentful Paint (FCP) em seu site?
Se você não está certo de que sabe bem o que é First Contentful Paint, ou se está procurando algumas dicas específicas sobre como acelerar o tempo do First Contentful Paint em seu site, este artigo é pra você.
Começaremos explicando o que é o FCP e como você pode medi-lo em seu site.
Em seguida, compartilharemos várias táticas que você pode usar para acelerar o tempo do FCP em seu site. E para tornar este artigo o mais acessível possível, tentaremos demonstrar ferramentas não técnicas e plugins de WordPress para ajudá-lo a implementar tudo.
Vamos lá!
O que é First Contentful Paint (FCP)?
First Contentful Paint, geralmente abreviado como FCP, é uma métrica de desempenho focada na experiência do usuário que mede o tempo necessário para que o primeiro item da página fique visível na tela do usuário.
O FCP é uma métrica importante porque afeta o desempenho percebido. Quando um visitante acessa seu site pela primeira vez, o navegador exibe uma tela em branco, o que não é uma boa experiência para os visitantes.
Quando o conteúdo começa a ser carregado, o visitante pelo menos sente que “algo” está acontecendo e que o conteúdo completo da página será carregado em breve. Assim, ter um tempo de FCP rápido pode fazer com que o usuário sinta que seu site é rápido, mesmo que ainda demore um pouco mais para o restante do conteúdo carregar.
Por outro lado, ter um tempo de FCP lento é frustrante para os usuários, pois mostra que a página está demorando muito para carregar. Não há nada pior do que ter visitantes olhando para suas telas em branco e até mesmo se perguntando se o seu site está funcionando.
First Contentful Paint vs Largest Contentful Paint
O LCP (Largest Contentful Paint) é outra métrica popular focada na experiência do usuário que funciona de forma semelhante ao First Contentful Paint.
Como as métricas são muito semelhantes, pode ser difícil entender as diferenças entre o First Contentful Paint e o Largest Contentful Paint.
Esta é a diferença básica entre eles:
- FCP — mede o tempo que leva para o primeiro objeto aparecer. Pode ser qualquer coisa, desde que algum tipo de conteúdo apareça na página.
- LCP — mede o tempo que leva para exibir o conteúdo principal da página.
Devido a essa diferença, o tempo de FCP da sua página deve ser sempre pelo menos um pouco menor do que o tempo de LCP da página. Pela definição das métricas, é impossível que o tempo de LCP seja mais rápido que o tempo de FCP. Embora eles possam ser tecnicamente iguais caso o “primeiro” elemento a ser carregado seja o mesmo que o elemento “principal”, isso não acontecerá na maioria das páginas.
Para ilustrar isso, aqui está uma linha do tempo em formato de tira de filme de uma análise do WebPageTest que realizamos na página inicial da Kinsta.
- O FCP ocorre na tira de filme de 1,0 segundo (0,924 segundo, para ser exato). Essa é a primeira vez que ela passa de uma página branca vazia para ter algum conteúdo visual.
- O LCP ocorre na tira de filme de 1,3 segundo (1,217 segundo, para ser exato). É quando o conteúdo “principal” da página fica visível.
O que é um bom tempo de First Contentful Paint?
O Google recomenda que você busque um tempo de First Contentful Paint de 1,8 segundo ou menos nas páginas do seu site.
O Google considera que tempos de FCP entre 1,8 e 3,0 segundos “Precisam melhorar”, enquanto os tempos de FCP acima de 3,0 segundos são “Ruins”.
Como medir o tempo do First Contentful Paint de uma página
A maneira mais fácil de medir o tempo de First Contentful Paint de uma página em seu site é usar a ferramenta PageSpeed Insights do Google, embora também existam outras ferramentas que você pode usar.
O bom do PageSpeed Insights é que fornecerá a você tanto resultados de testes simulados quanto dados de FCP de usuários reais (se o seu site tiver tráfego suficiente para ser incluído no relatório de experiência do usuário do Chrome).
Ele também abrange o desempenho em computadores e dispositivos móveis, pois o tempo de FCP da sua página varia conforme o dispositivo do usuário e a velocidade da conexão.
Veja como você pode testar uma página:
- Abra a página PageSpeed Insights.
- Insira a URL da página no seu site que deseja testar.
- Clique no botão Analyze.
Após uma breve espera, você deverá ver os resultados.
Se o seu site tiver tráfego suficiente para ser incluído no relatório Chrome User Experience, você verá dois tempos de FCP diferentes:
- O tempo na seção “Descubra o que os seus usuários reais estão experimentando” é o tempo médio de FCP para visitantes humanos reais do seu site.
- O tempo na seção “Diagnosticar problemas de desempenho” é baseado em um teste simulado. Você pode ver as condições da simulação na caixa cinza abaixo dos números.
Você também pode alternar entre os resultados para dispositivos móveis e computadores usando as abas na parte superior.
Para testar outras páginas do seu site, você pode repetir o processo.
Os tempos de FCP variam dependendo da página, portanto, recomendamos que você teste várias páginas para ter uma boa noção do desempenho do seu site.
Por exemplo, você pode testar a página inicial, a página de listagem do blog, um único artigo do blog, e assim por diante. E, novamente, certifique-se de examinar os dados de dispositivos móveis e de computadores.
Outras maneiras de medir os tempos de First Contentful Paint
Embora o PageSpeed Insights ofereça uma das maneiras mais simples de ver os tempos de FCP reais e simulados do seu site, há também outras ferramentas de teste de desempenho que você pode usar como complemento ou substituto do PageSpeed Insights.
Aqui estão alguns bons lugares pra você começar:
- WebPageTest — permite executar testes simulados usando diferentes velocidades de conexão, dispositivos e locais.
- Chrome Developer Tools — permite que você execute testes de desempenho diretamente do navegador.
- DebugBear — permite executar testes simulados em dispositivos móveis e de desktop e inclui muitos dados além do FCP.
- GTmetrix — permite executar testes simulados de diferentes locais. Você pode ver o tempo de FCP na aba Performance — nosso guia completo de testes do GTmetrix aborda isso com mais detalhes.
O que pode afetar os tempos de FCP do seu site?
Em um nível elevado, há dois conjuntos de problemas que podem tornar o FCP mais lento:
- Tempo de resposta lento do servidor — se o seu servidor demorar muito para fornecer os dados do seu site aos navegadores dos usuários, sua página terá um tempo de FCP lento. Isso pode incluir problemas como hospedagem ou DNS lentos, não usar cache (o que exige que o servidor tenha mais trabalho antes de poder servir uma página), não usar uma rede de distribuição de conteúdo (CDN), e assim por diante.
- Código do site mal otimizado — mesmo que o seu servidor responda rapidamente, você ainda poderá ter um tempo de FCP lento se o código do seu site estiver mal otimizado. Por exemplo, sua página pode ter toneladas de JavaScript que estão impedindo o carregamento do conteúdo visível. Você também pode ter problemas com CSS, imagens ou outras áreas do código do seu site.
Dependendo do seu site, você pode ter problemas em apenas uma dessas áreas ou em ambas.
Como acelerar o First Contentful Paint: 10 dicas que funcionam
Agora que você sabe mais sobre o que é o First Contentful Paint e por que ele é importante, vamos ver algumas dicas práticas que podem ser implementadas para melhorar os tempos do seu site.
O bom de implementar essas dicas é que elas melhorarão todas as métricas de desempenho do seu site, não apenas o FCP.
Aqui está um resumo rápido da lista — vamos analisá-las em detalhes a seguir:
1. Mude para uma hospedagem mais rápida
Há um fato inevitável quando se trata de FCP:
Se a hospedagem subjacente do seu site for lenta, o FCP continuará lento, mesmo que você tenha um site perfeitamente otimizado.
A implementação das outras dicas desta lista fará com que o FCP do seu site melhore, mas o desempenho do site sempre será limitado pela qualidade da hospedagem.
Portanto, você pode ir em frente e implementar as outras dicas desta lista primeiro. Mas se ainda tiver problemas com tempos de FCP lentos depois de fazer todo o resto, talvez seja necessário mudar para uma hospedagem mais rápida.
Se você não tiver certeza por onde começar, a hospedagem gerenciada de WordPress na Kinsta é uma ótima opção.
Não apenas a infraestrutura subjacente é otimizada para o desempenho, mas a Kinsta também pode ajudar você a implementar automaticamente muitas das outras estratégias desta lista, incluindo cache, rede de distribuição de conteúdo (CDN), DNS otimizado, imagens otimizadas e muito mais.
2. Use o cache de página (de preferência no nível do servidor)
Se você criou seu site com WordPress, ele precisará processar dinamicamente o código do lado do servidor para cada visitante (por padrão).
Quando uma pessoa visita sua página, o seu servidor de hospedagem precisa executar o PHP do WordPress e consultar o banco de dados do seu site para gerar o documento HTML finalizado a ser entregue ao navegador do usuário.
Isso leva tempo, especialmente em uma hospedagem de baixa capacidade, o que pode ter um grande efeito nos tempos de FCP do seu site.
Com o cache de página, você pode “armazenar em cache” a versão HTML finalizada de cada página. Em vez de precisar processar o código do lado do servidor para cada visita, seu servidor responderá imediatamente com o HTML finalizado em seu cache.
Se você usar a hospedagem Kinsta, ela implementará automaticamente o cache de página para você por meio da funcionalidade Edge Caching.
O diferencial da abordagem Edge Caching da Kinsta é que ela pode servir as páginas armazenadas em cache a partir da rede global do Cloudflare. Discutiremos o que é uma rede de entrega de conteúdo na próxima seção, mas a vantagem de alto nível é que ela permite que você obtenha tempos de carregamento global muito rápidos.
Se estiver hospedando em outro lugar, você pode verificar se o seu provedor de hospedagem tem um recurso de cache no nível do servidor ou usar um dos muitos plugins de cache do WordPress, como o WP Rocket e o FlyingPress.
3. Implemente uma rede de distribuição de conteúdo (CDN)
Um CDN (rede de distribuição de conteúdo) é uma rede global de servidores que armazenam uma cópia de parte ou de todo o conteúdo/arquivos do seu site.
Quando uma pessoa visita o seu site, o CDN automaticamente fornece os arquivos do site a partir do local que está fisicamente mais próximo do visitante.
Como a distância física ainda desempenha um papel nos tempos de carregamento (ainda não superamos a velocidade da luz!), o navegador do visitante receberá os arquivos do seu site mais rapidamente, melhorando o tempo de FCP.
Se você usar a hospedagem Kinsta, a Kinsta implementará automaticamente um CDN gratuito alimentado pelo Cloudflare para todas as páginas do seu site, o que fornece o mais rápido desempenho global.
Se estiver hospedando em outro lugar, você mesmo pode implementar um CDN usando provedores como Cloudflare, Amazon CloudFront, Fastly e outros.
4. Use um provedor de DNS mais rápido
Antes que o navegador de um usuário possa se conectar ao servidor do seu site, ele precisa primeiro usar o DNS (Sistema de Nomes de Domínio) para localizar o servidor web real associado ao nome de domínio do seu site.
O provedor de DNS que você configurou para usar o seu nome de domínio afetará o tempo que esse processo leva, o que, consequentemente, afetará o FCP do seu site.
Por exemplo, segundo o DNSPerf, a diferença entre o provedor mais rápido e o mais lento é de mais de 130 ms, o que é bastante significativo.
Se você hospeda com a Kinsta, já obtém acesso ao DNS premium com tecnologia Amazon Route53 ao usar os servidores de nomes da Kinsta.
Se você estiver hospedando em outro lugar, o Cloudflare oferece um dos melhores serviços de DNS gratuitos.
5. Otimize o CSS do seu site
Agora que você já corrigiu os problemas de tempo de resposta do servidor, é hora de otimizar o código do seu site, começando pelo CSS.
O CSS controla o design e o estilo dos elementos da sua página. Embora seja uma parte essencial de qualquer site, seu CSS pode estar diminuindo o tempo de FCP se estiver sendo carregado de forma não otimizada e/ou se você estiver carregando CSS em páginas onde não é necessário.
Temos um artigo inteiro sobre como otimizar o CSS, mas vamos examinar as táticas mais importantes para acelerar o FCP.
Remova o CSS não utilizado
Em primeiro lugar, você deve remover qualquer CSS não utilizado das páginas em que não é necessário.
Uma maneira de fazer isso é o método manual. Uma ferramenta como o PurifyCSS pode verificar se há CSS não utilizado em suas páginas, e então você pode remover manualmente esse código. O PageSpeed Insights também sinalizará o CSS não utilizado na seção “Reduce unused CSS” dos seus diagnósticos.
Entretanto, se você estiver usando o WordPress, há alguns plugins úteis que podem automatizar todo o processo, o que é muito mais fácil (especialmente para quem não é desenvolvedor). Algumas boas opções a considerar são WP Rocket, FlyingPress e Perfmatters.
Todos esses plugins são ferramentas premium. Mas acreditamos que o investimento vale a pena, pois eles também podem ajudar você a implementar muitas das outras dicas desta lista.
Coloque inline o CSS crítico e adie o CSS não crítico
Por padrão, seu site provavelmente esperará até que todo o código CSS seja carregado antes de começar a renderizar o conteúdo acima da dobra. Contudo, isso não é o ideal do ponto de vista da experiência do usuário, porque você realmente só precisa do CSS necessário para o conteúdo acima da dobra — todo o resto pode esperar até mais tarde.
O CSS para o conteúdo acima da dobra de uma página é chamado de CSS crítico.
Para acelerar o FCP da página e outras métricas de desempenho, você pode colocar esse CSS crítico diretamente na seção <head> da página (também conhecido como colocá-lo inline) em vez de carregá-lo como parte de uma folha de estilo externa.
Para usuários mais avançados, você pode gerar manualmente o CSS crítico de uma página usando uma ferramenta como esta.
Mas, novamente, no WordPress, você pode automatizar esse processo para cada página individual do seu site usando o FlyingPress ou o WP Rocket.
Após colocar inline o CSS crítico em uma página, você pode adiar com segurança o carregamento do restante do CSS da página até mais tarde no processo de carregamento (depois que o conteúdo acima da dobra já tiver sido renderizado).
Tanto o WP Rocket quanto o FlyingPress farão isso automaticamente para você como parte da sua funcionalidade crítica de CSS, o que é outro motivo para considerar usá-los.
Minifique o código CSS
Por fim, outra maneira de aumentar um pouco o desempenho do código CSS do seu site é minificá-lo. Quando você minifica o código CSS, ele é reduzido. Ao minificar o código CSS, você remove caracteres e espaços em branco desnecessários, o que pode aumentar ainda mais a economia de tamanho.
Plugins como o WP Rocket e o FlyingPress podem fazer isso pra você. Você também pode encontrar plugins específicos de minificação, como o Fast Velocity Minify.
6. Otimize o JavaScript do seu site
Além do CSS, o JavaScript do seu site é outra área à qual você deve dedicar algum tempo para otimizar o código do site.
Assim como no CSS, há várias estratégias diferentes que você pode implementar para reduzir o impacto do JavaScript nos tempos de FCP do seu site.
Não use elementos dependentes de JavaScript acima da dobra
Se você utilizar o JavaScript para habilitar funcionalidades importantes acima da dobra, tais como o menu de navegação do seu site (isso é especialmente comum na versão para dispositivos móveis de um site, pois muitos dos seus menus dependem de JavaScript), isso poderá reduzir o tempo de FCP, pois os navegadores dos usuários precisam carregar o JavaScript pesado antes de começar a renderizar a página.
Se estiver usando WordPress, escolher um tema com desempenho otimizado deve ajudá-lo a evitar isso, pois bons desenvolvedores evitarão depender do JavaScript para essas funções.
Você também pode tentar evitar o uso de controles deslizantes e outros elementos acionados por JavaScript em áreas acima da dobra.
Remova o JavaScript desnecessário
Embora você queira dar uma ênfase especial em reduzir o uso de JavaScript em elementos acima da dobra, geralmente também é uma boa ideia remover o máximo possível de JavaScript desnecessário de cada página.
Para começar, você deve excluir todos os plugins de WordPress que não melhoram significativamente o seu site, pois muitos desses plugins dependem de JavaScript para sua funcionalidade.
Outra opção é usar um plugin de gerenciador de scripts como o Asset CleanUp ou o Perfmatters para desativar o JavaScript página por página, o que permite desativar os scripts nas páginas em que eles não são necessários, mas ainda deixá-los ativados em outras páginas.
Também temos um guia mais técnico sobre como desativar plugins página por página.
Elimine o JavaScript que bloqueia a renderização (adiando ou atrasando)
Não importa o que aconteça, você provavelmente ainda precisará carregar pelo menos algum JavaScript na sua página. Para garantir que esse JavaScript não interfira no carregamento do conteúdo acima da dobra, há duas estratégias comuns que você pode implementar:
- Adiar o JavaScript que bloqueia a renderização — você pode evitar o bloqueio do carregamento de outro conteúdo adiando o carregamento do JavaScript para mais tarde no processo de renderização da página. Você pode usar defer ou async, e há plugins de WordPress para automatizar esse processo.
- Atrasar o JavaScript até a interação do usuário — você pode esperar completamente para carregar parte ou todo o JavaScript do seu site até que o usuário interaja com a página (por exemplo, clicando ou rolando a página). Isso oferece o melhor aumento de desempenho, mas talvez você precise excluir manualmente determinados scripts para não causar problemas.
Você pode implementar ambas as táticas no WordPress por meio de plugins como o WP Rocket ou o FlyingPress.
Também temos guias sobre como adiar a análise de JavaScript e como eliminar recursos de bloqueio de renderização.
Minifique o código JavaScript
Por fim, você deve reduzir o JavaScript restante do seu site para obter alguns pequenos benefícios adicionais de desempenho com a remoção de caracteres desnecessários.
Assim como na redução do CSS, a maioria dos plugins de cache e desempenho (incluindo WP Rocket e FlyingPress) pode fazer isso pra você. Você também pode usar um plugin específico, como o Fast Velocity Minify.
7. Desative o lazy loading para imagens acima da dobra
Com o lazy loading (carregamento preguiçoso) de imagens, você pode atrasar o carregamento das imagens do seu site até que sejam necessárias (por exemplo, quando um usuário rola a página pra baixo).
Normalmente, o lazy loading é bom para o desempenho se você estiver carregando imagens que estão abaixo da dobra. No entanto, o lazy loading de imagens acima da dobra pode, na verdade, afetar negativamente os tempos de FCP e LCP do seu site.
Portanto, você deve certificar-se de excluir todas as imagens acima da dobra do lazy loading.
Se você estiver usando o recurso padrão de lazy loading do WordPress, ele deve fazer isso automaticamente. Mas se tiver problemas, ajuste manualmente esse comportamento usando a função wp_omit_loading_attr_threshold.
Se você estiver usando um plugin para lazy loading, espera-se que o plugin ofereça uma opção para fazer isso. Por exemplo, o Perfmatters permite que você exclua automaticamente um determinado número de imagens principais e exclua manualmente imagens específicas, se necessário.
Se o seu plugin não oferece esse recurso, considere a possibilidade de mudar para um que ofereça.
8. Otimize a entrega das fontes
Para garantir que o conteúdo de texto fique visível durante o carregamento (o que pode afetar os tempos de FCP e a experiência do usuário), é importante otimizar também a forma como as fontes são carregadas se você estiver usando fontes personalizadas (como fontes encontradas no Google Fonts).
Para evitar problemas, você pode usar os descritores CSS Font-Display: Optional ou Font-Display: Swap.
Com Font-Display: Optional, você pode informar aos navegadores dos usuários que devem usar uma fonte alternativa se a fonte personalizada não for carregada rápido o suficiente.
Se você não quiser adicionar isso usando seu próprio CSS, há vários plugins de WordPress que podem otimizar o carregamento de fontes pra você, incluindo WP Rocket, FlyingPress e Perfmatters.
9. Tente reduzir o tamanho do DOM o máximo possível
Segundo a Mozilla, o Document Object Model (DOM) é “a representação de dados dos objetos que compõem a estrutura e o conteúdo de um documento na web”.
Embora os visitantes humanos não interajam diretamente com o DOM, o DOM de uma página é importante para ajudar os navegadores web a entender e exibir o conteúdo de uma página.
Como regra geral, ter um DOM maior e mais complexo levará a tempos de FCP mais lentos do que uma estrutura DOM menor e otimizada.
Aqui estão algumas dicas para reduzir o tamanho do DOM do seu site:
- Use um tema de WordPress com desempenho otimizado — no WordPress, seu tema terá um papel importante no tamanho do DOM do seu site. Confira nossos artigos baseados em dados com os temas mais rápidos para WordPress e os temas mais rápidos para WooCommerce.
- Use o bloco Page Break — você pode dividir uma página longa usando o bloco Page Break.
- Otimize a paginação — você pode usar paginação no WordPress para dividir as páginas que listam os artigos do seu blog (ou outros tipos de artigos personalizados).
- Mostre trechos — em vez de mostrar o texto completo nas páginas de listagem, considere a possibilidade de mostrar um trecho apenas.
- Limite ou evite o uso de criadores de páginas “pesados” — embora criadores visuais de páginas, do tipo drag and drop, possam ser ótimos do ponto de vista do design, também podem inchar bastante o DOM. Da perspectiva do desempenho, é melhor ficar com o editor nativo. Você pode achar que a perda de desempenho de um construtor visual é compensada pelo poder adicional de design, e isso geralmente é aceitável, desde que você esteja implementando as outras dicas.
10. Evite redirecionamentos (especialmente redirecionamentos múltiplos)
Os redirecionamentos permitem enviar tráfego de uma URL para outra URL antes que a página seja carregada. Por exemplo, você pode redirecionar alguém que visita a versão HTTP do seu site para a versão HTTPS.
Não obstante, como o redirecionamento precisa ser concluído antes que o navegador do usuário possa carregar a página, cada redirecionamento normalmente adiciona centenas de milissegundos de atraso ao tempo de FCP do seu site (e outras métricas de desempenho).
Aqui estão algumas dicas para evitar redirecionamentos desnecessários:
- Atualize as URLs codificadas se estiver mudando de HTTP para HTTPS — se você mudar seu site para HTTPS, deverá realmente atualizar todas as URLs no banco de dados do site para usar HTTPS, em vez de depender de redirecionamentos.
- Apontar URLs para versões WWW ou não-WWW corretas — certifique-se de que todas as suas URLs usem a versão correta para evitar redirecionamentos de WWW para não-WWW (ou vice-versa).
- Corrija links internos quebrados — atualize todos os links internos que estejam quebrados em vez de depender de redirecionamentos para enviar os usuários ao local correto.
- Peça a outros sites que corrijam links externos quebrados (se valer a pena) — se você estiver recebendo muito tráfego para um link quebrado de um site de terceiros, poderá entrar em contato com o proprietário do site e pedir que ele corrija o link em vez de depender de redirecionamentos.
Para encontrar problemas de redirecionamento, você pode usar a ferramenta gratuita de verificação de redirecionamento Kinsta. Também temos um artigo sobre práticas recomendadas de redirecionamento em WordPress.
Por exemplo, aqui você pode ver que o verificador de redirecionamento da Kinsta detectou vários redirecionamentos quando inserimos http://www.wordpress.org como URL:
- Um redirecionamento de HTTP para HTTPS.
- Um segundo redirecionamento de WWW para não-WWW.
Caso veja vários redirecionamentos como esses, precisará corrigi-los.
Resumo
O First Contentful Paint é uma métrica de desempenho focada na experiência do usuário que permite que você veja quanto tempo leva para que o primeiro item do conteúdo se torne visível em sua página. É semelhante ao Largest Contentful Paint, mas com pequenas diferenças.
Se você otimizar o tempo do First Contentful Paint do seu site, isso terá o efeito natural de melhorar também o tempo do Largest Contentful Paint, bem como a maioria das outras métricas de desempenho do seu site.
Para acelerar os tempos, você deve se concentrar na otimização do código frontend do site e do tempo de resposta do servidor.
Ao colocar seus sites com código otimizado em uma hospedagem WordPress rápida como a Kinsta, você deverá conseguir que os tempos de FCP do seu site fiquem bem abaixo da marca de 1,8 segundo que o Google considera “Bom”.
Deixe um comentário