A First Content Painting (ou FCP, abreviadamente) é uma métrica-chave utilizada pelo Google para medir a velocidade de carregamento de uma página Web, registando o tempo que demora desde que um utilizador começa a carregar uma página até aparecer a primeira parte do conteúdo da página.

Para os proprietários de sítios Web WordPress, o FCP mostra até que ponto um sítio Web está a funcionar bem e o impacto que pode ter na experiência do utilizador e na otimização dos motores de busca (SEO). Um FCP rápido significa que os visitantes não têm de ficar a olhar para um ecrã em branco durante longos períodos de tempo, o que pode tornar a sua experiência no sítio Web mais agradável e, por conseguinte, aumentar o envolvimento dos utilizadores.

O Google dá muita importância à experiência do utilizador, pelo que a pontuação FCP do seu site terá um impacto direto na sua classificação nos resultados de pesquisa. Ter uma boa pontuação FCP (idealmente classificada no top 25% de todas as experiências Web) significa que o tempo FCP deve ser de 1,8 segundos ou menos.

Melhores estratégias para melhorar o WordPress FCP

Redução do tempo de resposta do servidor

Uma das principais acções para melhorar o desempenho da Primeira Pintura de Conteúdo (FCP) de um site WordPress é reduzir o tempo de resposta do servidor, que medimos como Tempo para o Primeiro Byte (TTFB).

O TTFB é o tempo que o browser do utilizador demora a receber o primeiro byte de dados do servidor. Se o TTFB for lento, pode dever-se a:

• Problemas de conetividade de rede.
• As definições do servidor não estão optimizadas em termos de velocidade.
• Demasiados visitantes online ao mesmo tempo para o servidor aguentar.

Para acelerar o seu TTFB, eis o que pode fazer:

• Escolha um serviço de alojamento fiável que tenha boas instalações e experiência para lidar com tráfego intenso.
• A utilização de uma rede de distribuição de conteúdos (CDN), que pode alojar cópias do seu sítio Web em várias localizações em todo o mundo, permite que os utilizadores carreguem o sítio a partir da localização mais próxima, o que pode reduzir significativamente os tempos de carregamento.
• Active o armazenamento em cache para que, quando os visitantes regressarem, o sítio possa ser apresentado rapidamente sem ter de recarregar tudo de cada vez.

Elimine os recursos de bloqueio de renderização

Recursos de bloqueio de renderização, principalmente ficheiros JavaScript e CSS. Estes ficheiros têm de ser totalmente carregados e executados antes de o navegador poder começar a apresentar o conteúdo da página. Se estes ficheiros forem demasiado grandes ou complexos, o tempo que o seu sítio demora a carregar até aparecer a primeira parte do conteúdo (FCP) será mais longo.

Para que o seu site WordPress carregue mais rapidamente, é necessário otimizar a forma como o seu site lida com ficheiros JavaScript e CSS. Simplificando, faça o seguinte:

Para ficheiros JavaScript

O mais sensato a fazer éUtilizar os atributos async e defer em ficheiros JavaScript. 

Quando utiliza o "carregamento assíncrono", está na realidade a deixar o browser continuar a construir a página enquanto os ficheiros JavaScript são carregados silenciosamente em segundo plano. Depois de estes scripts serem descarregados, o browser pára de construir a página por breves instantes, executa os scripts e depois continua com o seu trabalho anterior. É uma boa ideia usar o carregamento assíncrono quando esses arquivos JavaScript não precisam ser executados em uma ordem específica.

A vantagem do "defer" é que permite ao browser esperar até que a página seja totalmente apresentada antes de executar o JavaScript, o que garante que quando o seu script precisar de interagir com os elementos HTML na página, estes já estão prontos.

A forma como escolhe o carregamento assíncrono ou atrasado depende muito do tipo de script que tem:

• Se a ordem pela qual os seus scripts são executados for importante, ou se os scripts tiverem de ser executados depois de a página ter sido totalmente apresentada, então o carregamento diferido pode ser mais adequado.
• Se o seu script não tiver muito a ver com os elementos HTML na página e a ordem de execução não for importante, então o carregamento assíncrono pode ser uma melhor opção.

Para ficheiros CSS

Considere escrever os estilos CSS que são inicialmente necessários para que a página seja carregada diretamente no HTML. Isto significa colocar os estilos básicos necessários para tornar o conteúdo visível para o utilizador, em primeiro lugar, diretamente no código da página Web. Ao fazê-lo, permite que o browser comece a apresentar a página mais rapidamente, não tendo de esperar por um ficheiro CSS externo ao carregar a página.

Além disso, a remoção de código CSS e JavaScript indesejado ou não utilizado pode ajudar as páginas a serem apresentadas mais rapidamente, tornando o FCP (First Time Content Painting) mais rápido.

Compressão de CSS

Comprimir CSS significa remover coisas indesejadas do ficheiro, tais como espaços extra, comentários e delimitadores, e fazê-lo não afectará o funcionamento da página.

Este método reduz significativamente o tamanho dos ficheiros CSS, permitindo-lhes carregar mais rapidamente, o que, por sua vez, acelera a primeira apresentação do conteúdo do seu site. Existem muitas ferramentas e plugins que o podem ajudar a automatizar este processo de compressão, oWP Rocketé uma das escolhas mais populares - não só comprime o CSS, como também oferece funcionalidades como o caching e o JavaScript de carregamento retardado para ajudar a tornar o seu site WordPress mais rápido.

Se precisar de outras opções, também pode tentarOtimização automáticaresponder com cânticosW3 Total Cachee outros plug-ins. Estas ferramentas comprimem automaticamente o CSS para que não tenha de o editar manualmente, poupando-lhe tempo e frustração.

Evite colocar elementos dependentes de JavaScript acima do primeiro ecrã

Se o conteúdo do seu sítio Web que é mostrado pela primeira vez aos visitantes depender muito de JavaScript, isso pode tornar mais lenta a primeira apresentação de conteúdo (FCP) do seu sítio Web. Isto deve-se ao facto de o browser ter de descarregar, analisar e depois executar o código JavaScript antes de poder apresentar o conteúdo.

Para tornar o FCP rápido, é melhor confiar principalmente em HTML e CSS para o conteúdo do primeiro ecrã do seu sítio, em vez de JavaScript, o que significa que tem de organizar a disposição do seu sítio e os elementos visuais básicos de uma forma que não exija que espere que o JavaScript carregue para os apresentar rapidamente.

O método para efetuar esta operação é o seguinte:

1. Avalie quais as partes do sítio que requerem JavaScript e quais as que não requerem.Por exemplo, elementos de design simples e conteúdos básicos não devem sernecessidadeJavaScript. Pode então construir o HTML para carregar estes elementos primeiro. Utilize CSS para estilizar o máximo possível, especialmente o primeiro ecrã. O CSS carrega mais rapidamente do que o JavaScript e pode frequentemente obter efeitos visuais semelhantes.
2. Carregamento diferido ou assíncrono de ficheiros JavaScriptespecialmente os ficheiros que não são importantes para a renderização inicial da página. Desta forma, o seu site pode apresentar o seu conteúdo principal sem ter de esperar que todo o JavaScript seja carregado e executado.

Ao dar prioridade ao carregamento de HTML e CSS para o conteúdo do primeiro ecrã e ao reduzir a sua dependência inicial do JavaScript, pode acelerar o FCP e criar uma experiência mais suave e mais reactiva para os visitantes quando chegam ao seu site WordPress.

Optimize as imagens e evite o atraso no carregamento do primeiro ecrã

Se as imagens no topo do seu sítio Web forem demasiado grandes, irão carregar lentamente, especialmente as imagens importantes que são colocadas no topo da página, o que irá atrasar a primeira impressão (FCP) da apresentação do sítio Web.

Por exemplo, se a grande imagem de fundo da página inicial (muitas vezes referida como a "imagem de herói") não estiver optimizada, tornará a página mais lenta como um engarrafamento.

Para evitar este problema, eis o que pode fazer:

• Imagens comprimidasIsto pode ajudar a reduzir o tamanho do ficheiro de imagem sem piorar muito o aspeto da imagem.
• Escolha o formato de imagem corretoPor exemplo, no caso das fotografias, as que estão no formato JPEG são normalmente mais pequenas e carregam mais depressa do que as PNG.
• Utilizar imagens responsivasForneça imagens de diferentes tamanhos, dependendo do dispositivo que está a aceder ao sítio. Por exemplo, os utilizadores de telemóveis recebem ficheiros de imagem mais pequenos do que os utilizadores de computadores de secretária, para que carreguem mais rapidamente em dispositivos de ecrã pequeno.
• Aplicação do carregamento diferidoCarregamento de imagens: Carregue as imagens apenas quando vão aparecer no ecrã. Este método funciona para imagens abaixo do primeiro ecrã, mas é melhor não o utilizar para imagens no primeiro ecrã para evitar afetar a velocidade de carregamento.
• Simplifique o processo com plug-insSmush é uma excelente ferramenta que comprime e optimiza automaticamente as imagens para si.

Com estes métodos, a velocidade de carregamento do seu sítio Web pode ser melhorada para que os visitantes possam ver rapidamente o conteúdo assim que abrem o sítio.

Implementar o caching ao nível do servidor

O caching ao nível do servidor é quando uma cópia da página de um sítio Web é mantida no servidor. Desta forma, quando alguém visita o sítio novamente, o servidor pode apenas apresentar esta página em cache sem ter de recarregar a página inteira de cada vez.

Este método é fantástico porque faz o que o cache do navegador não pode fazer. O cache do navegador é o processo de salvar as informações do site no computador ou no telemóvel de um visitante para que ele seja carregado mais rapidamente na próxima vez que ele o visitar. Mas para os visitantes que o visitam pela primeira vez, o cache do navegador não pode ajudar. O armazenamento em cache ao nível do servidor, por outro lado, torna a experiência mais rápida para todos os visitantes, sejam eles de primeira viagem ou não.

Atualmente, muitos dos serviços que oferecem alojamento WordPress incluem cache ao nível do servidor, o que torna tudo muito mais fácil. Também pode fazer isso com plugins como o WP Rocket ou o W3 Total Cache, que oferecem várias opções de cache, incluindo o cache ao nível do servidor.

Reduzir o tamanho do DOM

No desenvolvimento Web, existe algo chamado Modelo de Objeto de Documento, ou DOM (Document Object Model), que ajuda o browser a saber como apresentar cada parte da página, quer se trate de texto, imagens ou títulos.

O DOM transforma uma página Web numa grande árvore genealógica composta por muitas partes pequenas. Sempre que faz algo numa página Web (como clicar num botão), o navegador refere-se a esta árvore genealógica e actualiza a página Web de acordo com a sua ação.

Se a árvore genealógica for mais simples, mais rapidamente o browser processa a página Web, o que significa que a página Web pode ser-lhe apresentada mais rapidamente. No entanto, se a árvore genealógica for demasiado complexa, o browser tem de perder mais tempo a tentar percebê-la, o que torna a apresentação da página Web mais lenta, o que significa que tem de esperar mais tempo para ver o conteúdo. Simplificando, manter o DOM enxuto permite que as páginas Web carreguem mais rapidamente, proporcionando-lhe uma melhor experiência de navegação.

Essencialmente, um DOM mais simples permite interações mais rápidas e uma experiência de utilizador mais reactiva.

Eis algumas dicas úteis para reduzir o tamanho do DOM:

• Minimizar os custos desnecessáriosdivElemento:A utilização excessiva de elementos HTML div pode levar a um DOM demasiado grande. Simplifique a estrutura da página removendo as divs que não são utilizadas para um fim específico.
• Utilize o CSS de forma mais eficiente:Utilize CSS em vez de se basear fortemente em JavaScript ou numa estrutura HTML excessiva para a criação de estilos. As CSS são mais rápidas de processar pelos browsers e, muitas vezes, alcançam os resultados visuais e funcionais pretendidos com uma estrutura DOM mais simplificada. Esta abordagem arruma o DOM e reduz o tempo de carregamento da página.
• HTML semântico:Sempre que possível, use elementos semânticos HTML5, como
  ,

  ,

  ,
• Optimize o HTML gerado por JavaScript:Se o seu sítio utiliza JavaScript para gerar HTML dinamicamente, certifique-se de que o processo é eficiente. Evite o aninhamento desnecessário de elementos e examine a estrutura do HTML gerado para ver se há oportunidades de simplificação.
• Reveja e refactorize o seu código:Audite regularmente o código do seu site para detetar elementos desnecessários e práticas desactualizadas. Ferramentas como o DevTools do Chrome podem ajudar a identificar partes do DOM demasiado grandes ou complexas. Refactorizar o seu código pode significar combinar elementos, simplificar selectores CSS ou refactorizar determinadas partes da página.
• Utilize CSS Grid e Flexbox:As técnicas modernas de disposição CSS, como Grid e Flexbox, reduzem significativamente a necessidade de divs extras e estruturas aninhadas. Proporcionam uma forma mais eficiente de criar esquemas complexos utilizando menos HTML.
• Limite a utilização de scripts de terceiros:Os scripts de terceiros podem adicionar elementos extra ao DOM. Limite a sua utilização e escolha alternativas leves sempre que possível.

Utilizar uma rede de distribuição de conteúdos (CDN)

Uma rede de distribuição de conteúdos, ou CDN, é como um serviço de correio, mas este distribui conteúdos Web. Fá-lo colocando uma série de servidores (pense neles como estações de correio) em todo o mundo para garantir que o acesso às páginas Web é extremamente rápido, independentemente do local onde se encontra.

Imagine que, sempre que navega num sítio Web, o serviço CDN lhe entrega rapidamente o conteúdo a partir da "estação de entrega" (também conhecida como servidor) mais próxima. A vantagem disto é que reduz a distância que os dados têm de percorrer e torna o carregamento da página muito mais rápido.

Esta entrega rápida não só faz com que as páginas web abram mais depressa, como também faz com que o seu sítio web tenha uma classificação mais elevada nos motores de busca. Como uma página Web de carregamento rápido é mais popular, os motores de busca gostam mais dela. Simplificando, utilizar uma CDN é como colocar um super impulsionador no seu sítio Web e fazê-lo voar à frente dos utilizadores.

Inclui uma CDN fiável compatível com o WordPress:

• Cloudflare:: O Cloudflare é amplamente reconhecido pelas suas extensas funcionalidades web e de segurança. Oferece um plano gratuito muito poderoso e é conhecido pela sua fácil integração com o WordPress, o que o torna uma escolha popular para os proprietários de sítios Web WordPress.
• Akamai:: A Akamai é um dos serviços CDN mais antigos e abrangentes, conhecido pela sua vasta rede de servidores e funcionalidades de segurança avançadas, embora seja provavelmente mais adequado para grandes sítios de nível empresarial.
• MaxCDN (atualmente StackPath):: O StackPath oferece serviços CDN de alta velocidade e é especialmente conhecido pela sua interface fácil de utilizar e pela integração eficaz com plug-ins de cache do WordPress, o que o torna uma escolha popular para sítios Web de pequena e média dimensão.
• KeyCDN:: O KeyCDN é um fornecedor de CDN económico e eficiente que é fácil de configurar utilizando o WordPress e oferece preços de pagamento conforme o uso, o que é apelativo para sítios Web com tráfego variável.
• Amazon CloudFrontCloudFront, parte do Amazon Web Services (AWS), é um poderoso serviço CDN que se integra bem com outros serviços AWS. É uma boa escolha para sítios que requerem um elevado grau de personalização e que já fazem parte do ecossistema AWS.
• Rapidamente::Com uma CDN em tempo real com capacidades de computação de ponta, a Fastly não só fornece conteúdos, como também executa código personalizado muito próximo do utilizador, fornecendo funcionalidades únicas de personalização e otimização.
• Sucuri:: Conhecida principalmente pelas suas soluções de segurança, a Sucuri também oferece um serviço CDN que integra segurança e desempenho, tornando-a uma óptima escolha para sites WordPress preocupados com velocidade e segurança.

Evite redireccionamentos de várias páginas

Os redireccionamentos são como trampolins para as páginas Web e, por vezes, ajudam a guiar-nos a nós ou aos motores de busca para o URL correto. Mas este processo torna mais lenta a abertura das páginas Web. Imagine o browser a ter de fazer uma ronda extra de "pedir direcções - ser informado da nova direção - ir novamente" sempre que se depara com um local para onde precisa de saltar.

É como pedir direcções e ser informado de que o seu destino mudou e que tem de ir por outro caminho. Cada vez que pede direcções, demora mais tempo a chegar lá e o browser é mais lento a apresentar o conteúdo.

Se uma página Web tiver demasiados destes pontos de salto (também conhecidos como redireccionamentos), torna a viagem dos dados mais longa, levando a um aumento do tempo de carregamento da página Web, o que pode tornar o utilizador impaciente. Assim, os redireccionamentos só devem ser utilizados quando são realmente necessários para evitar atrasos desnecessários, de modo a que todos possam ficar mais satisfeitos e tranquilos quando visitam as páginas Web.

Pode tomar as seguintes medidas para garantir que gere os redireccionamentos de forma eficaz e optimiza o desempenho e a SEO do seu sítio Web:

• Audite os redireccionamentos do seu sítio: utilizePageSpeed Insights do Google,GTmetrixtalvezWebPageTeste outras ferramentas para analisar o seu sítio Web e apresentar relatórios sobre o número e o impacto dos redireccionamentos. Podem ajudá-lo a identificar redireccionamentos indesejados.
• Verifique a configuração do servidor:Verifique o ficheiro de configuração do servidor (por exemplo, no servidor Apache) para o parâmetro.htaccess) para regras de redireccionamento. Por vezes, os redireccionamentos são definidos e esquecidos, pelo que é importante verificar estas configurações regularmente.
• Simplifique a estrutura do URL:O objetivo é uma estrutura de URL simples. Isto reduz a necessidade de redireccionamentos, especialmente se o padrão do URL mudar ao longo do tempo.
• Verifique as ligações internas:Certifique-se de que todas as ligações internas apontam diretamente para o URL de destino final, em vez de redireccionarem para um URL intermédio.
• Actualize as ligações externas:Se tiver controlo sobre os links externos (por exemplo, backlinks de outros sites), tente garantir que apontam diretamente para o URL atual para evitar redireccionamentos desnecessários.
• Cadeia de redireccionamento:Evite cadeias em que um redireccionamento leva a outro. Se for necessário um redireccionamento, certifique-se de que vai diretamente para o URL de destino final.
• Utilize redireccionamentos 301 para efetuar alterações permanentes:Utilize redireccionamentos 301 quando forem necessários (por exemplo, ao mover páginas permanentemente). São mais eficazes do que os redireccionamentos temporários (como o 302) e são melhores para SEO.

Há uma série de plug-ins e ferramentas que podem ajudar a resolver este problema:

• redireccionamentosé um plugin popular que ajuda a gerir e acompanhar os redireccionamentos 301, facilitando a gestão dos redireccionamentos no WordPress.
• Aranha SEO da Screaming Frogé uma ferramenta poderosa que rastreia o seu sítio Web, identifica redireccionamentos e cadeias de redireccionamentos e ajuda-o a compreender e otimizar a estrutura de redireccionamento do seu sítio Web.

A monitorização regular e o aperfeiçoamento destes elementos manterão o seu site WordPress a funcionar sem problemas e de forma eficiente, proporcionando aos visitantes uma excelente experiência e mantendo uma forte presença online.

Ferramentas para medir as pontuações FCP

Verificar regularmente a velocidade de carregamento das suas páginas (um processo chamado monitorização do FCP) é como fazer um exame de saúde ao seu sítio Web, ajudando-o a descobrir o que está a tornar as coisas mais lentas e a encontrar formas de as tornar mais rápidas. Desta forma, garante que todos os que visitam o seu sítio desfrutam de uma experiência de navegação suave e rápida.

Negligenciar a monitorização desta velocidade de carregamento pode perturbar os visitantes e fazer com que deixem de visitar o seu sítio. No ambiente competitivo que é a Internet, fazer com que o seu sítio web carregue rapidamente não é apenas algo que fará os utilizadores felizes, mas também ajudará o seu sítio web a destacar-se.

Utilização:

1. Visite o sítio Web do PageSpeed Insights.
2. Introduza o seu endereço Web.
3. clicar (utilizando um rato ou outro dispositivo apontador)analisadoDeixe que a ferramenta avalie a sua página.

O PageSpeed Insights fornece relatórios detalhados, incluindo pontuações FCP. Classifica o desempenho em diferentes intervalos, sendo que as pontuações superiores a 90 são consideradas boas. A ferramenta também sugere possíveis melhorias para melhorar a velocidade de carregamento e o desempenho geral do sítio.

Farol

Farolé outra ferramenta gratuita da Google que se integra no Chrome e fornece informações sobre o FCP como parte da sua pontuação de desempenho. 

Pode obter mais informações sobre este assunto em Chrome DevTools'FarolO Lighthouse fornece dados de laboratório (em condições controladas) e dados de campo (reflectindo a experiência real do utilizador) para proporcionar uma visão abrangente do desempenho do FCP de um sítio.

WebPageTest

WebPageTesté uma ferramenta versátil para medições do FCP que fornece informações detalhadas sobre o desempenho. Permite-lhe testar a partir de diferentes locais e navegadores para obter uma visão mais detalhada do desempenho do seu Web site em várias condições.

GTmetrix

GTmetrixCombina o poder do Google Lighthouse e de outras ferramentas para fornecer relatórios detalhados sobre o desempenho do sítio Web, incluindo o FCP. A sua interface de fácil utilização e análises abrangentes fazem dele uma escolha popular para proprietários e programadores de sítios Web.

Ao utilizar estas ferramentas, é possível manter-se a par do desempenho do seu sítio Web e tomar decisões informadas para melhorar e manter uma experiência de utilizador de alta qualidade.

resumos

É importante que o conteúdo do seu sítio Web chegue rapidamente aos visitantes (um processo chamado "mapeamento de conteúdo de primeira passagem"). Não só contribui para uma melhor experiência do utilizador, como também pode ajudar a melhorar a classificação do seu sítio Web nos motores de busca. Por isso, vale mesmo a pena dedicar algum tempo à otimização nesta área.

No entanto, efetuar essa otimização pode ser um pouco desafiante e requer que seja suficientemente paciente para depurar e otimizar passo a passo. É como resolver um puzzle complexo e, embora o processo possa ser um pouco entediante, acabará por tornar o seu Web site mais rápido e proporcionar aos seus utilizadores uma melhor experiência de navegação.