Estudos mostram que mais de 50% dos usuários abandonarão uma página da web se ela demorar mais de 3 segundos para carregar. Com o rápido aumento no uso da Internet móvel em todo o mundo, a velocidade das páginas da web tornou-se de suma importância.
Nem sempre é fácil, porém, entender quais métricas usar para avaliar o desempenho do seu site. Enquanto alguns confiam no Time to First Byte (TTFB), outros acreditam que as métricas centradas no usuário merecem mais atenção.
O First Contentful Paint (FCP) e o Largest Contentful Paint (LCP) são centrados na experiência do usuário e foram introduzidos como uma forma de medir a velocidade de carregamento percebida. FCP e LCP representam cerca de 10% da pontuação geral de desempenho do seu site calculada pelo Google.
Neste guia abrangente sobre FCP e LCP como os novos indicadores-chave de desempenho do site, Hostinger está se aprofundando na otimização do First Contentful Paint no WordPress. Você aprenderá o que são FCP e LCP e como usar as métricas centradas no usuário para eliminar quaisquer atrasos no envio de conteúdo aos visitantes do seu site.
Apresentando o First Contentful Paint (FCP) e o Largest Contentful Paint (LCP)
O Google tem aprimorado seus algoritmos de classificação nos últimos anos, gradualmente adotando a experiência do usuário como o principal fator na medição da pontuação de desempenho de um site. Isso resultou na introdução do Core Web Vitals como forma de avaliar a velocidade geral de carregamento percebida de uma página da web.
Principais sinais vitais da Web do Google
Core Web Vitals são um conjunto de métricas centradas no usuário que avaliam a velocidade e a capacidade de resposta de um site. Core Web Vitals incluem três métricas: Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS).
Para passar na avaliação Core Web Vitals, seu site WordPress precisa obter uma pontuação “boa” em todos os três com base nos dados de campo coletados de usuários reais por meio do Relatório de experiência do usuário do Chrome. Melhorar as métricas ajudará você a criar uma melhor experiência do usuário e obter uma classificação mais elevada, o que atrairá mais visitantes ao seu site WordPress e aumentará as taxas de conversão.
Embora o First Contentful Paint não esteja entre o trio Core Web Vitals, é de fundamental importância que o seu site WordPress tenha um bom desempenho na web. Você pode estar se perguntando: o que é o First Contentful Paint no WordPress e por que ele é tão importante? Continue lendo para saber mais sobre como isso pode ajudá-lo a melhorar sua experiência do usuário.
O que é a primeira pintura com conteúdo (FCP)?
First Contentful Paint é uma métrica de desempenho centrada no usuário que mede o tempo que leva para renderizar a primeira parte do conteúdo do DOM para o visitante do site após ele abrir uma determinada página da web para carregamento.
O carimbo de data/hora FCP marca o momento em que o navegador renderiza qualquer texto, imagem (incluindo a imagem de fundo ou um logotipo) ou um elemento de tela que não seja de gravação.
Em outras palavras, First ContentFul Paint é o tempo que um visitante do site leva para ver qualquer conteúdo da página carregada. Um ótimo FCP garante ao visitante que a página solicitada será apresentada no navegador logo após o primeiro elemento de conteúdo.
O que é um bom First Contentful Paint para WordPress?
Uma boa primeira pintura com conteúdo é considerada algo entre 0 segundos e 1,8 segundos, segundo o Google. O Google classifica o FCP em três categorias: bom, precisa de melhorias e ruim:
- Bom: entre 0 e 1,8 segundos
- Precisa de melhorias: entre 1,8 e 3 segundos
- Cocôr: mais de 3 segundos
Como você pode ver, uma pontuação superior a 2 segundos exigirá que você melhore o First Contentful Paint para que o seu site WordPress tenha uma classificação mais elevada e atraia mais visitantes.
Soluções WordPress completas
Potencialize seu site com a hospedagem WordPress mais otimizada do setor
O que é pintura de maior conteúdo (LCP)?
Largest Contentful Paint é um dos três Core Web Vitals que mede o tempo que leva para o maior elemento de conteúdo de uma página da web se tornar visível. A maior parte do conteúdo é diferente para cada site, geralmente representando uma imagem, bloco de texto ou vídeo.
Como o maior elemento de conteúdo é o mais relevante para a velocidade de carregamento percebida e a experiência do usuário, um LCP rápido ajuda a mostrar ao visitante do site que a página carregada é relevante e útil para ele. Se houver algum elemento bloqueando a maior parte do conteúdo, é provável que uma página da web seja completamente abandonada.
O que é uma boa pintura de maior conteúdo para WordPress?
Uma boa pintura com maior conteúdo é menor ou igual a 2,5 segundos, o que significa que deve levar até 1 segundo para carregar o maior elemento de conteúdo após a renderização do primeiro. Aqui estão os limites de tempo LCP definidos pelo Google:
- Bom: menor ou igual a 2,5 segundos
- Precisa de melhorias: entre 2,5 e 4 segundos
- Pobre: mais de 4 segundos
Como medir FCP e LCP
Você pode usar uma ampla variedade de ferramentas baseadas em dados de campo e de laboratório para medir FCP e LCP em seu site WordPress. Os dados de laboratório mostrarão resultados de testes automatizados, enquanto os dados de campo ajudarão você a aprender mais sobre como os usuários reais interagem com o seu site, destacando as diferenças nos dispositivos e no comportamento do usuário.
Aqui estão as cinco principais ferramentas para medir a pintura com maior conteúdo e a primeira pintura com conteúdo no WordPress:
- Farol. Lighthouse é uma ferramenta popular de código aberto que oferece auditorias de desempenho, acessibilidade, SEO e muito mais.
- Informações do PageSpeed. O Google PageSpeed Insights é uma ferramenta altamente confiável que mede o desempenho do site e a experiência do usuário.
- Ferramentas de desenvolvimento do Chrome. DevTools é um conjunto de ferramentas para desenvolvedores web integradas ao navegador Google Chrome que o ajudará a analisar FCP e LCP em seu site.
- Teste de página da Web. WebPageTest é uma ferramenta popular para medir métricas críticas de desempenho.
- GTmetrix. GTmetrix é outra ferramenta de código aberto que o ajudará a avaliar o desempenho do seu site usando uma série de métricas.
Se você quiser usar dados de campo, Relatório de experiência do usuário do Chrome e Console de pesquisa pode fornecer análises mais orientadas ao usuário.
9 maneiras de otimizar a primeira pintura com conteúdo e a pintura com maior conteúdo no WordPress
Otimizar o First Contentful Paint e o Largest Contentful Paint ajudará você a acelerar o processo de entrega de conteúdo e eliminar quaisquer fatores que afetem negativamente a experiência do usuário. Abaixo, você aprenderá como melhorar o First Contentful Paint e o Largest Contentful Paint para o seu site WordPress em nove etapas.
1. Melhore seu tempo até o primeiro byte (TTFB)
O tempo até o primeiro byte representa quanto leva para o servidor responder à solicitação HTTP enviada pelo navegador do usuário. Esta é a primeira etapa no processo de entrega de conteúdo que marca o momento em que o servidor web começa a enviar o conteúdo solicitado.
TTFB é uma referência de uma pilha de aplicativos bem configurada usada na infraestrutura de servidores. Isso torna a escolha de uma hospedagem de qualidade de extrema importância.
Certifique-se de que seu servidor web esteja configurado corretamente para acomodar a quantidade de tráfego que seu site WordPress recebe diariamente. Esteja atento à memória do servidor ao decidir quantos processos seu servidor web pode criar e quantas solicitações cada um pode manipular.
Se você estiver em um plano de hospedagem WordPress gerenciado da Hostinger, pré-configuramos a infraestrutura do servidor para você, para que você não precise se preocupar com atrasos na renderização de conteúdo ou solicitações HTTP na fila.
2. Use cache em nível de servidor
Não é segredo que sites estáticos têm melhor desempenho devido a um número significativamente menor de manipulações que precisam ser feitas nos bastidores para renderizar qualquer conteúdo. Embora você possa usar o WordPress como um CMS headless, a maioria dos sites WordPress permanece dinâmica.
WordPress é usado para construir sites dinâmicos baseados em banco de dados. Isso significa que a grande maioria do conteúdo é armazenada no banco de dados WordPress e precisa ser recuperada e mesclada com arquivos de modelo para formar uma página web. Isso está no cerne da renderização de conteúdo.
O cache ajuda a reduzir o tempo de carregamento do seu site, armazenando cópias estáticas do conteúdo solicitado recentemente. Podem ser resultados de consultas ao banco de dados WordPress ou até mesmo páginas inteiras da web.
A menos que a página da web solicitada contenha informações personalizadas que precisam ser adaptadas para cada visitante, o uso do cache no nível do servidor pode ajudar a melhorar o First Contentful Paint e o Large Contentful Paint no WordPress. Certifique-se de usar uma ótima solução de cache de páginas e objetos para WordPress.
Os planos de hospedagem WordPress totalmente gerenciados da Hostinger incluem Object Cache Pro, um plugin premium de cache de objetos WordPress e solução de cache de página inteira baseada no Cache Enabler do KeyCDN. Soluções de cache avançadas e habilmente ajustadas ajudam os clientes Hostinger a obter desempenho de site incomparável e excelente pintura com maior conteúdo e primeira pintura com conteúdo no WordPress.
3. Elimine recursos de bloqueio de renderização
Os recursos de bloqueio de renderização podem ser definidos como quaisquer elementos de conteúdo que estendam o tempo de carregamento da página da web, impactando negativamente o desempenho geral do site e a experiência do usuário.
Durante o processo de renderização do conteúdo, o WordPress analisa o endereço que você abre no navegador para formar um conjunto de parâmetros de consulta, que serão então usados para consultar o banco de dados. A página da web solicitada será entregue como resultado de vários elementos, como HTML, CSS e JavaScript, reunidos.
O navegador precisará baixar todos os recursos referenciados antes de renderizar uma página da web, o que pode levar muito tempo e fazer com que o visitante abandone o seu site. Reduzir o número de recursos de bloqueio de renderização encurta o caminho crítico de renderização e ajuda a melhorar o First Contentful Paint no WordPress.
Remova os recursos JavaScript e CSS que não são mais usados. Você pode manter o código não crítico em uma URL de bloqueio de renderização e marcar a URL com atributos async ou defer.
4. CSS crítico embutido
Você pode descobrir que seu site WordPress está configurado para carregar CSS de forma assíncrona, o que resulta na exibição de conteúdo sem estilo no navegador. Esse comportamento também é conhecido como Flash of Unstyled Content (FOUC). O FOUC pode levar a um desempenho e experiência do usuário ruins, tornando-o algo que os proprietários de sites WordPress precisam evitar.
Ao mesmo tempo, os navegadores atrasarão a renderização do conteúdo até que ele carregue, analise e execute todas as folhas de estilo CSS referenciadas no
de uma página da web. Identificar o CSS crítico – conjunto mínimo de arquivos CSS necessários para fornecer ao usuário o conteúdo da primeira tela – e inlinhá-lo é a chave para obter ótimos FCP e LCP.Além de eliminar recursos de bloqueio de renderização, incorporar CSS crítico no
de suas páginas da web o ajudará a melhorar drasticamente o First Contentful Paint no WordPress. O navegador agora renderizará imediatamente a parte crítica da página da web sem ter que esperar que as folhas de estilo CSS sejam carregadas de forma assíncrona.5. Adiar JavaScript
Os arquivos JavaScript são um dos recursos de bloqueio de renderização mais comuns. Assim como no caso do CSS crítico, você pode melhorar o First Contentful Paint e o Largest Contentful Paint alterando as prioridades do JavaScript carregado.
Ao encontrar a tag ao carregar o HTML, o navegador precisa executar o script referenciado antes de continuar construindo o DOM. Adiando o Javascript usando o atributo defer, o navegador agora carregará os arquivos após construir a árvore DOM, eliminando assim qualquer coisa que bloqueie o processo de renderização de conteúdo.
6. Use um CDN
Uma rede de distribuição de conteúdo (CDN) é crítica para alcançar alto desempenho e melhorar o First ContentFul Paint e o Large Contentful Paint no WordPress. O CDN pode acelerar significativamente o seu site, aproximando o conteúdo dos visitantes do site e eliminando a latência.
Uma CDN é uma grande rede de servidores distribuídos geograficamente que oferece um conjunto de recursos de servidor adicionais para armazenar em cache e renderizar conteúdo estático sem a necessidade de enviar solicitações da Web ao servidor de origem. Usar o WordPress com uma rede de distribuição de conteúdo pode fazer uma diferença dramática quando se trata de FCP e LCP, independentemente do conteúdo que você está hospedando.
Ao escolher um provedor de hospedagem CDN, preste muita atenção ao tamanho da rede e ao desempenho e às otimizações de segurança incluídas, como compactação e suporte para HTTP/2. O Hostinger Edge CDN desenvolvido pela Cloudflare oferece mais de 280 pontos de presença em todo o mundo, com compactação HTTP/2 e Brotli para fornecer velocidade de carregamento de páginas da web consideravelmente mais rápida.
7. Evite redirecionamentos 301
Os redirecionamentos podem ser definidos como as etapas que o navegador precisa realizar para entregar o conteúdo solicitado. Seguindo o caminho de redirecionamento, será necessário fazer uma série de solicitações web subsequentes para chegar ao destino final e receber a página web.
Ter vários redirecionamentos 301 permanentes configurados pode ter um impacto negativo significativo no desempenho do seu site, resultando em maior tempo até o primeiro byte. Como o TTFB é fundamental na otimização do Largest Contentful Paint e do First Contentful Paint para WordPress, mantenha os redirecionamentos ao mínimo.
Revise o caminho de redirecionamento do seu site WordPress para entender como melhorar o First Contentful Paint e remover quaisquer atrasos desnecessários no fornecimento de conteúdo aos visitantes do seu site.
8. Servir imagens em WebP
Embora um CDN possa ajudar a acelerar a entrega de imagens, a otimização de imagens é outra etapa crítica para melhorar o desempenho do seu site e obter ótimos FCP e LCP.
Como uma imagem costuma ser o maior elemento de conteúdo de uma página, a rapidez com que ela pode ser entregue é fundamental. Embora o carregamento lento possa ser eficaz para aumentar o desempenho do seu site, evite usá-lo para imagens críticas.
Os dois aspectos mais importantes da otimização de imagem são a escolha do formato e tamanho corretos da imagem. Comprima suas imagens para reduzir seu tamanho sem perda significativa de qualidade. Usar o formato de imagem correto pode ajudá-lo a obter resultados ainda melhores.
Várias ferramentas (geralmente oferecidas por redes de distribuição de conteúdo) podem ajudá-lo a adaptar suas imagens às características do dispositivo do visitante. Isso pode melhorar muito a experiência de navegação do usuário, ao mesmo tempo que reduz a carga no servidor de origem.
WebP é o formato de imagem recomendado pelo Google. A conversão de imagens para este formato pode resultar em um aumento notável de desempenho, melhorando tanto o Largest Contentful Paint quanto o First Contentful Paint no WordPress.
WordPress está até considerando incluir conversão automática de JPEG para WebP nos principais recursos da plataforma. Embora tenha sido retirado do WordPress 6.1, ainda poderemos vê-lo na próxima grande versão do WordPress.
9. Exclua todos os plug-ins não utilizados
Os plug-ins ampliam os recursos nativos do WordPress, trazendo novas funcionalidades ao seu site WordPress. Com centenas de milhares de plug-ins disponíveis, cada proprietário de site WordPress tem pelo menos alguns complementos ativados o tempo todo.
Os complementos de software aumentam a quantidade de código executado. Plug-ins WordPress volumosos e mal codificados levam à degradação do desempenho e incluirão FCP e LCP em seu site.
Adote uma abordagem cuidadosa ao gerenciamento de plug-ins. Revise a lista de plug-ins ativos e exclua aqueles que não são utilizados ou que foram instalados de fontes não verificadas. Isso não apenas ajudará a obter melhor velocidade da página da web, mas também ajudará a reduzir significativamente a superfície de ataque.
Hostinger reúne o melhor software premium para WordPress para ajudar você a economizar tempo e dinheiro ao encontrar os melhores plug-ins de WordPress para usar. O Hostinger Installer Plugin permite que você aproveite soluções líderes do setor para melhor desempenho e segurança, SEO aprimorado e funcionalidade avançada de comércio eletrônico, gratuitamente.
FCP e LCP são importantes para os principais sinais vitais da web
First Contentful Paint e Largest Contentful Paint são as métricas centradas no usuário mais importantes para medir o desempenho do seu site WordPress e a experiência geral do usuário.
Marcando o carimbo de data e hora onde o usuário vê o primeiro elemento de conteúdo e o maior elemento de conteúdo de uma página web, FCP e LCP indicam se o visitante permanecerá ou abandonará o site.
Sendo o LCP uma das três métricas que formam o Google Core Web Vitals, First Contentful Paint e Largest Contentful Paint representam cerca de 10% da pontuação total de desempenho do seu site WordPress. Seguir as nove etapas descritas neste artigo o ajudará a reduzir significativamente os atrasos na renderização do conteúdo e a obter uma melhor classificação no Google.
A Hostinger oferece hospedagem gerenciada otimizada para WordPress para ajudar a quebrar limites e aproximar o conteúdo dos visitantes do seu site. Uma infraestrutura totalmente escalável com uma pilha de aplicativos de nível empresarial, um CDN integrado ultrarrápido desenvolvido pela Cloudflare e opções avançadas de cache ajudarão você a construir uma presença on-line forte e a se destacar da concorrência.
Confira os planos de hospedagem WordPress gerenciados pela Hostinger para começar hoje mesmo.
