8 maneiras acionáveis ​​de melhorar o FCP no WordPress

Este artigo abordará várias maneiras fáceis de melhorar seu FCP ou First Contentful Paint no WordPress. Ao melhorar essa métrica de desempenho, seu site WordPress terá uma melhor experiência do usuário, obterá uma classificação mais alta no Google e carregará notavelmente mais rápido. Primeiro, vamos ver o que é FCP muito rapidamente e, em seguida, discutir várias maneiras fáceis de melhorar essa métrica em seu site WordPress.

O que é FCP?

O FCP, também conhecido como First Contentful Paint, é uma estatística coletada de usuários reais por meio do relatório de experiência do usuário do Chrome. Esta é uma das medidas mais realistas da experiência do usuário no mundo real. Ele é projetado para medir como os visitantes e usuários individuais percebem o desempenho de um site. É também uma das primeiras de muitas estatísticas de velocidade que o Google começará a usar em sua campanha de encantamento de sites, com o objetivo de melhorar a experiência do usuário para os consumidores em todos os sites.

A primeira pintura de conteúdo é a primeira instância de renderização de conteúdo visual para o usuário final. Neste exemplo, FCP ocorre no segundo quadro e é o primeiro elemento de conteúdo que foi renderizado para o usuário. Ter um FCP mais rápido garante que o usuário permanecerá em seu site até que todo o conteúdo seja carregado, pois o tempo percebido de carregamento desse conteúdo é muito mais rápido.

Como afirmamos em nossa descrição exaustiva do que são FCP e LCP, você deve entender que isso muda com base no site e na página específica. Assim, seu FCP pode ser uma coisa em uma página e outra coisa em outra página. Isso adiciona um pouco de complexidade ao processo de otimização, mas contanto que você entenda o que é FCP e siga os métodos discutidos neste artigo, você estará pronto para começar.

Lembre-se de que o Google começará a usar essas métricas como indicadores de classificação sérios em março de 2021, portanto, descobrir sua primeira pintura de conteúdo antes desse ponto é de seu interesse.

Testando e entendendo a primeira pintura de conteúdo

Compreender e testar suas métricas de primeira pintura de conteúdo é muito fácil. Tudo que você precisa usar é a ferramenta de velocidade de página do Google. Basta inserir sua URL e uma das primeiras métricas informará em segundos a velocidade de carregamento do seu site.

Um site que carrega em menos de um segundo em relação ao FCP é classificado como rápido, um site que carrega em menos de 3 segundos FCP é conhecido como moderado e um site que tem uma primeira exibição de conteúdo de três segundos ou mais é conhecido como lento. Como você pode ver, não há muita margem de manobra aqui, e você definitivamente precisa de um FCP que seja muito mais rápido que 3 segundos para classificar bem no Google.

A boa notícia é que melhorar sua primeira pintura de conteúdo no WordPress tem vários métodos acionáveis ​​que farão uma melhoria imediata e duradoura. A maioria dessas soluções envolve plugins que automatizarão o processo de otimização para você, tornando a otimização do FCP no WordPress muito mais fácil.

Então, com essa introdução do FCP fora do caminho, vamos entender como podemos melhorar essa métrica. Mesmo se você tiver um bom FCP, aprimorá-lo mesmo em milissegundos pode aumentar a experiência do usuário e resultar diretamente em aumento de conversões e menor taxa de rejeição em seu site WordPress.

Foco no tempo para o primeiro byte

A primeira e mais prática coisa que você pode fazer para reduzir seu tempo de FCP e aumentar essa pontuação seria focar no seu tempo até o primeiro byte. Muitos sites têm um TTFB muito lento, ou o tempo que um navegador leva para receber a primeira parte do conteúdo da página da web. TTFB é a soma do tempo necessário para obter a solicitação HTTP, processar essa solicitação e o tempo de resposta da própria solicitação HTTP.

Em termos leigos, se o seu site demorar mais do que a média para se conectar ao servidor, a renderização e o download do conteúdo serão mais lentos para o usuário final, resultando em um FCP mais lento.

O FCP é a primeira métrica que aparece, portanto, está quase diretamente relacionada ao TTFB. As duas principais maneiras de melhorar seu tempo até o primeiro byte em um site WordPress, aumentando diretamente sua pontuação no First Contentful Paint, é escolher um host WordPress rápido e usar um CDN de qualidade.

Se você tem um host WordPress rápido, os dados são enviados para o navegador do visitante muito mais rápido que o normal, aumentando o TTFB. Se você tiver um usuário que está carregando o site de um local geograficamente distante em relação ao local do servidor, utilizar um CDN que tenha um nó individual fisicamente mais próximo do usuário final aumentará seriamente seu TFB e levará a um primeiro Pontuação de pintura com conteúdo.

Ao recomendar um bom host WordPress e CDN, sempre dizemos que essa deve ser uma solução integrada. Você não deve procurar um CDN individual e um host WordPress individual, em vez disso, você deve procurar um host WordPress muito rápido que incorpore um CDN em seu serviço. Isso não apenas economizará dinheiro, mas será muito menos complexo e, devido à integração, provavelmente mais rápido.

Então, a primeira coisa que você pode fazer para melhorar seu FCP é olhar para um bom host. O melhor host que possui um CDN integrado (Cloudflare Enterprise, que inclui otimização automática de plataforma) é o Rocket.net.

Este é o host WordPress que usamos para servir nosso blog para quase 100.000 visitantes por mês e, devido à sua integração com um CDN premium e hardware extremamente rápido para começar, bem como um cache de página inteira, o TTFB é incrivelmente baixo, significando que nosso FCP não é restrito.

Elimine recursos de bloqueio de renderização

A próxima ação que você pode fazer para minimizar seu tempo de FCP é eliminar recursos de bloqueio de renderização. Os recursos de bloqueio de renderização são elementos de um site, normalmente CSS e JavaScript, que são chamados durante o processo de renderização de sua página da Web.

Como eles bloqueiam o processo de renderização, o navegador precisa esperar para realmente exibir elementos DOM para um visitante, baixar o recurso de bloqueio de renderização, analisá-lo e continuar renderizando a página inteira.

Se você assumiu que esse bloqueio da renderização também bloqueia o elemento First Contentful, isso estaria correto. E quanto mais tempo esses recursos bloquearem o processo de renderização, mais tempo levará para renderizar o primeiro elemento Contentful, levando a uma pontuação de tempos de FCP mais alta.

A melhor maneira de eliminar recursos de bloqueio de renderização é usar um plug-in de terceiros chamado Asset Cleanup para adiar e carregar JavaScript e CSS de forma assíncrona. Você pode até mesmo desabilitar vários scripts em uma página da web onde eles não são usados, minimizando o CSS não utilizado, que é algo sobre o qual falaremos mais adiante neste artigo.

CSS crítico embutido

Além disso, o CSS crítico embutido permite que você adie o carregamento de sua folha de estilo CSS principal até o final do processo de renderização. Isso pode ser feito com a limpeza de ativos, mas também recomendamos combinar o WP Rocket, que é um plug-in de armazenamento em cache e otimização. Isso tem um gerador de CSS crítico automático e funciona muito bem em relação à remoção de recursos de bloqueio de renderização.

CSS não utilizado eliminado

Em seguida, como mencionamos, seria eliminar o CSS não utilizado. Se você estiver carregando estilos não utilizados em uma página da Web, eles podem bloquear a renderização, mas eles simplesmente tornam sua página mais pesada, resultando em mais dados transferidos, resultando em um FCP mais lento.

Livrar-se dessas folhas de estilo CSS não utilizadas é uma ótima maneira de minimizar a quantidade de dados transferidos, abrindo caminho para que o elemento crítico First Contentful seja pintado em seu site. Isso impacta diretamente a pontuação FC de forma benéfica.

Para fazer isso, não há software automatizado, mas existe um plug-in que ajuda a remover CSS de páginas individuais e intervalos de páginas. Isso é Asset Cleanup, como mencionamos acima, e permite ativar e desativar estilos e scripts.

Você pode então testar o front-end do seu site para ver se alguma coisa quebra e, se não, você removeu o CSS não utilizado, resultando em um site de carregamento mais rápido e uma melhor pontuação de FCP.

Remover elementos de script acima da dobra (como anúncios JS)

Em termos da composição real do seu site, remover elementos baseados em script que estão acima da dobra é uma maneira infalível de melhorar sua primeira pintura de conteúdo de um site WordPress. JavaScript pode ser otimizado o máximo possível, mas devido à sua composição, sempre será mais lento para renderizar do que HTML direto e CSS crítico embutido.

Portanto, se você tiver algum JavaScript que seja considerado a primeira pintura de conteúdo de uma página da Web (essencialmente qualquer coisa localizada acima da dobra ou na janela de visualização inicial que carrega para o visitante), você definitivamente deseja se livrar dele e substituí-lo com HTML puro.

Isso geralmente é um problema em sites de conteúdo que utilizaram anúncios baseados em JavaScript que são carregados acima da dobra. Esses scripts também podem ter um grande impacto negativo em sua mudança cumulativa de layout.

Ao substituí-los por HTML de carregamento mais rápido, você melhorará seriamente o First Contentful Paint, apenas devido à natureza da tecnologia HTML e CSS.

Desabilitar Lazy Load Above The Fold (louco, eu sei)

Continuando esta limpeza de quaisquer elementos baseados em JavaScript, se você estiver com preguiça de carregar qualquer imagem exibida acima da dobra, você desejará realmente desabilitar esse recurso.

O carregamento lento de imagens é uma ótima maneira de aumentar o desempenho do seu site WordPress, mas na verdade elas têm um impacto negativo no First Contentful Paint, pois utilizam bibliotecas JavaScript para habilitar essa funcionalidade.

Portanto, desative o carregamento lento de imagens que carregam acima da dobra, mas certifique-se de que elas sejam otimizadas adequadamente. Isso inclui convertê-los para o formato WebP (use ShortPixel), bem como comprimi-los completamente para serem o menor possível, mantendo a clareza.

Imagens em linha (SVG ou Base64)

Se você quiser ficar ainda mais louco com sua otimização de imagem, para imagens menores que não têm um grande requisito de resolução, você pode ir em frente e inline-las. Isso é bom se você tiver um logotipo específico ou uma imagem menor que carregue acima da dobra. Ao convertê-los para os formatos SVG ou base 64, você inline a imagem, reduzindo uma solicitação HTTP extra para baixá-los, melhorando seu FCP.

Lembre-se de que este conselho pode ser útil apenas para casos de uso específicos e, se você tiver um servidor baseado em HTTP2 ou uma imagem incrivelmente pesada que está tentando alinhar, é melhor mantê-lo como está.

No entanto, utilizar logotipos SVG e base 64, ícones de pesquisa, ícones de mídia social e planos de fundo pode ser benéfico para sua primeira pintura de conteúdo, melhorando a pontuação do seu site WordPress no Google e beneficiando sua classificação e experiência do usuário.

Concentre-se no tamanho do DOM

A última coisa importante que você pode fazer é focar no tamanho do seu DOM. O DOM, ou modelo de objeto de documento, é uma estrutura semelhante a uma árvore que se refere essencialmente a todos os elementos da sua página.

Portanto, quaisquer divs dentro do corpo, wrappers de extensão, parágrafos, cabeçalhos, metalinks e mais seriam considerados elementos DOM. Quanto mais elementos em uma página, maior será o tempo de renderização e mais lenta será sua primeira pintura de conteúdo.

Assim, reduzindo o número de elementos DOM, você terá um site de carregamento mais rápido. Isso pode ser feito reconstruindo completamente a página sendo o mais enxuta possível com quaisquer elementos colocados nela, ou utilizando um novo tema ou construtor de páginas.

Por exemplo, o Elementor envolve seus elementos em dezenas de divs desnecessários, portanto, mudar para um construtor de páginas com um código mais baixo pode minimizar o número de elementos DOM em uma página, levando a menos transferência de dados, levando a tempos de renderização mais rápidos, levando a melhores pontuações do First Contentful Paint no Google.

Conclusão

Como o First Contentful Paint é derivado da experiência do usuário do mundo real em seu site WordPress, você não pode andar de skate com um ativo de baixo desempenho. Em vez disso, você precisa abordar seu primeiro e enfrentar as pontuações de pintura de frente, incorporando esses seis métodos em sua otimização, resultando em uma melhor experiência do usuário, maior posicionamento no ranking e menor taxa de rejeição.

Existem muitos outros métodos que você pode usar para aumentar o desempenho geral de um site WordPress, o que também será benéfico para sua primeira pintura de conteúdo, mas esses seis métodos são a melhor maneira de aumentar sua primeira pintura de templo em um site WordPress. Se você tiver outras recomendações de otimização, sinta-se à vontade para deixá-las na seção de comentários abaixo.