Como melhorar a primeira pintura de conteúdo (FCP) no WordPress

Uma introdução ao First Contentful Paint

First Contentful Paint é uma métrica útil que monitora a velocidade de carregamento da página. Há uma variedade de métricas semelhantes que medem o desempenho de um site. O FCP, em particular, concentra-se no tempo que leva para o primeiro conteúdo aparecer em uma página. Uma vez que o FCP é gerado, o usuário sabe que o resto está a caminho.

É semelhante à métrica Largest Contentful Paint (LCP) no Core Web Vitals do Google. Mas enquanto o LCP mede quanto tempo leva para carregar o conteúdo “principal” de um site, o FCP se concentra apenas na primeira parte do conteúdo, que pode ou não ser o conteúdo principal.

Existem muitos fatores que contribuem para a sua pontuação FCP. Arquivos JavaScript e HTML mal otimizado são causas comuns de desempenho lento, pois muitos recursos são necessários para processá-los. Além disso, os scripts de bloqueio de renderização podem afetar sua pontuação FCP, pois precisam ser processados ​​antes que qualquer outra operação possa ser executada.

Sua pontuação FCP é importante porque é um indicador da velocidade geral do seu site. O desempenho não é apenas vital para o seu UX, mas também é um fator que os mecanismos de pesquisa, como o Google, consideram ao decidir como classificar suas páginas. Um desempenho ruim pode levar a classificações de pesquisa mais baixas. Isso significa que, se você não souber como melhorar o First Contentful Paint, isso pode afetar a visibilidade do seu site.

Como medir a primeira pintura de conteúdo

Embora o FCP forneça uma janela para a percepção do usuário, ainda é uma métrica que pode ser medida objetivamente por meio de testes de laboratório e dados de campo. Por exemplo, o PageSpeed ​​Insights é uma ferramenta que permite que você veja o que seus usuários reais estão experimentando ( desde que seu site tenha tráfego suficiente para ser incluído no relatório de experiência do usuário do Chrome ).

Mesmo que seu site não tenha dados suficientes para ver as experiências reais do usuário, o PageSpeed ​​Insights ainda pode ajudá-lo a coletar dados FCP em seus testes de laboratório simulados.

Para usá-lo, basta inserir sua URL e obter um resultado imediato:

Você também pode alternar entre as visualizações para dispositivos móveis e computadores para ver a capacidade de resposta do seu site em vários dispositivos.

Outra ferramenta útil para medir o FCP é o WebPageTest, que demora um pouco mais, mas pode fornecer uma análise mais aprofundada.

O que é um bom tempo de FCP?

De acordo com o Chrome, seu site tem uma boa pontuação de FCP se estiver abaixo de 1,8 segundos. Quando sua pontuação FCP excede três segundos, isso é motivo de preocupação.

No entanto, mesmo que seu site tenha atualmente uma pontuação FCP forte, sempre há espaço para melhorias.

Como melhorar o First Contentful Paint no WordPress (6 técnicas)

Agora que você sabe um pouco mais sobre o FCP, vamos dar uma olhada em como melhorar o First Contentful Paint em seu site por meio de seis métodos eficazes:

1. Use uma rede de distribuição de conteúdo (CDN)
2. Otimize e comprima imagens
3. Elimine recursos de bloqueio de renderização
4. Reduza o tamanho do seu DOM
5. Melhore o tempo de resposta do servidor
6. Evite muitos redirecionamentos de página

1. Use uma rede de distribuição de conteúdo (CDN)

Uma rede de entrega de conteúdo (CDN) é uma maneira fácil de aumentar os tempos de carregamento gerais. Sem um, quando um usuário visitar seu site, ele precisará aguardar enquanto os dados necessários são transferidos entre o servidor principal de seu site e sua localização. Isso pode resultar em tempos de espera mais longos para usuários geograficamente distantes dos servidores do seu provedor de hospedagem.

Por outro lado, um CDN oferece uma rede de servidores distribuídos por todo o mundo. Portanto, o conteúdo pode ser entregue de qualquer servidor que esteja fisicamente mais próximo de cada visitante.

Um exemplo popular de CDN é o Cloudflare, que possui mais de 275 data centers em todo o mundo:

Com o Cloudflare, você pode aproveitar outras técnicas de otimização, como a otimização de imagens sem perdas.

Normalmente, os CDNs também usam cache e outras estratégias para melhorar o FCP. Por exemplo, seu provedor de CDN pode oferecer minificação e compactação de arquivos para iluminar seu site. Isso ajuda a reduzir a latência, melhorar a experiência do usuário e aliviar a carga em seu servidor principal.

2. Otimize e comprima imagens

As imagens raramente são o primeiro elemento a carregar em seu site. No entanto, se você executar um site com muita mídia, como um portfólio ou uma vitrine de fotografia, é importante otimizar e compactar imagens para melhorar sua pontuação FCP (e desempenho geral).

Uma maneira de otimizar suas imagens é alternar para um formato de arquivo diferente. Por exemplo, se você atualmente usa JPG/JPEGs ou PNGs, pode mudar para um formato com melhor compactação, como SVG ou WebP.

Você também deve redimensionar as imagens para as menores dimensões que atendam às suas necessidades e comprimi-las para reduzir ainda mais seu tamanho.

Embora você possa fazer tudo isso manualmente usando ferramentas online, uma maneira muito mais simples para os usuários do WordPress é usar um plug-in de otimização de imagem.

Por exemplo, o plug-in gratuito Optimole pode redimensionar, compactar e converter automaticamente suas imagens. Além disso, ele também pode atendê-los a partir de seu CDN integrado, que mata dois coelhos com uma cajadada só.

Essa ferramenta também permite fornecer imagens de alta qualidade em velocidades rápidas, independentemente do dispositivo que os visitantes usam para acessar seu site. Você pode usar recursos como carregamento lento e redimensionamento de imagem para aperfeiçoar ainda mais suas imagens.

3. Elimine recursos de bloqueio de renderização

Os recursos de bloqueio de renderização podem impedir que seu conteúdo seja carregado rapidamente, pois o navegador precisa processá-los primeiro, mesmo que não sejam importantes para carregar o conteúdo inicial do seu site. Como resultado, eles podem diminuir sua pontuação FCP. Isso pode incluir código HTML, folhas de estilo CSS e arquivos JavaScript.

Se você está se perguntando como melhorar o First Contentful Paint, existem algumas maneiras de eliminar os recursos de bloqueio de renderização. Se você se sentir confortável com o desenvolvimento e encontrar um código que não está sendo usado em sua página, pode excluí-lo. Você também pode identificar seus recursos críticos e colocá-los em linha dentro de sua página usando as tags <script> e <style>.

Além disso, é possível adiar o JavaScript, para que seu conteúdo não seja atrasado enquanto espera que o navegador processe esses arquivos. Além disso, você pode gerar CSS crítico para exibir o conteúdo “acima da dobra” (a parte que os usuários veem imediatamente). Se você não for um desenvolvedor, uma ferramenta como o Jetpack pode ajudá-lo a fazer algumas dessas alterações.

4. Reduza o tamanho do seu DOM

Quando uma página da Web é carregada, seu navegador cria um Document Object Model (DOM). Esta é uma representação de todos os objetos que compõem sua página.

Se houver muitos nós DOM (tags HTML) em sua página ou se eles estiverem aninhados muito profundamente, o navegador levará mais tempo para processar sua página. Isso pode resultar em velocidades de carregamento mais lentas e uma pontuação FCP ruim.

Portanto, você pode melhorar seu FCP reduzindo o tamanho do seu DOM. Você pode fazer isso manualmente excluindo tags <div> desnecessárias, dividindo páginas longas em páginas menores e limitando o número de postagens em seu arquivo ou em sua página inicial.

Além disso, você pode carregar lentamente seus elementos HTML usando um plug-in de otimização como o Optimole. Lazy loading é uma técnica que atrasa o carregamento do conteúdo até que seja necessário. Em vez de processar tudo de uma vez, o navegador pode se concentrar em fornecer os elementos imediatamente visíveis.

Escolher um tema otimizado também pode ajudar a reduzir o tamanho do DOM, já que muitos temas (e construtores de páginas) usam muitas tags <div>. Se você estiver procurando por um novo tema, sugerimos verificar o Neve, que é rápido, leve e usa apenas código de qualidade.

5. Melhore o tempo de resposta do servidor

O tempo de resposta do servidor também é chamado de tempo até o primeiro byte (TTFB). Essa métrica mede o tempo que leva entre o momento em que um usuário faz uma solicitação e o servidor envia o primeiro byte de informação.

Existem muitas maneiras de melhorar o tempo de resposta do seu servidor (e, como resultado, sua pontuação FCP).

Primeiro, é importante escolher um provedor de hospedagem de qualidade. É melhor procurar um host que atenda especificamente a sites WordPress e prestar atenção à localização de seus servidores. Idealmente, seu host deve ter servidores próximos ao seu público principal.

Se você deseja melhorar o desempenho do seu host, pode escolher um provedor de nossa coleção de hospedagem WordPress mais rápida com base em dados.

No entanto, se o seu provedor de hospedagem não oferece servidores convenientes, você sempre pode optar por um CDN, sobre o qual falamos anteriormente ao discutir como melhorar o First Contentful Paint.

O armazenamento em cache é uma ótima maneira de reduzir seus tempos de resposta. Alguns hosts oferecem cache embutido. Como alternativa, você pode instalar um plug-in de cache, como WP Rocket ou WP Fastest Cache.

6. Evite muitos redirecionamentos de página

Quando você visita uma página que o redireciona imediatamente para outro site, seu navegador precisa fazer outra solicitação HTTP para o novo local. Isso pode resultar em uma pontuação FCP ruim, pois atrasa o carregamento de sua página da web.

Quanto mais redirecionamentos você tiver em sua página, pior será sua pontuação FCP. Além disso, muitos redirecionamentos de página podem prejudicar gravemente o seu UX.

Se o problema estiver ocorrendo em todo o site, convém verificar como você gerencia os redirecionamentos de www para não www (ou vice-versa) e/ou de HTTP para HTTPS.

Por exemplo, se você redirecionar de http://www.yoursite.com para http://yoursite.com e novamente para https://yoursite.com , seria mais eficiente fazer isso em apenas uma etapa.

Se os redirecionamentos estiverem afetando apenas seu FCP em uma única página, convém examinar os redirecionamentos que você criou para essa página.

Você pode gerenciar redirecionamentos manualmente, embora isso possa ser demorado. Geralmente é melhor optar por um plugin do WordPress como o Redirection:

Uma vez instalado, você pode usar esta ferramenta para gerenciar redirecionamentos de forma fácil e rápida.

Melhore o tempo de FCP do seu site hoje

Em sites complexos ou com muito conteúdo, pode ser difícil manter tempos de carregamento rápidos. Felizmente, ao segmentar as principais métricas, como First Contentful Paint (FCP), você pode avaliar e melhorar o tempo que leva para os visitantes verem seu conteúdo.

Para recapitular, veja como melhorar o First Contentful Paint no WordPress:

Para outras maneiras de acelerar seu site, confira nossa coleção de maneiras diferentes de acelerar o WordPress.

Você tem alguma dúvida sobre como melhorar o FCP no WordPress? Deixe-nos saber na seção de comentários abaixo!