O WordPress é o sistema de gerenciamento de conteúdo (CMS) mais popular do planeta, graças à sua facilidade de uso e flexibilidade. As diversas opções de personalização do WordPress permitem que os editores criem sites que se conectem profundamente com seu público.
Apesar dos poderosos recursos do CMS, ainda é possível criar sites com ótima aparência, mas que têm dificuldades para aumentar o número de visitantes. Embora uma auditoria de conteúdo seja certamente recomendável, os editores devem primeiro considerar uma auditoria técnica para garantir que não haja nada nos bastidores do site que esteja limitando seu alcance.
Entre as principais métricas de desempenho que devem ser medidas estão as Core Web Vitals (CWVs) do Google.
Essas métricas, que o Google converteu em sinais de classificação logo após sua introdução em 2020 , desempenham um papel fundamental na avaliação da experiência do usuário (UX) de uma página da web.
Os CWVs abrangem três métricas distintas, porém interligadas:
- Maior Conteúdo de Pintura (LCP)
- Primeiro atraso de entrada (FID)
- Mudança cumulativa de layout (CLS)
Esses sinais medem, respectivamente, a velocidade de carregamento percebida, a interatividade e a estabilidade visual de uma página da web.
Vamos analisar mais de perto esses CWVs para entender por que eles são tão importantes, como medi-los com precisão e, em seguida, avaliar as medidas práticas que podemos tomar para melhorar seus resultados.
O que são as métricas Core Web Vitals?
Os três Core Web Vitals (CWVs) do Google avaliam a qualidade da experiência do usuário (UX) de um site, fornecendo informações sobre o desempenho das páginas da web em termos de velocidade de carregamento, interatividade e estabilidade visual.
- Largest Contentful Paint (LCP): Essa métrica mede a velocidade de carregamento do site e se refere especificamente ao momento do processo de carregamento em que o conteúdo principal provavelmente já foi carregado.
Considere, por exemplo, uma postagem de blog sobre um novo gadget tecnológico. Se a imagem principal — talvez uma foto do gadget — e o texto introdutório carregarem rapidamente (dentro de 2,5 segundos, que é o limite recomendado pelo Google para o LCP), os visitantes têm maior probabilidade de permanecer, ler e interagir com o conteúdo. Por
outro lado, tempos de carregamento lentos podem levar os visitantes a abandonar a página, o que pode resultar em queda no tráfego.
- First Input Delay (FID): Esta métrica representa um instantâneo da capacidade de resposta de uma página web na primeira interação do usuário, como um clique em um link ou o pressionamento de um botão, medindo o tempo entre essa ação e o momento em que o navegador pode começar a processar os manipuladores de eventos em resposta.
Considere um botão "Inscreva-se agora". Se um visitante clicar nesse botão e houver um atraso antes da resposta do site (qualquer valor acima de 100 milissegundos é considerado um resultado ruim), o visitante pode pensar que o site não está respondendo, o que leva a uma experiência ruim do usuário e, potencialmente, à perda da inscrição.
O Google está se preparando para introduzir uma nova métrica chamada Interaction to Next Paint (INP) em março de 2024, que substituirá o FID como um indicador de desempenho da página web (CWV).
- Mudança Cumulativa de Layout (CLS): Esta métrica quantifica a estabilidade visual, ou seja, a quantidade de mudanças inesperadas no layout do conteúdo visível em uma página da web.
Se um site de notícias apresenta textos, imagens ou anúncios que se deslocam repentinamente durante o carregamento completo da página, os visitantes podem perder o ponto onde estavam ou clicar acidentalmente em um link ou botão indesejado. Essa é uma experiência frustrante e pode desencorajá-los a retornar ao site.
Fonte: Web.dev - Interação para a Próxima Renderização (INP): Esta métrica avalia a capacidade de resposta geral de uma página às interações do usuário. Ela monitora a latência de todas as interações do mouse e do teclado durante a visita do usuário a uma página da web, sendo a interação mais longa observada (ignorando valores discrepantes) o valor final do INP.
Alcançar uma pontuação de INP ideal pode ser um desafio devido à grande variabilidade na capacidade dos dispositivos. No entanto, ainda será razoável para os editores buscarem uma pontuação de INP no 75º percentil dos carregamentos de página, segmentados entre dispositivos móveis e desktops.
Um site com um INP igual ou inferior a 200 milissegundos é considerado como tendo boa capacidade de resposta. Se o INP estiver entre 200 milissegundos e 500 milissegundos, a capacidade de resposta do site precisa ser aprimorada. Por fim, se o INP for superior a 500 milissegundos, sua capacidade de resposta é considerada ruim.
Fonte: Web.dev
Por que a pontuação Core Web Vitals é importante?
Os usuários exigem velocidades de carregamento rápidas, interatividade fluida e um ambiente visualmente estável, e uma avaliação das Core Web Vitals é fundamental para ajudar os editores a entender como seus sites estão atendendo a essas expectativas.
O Google descobriu que a probabilidade de rejeição aumentou 32% quando o tempo de carregamento da página subiu de 1 segundo para 3 segundos. Enquanto isso, os sites de notícias que passaram no teste CWV apresentaram uma taxa de abandono 22% menor do que aqueles que falharam.
1. Influenciar os resultados da pesquisa
Os CWVs servem como um parâmetro para o Google medir o desempenho de um site. Eles fornecem ao Google informações sobre a qualidade do atendimento que um site oferece aos usuários, o que impacta diretamente o posicionamento desse site nos resultados de busca.
Em termos simples, uma melhor pontuação CWV pode ajudar um site WordPress a aparecer em posições mais altas nos resultados de busca do Google.
2. Aumentar o tráfego
Sites com CWVs otimizados podem observar um aumento no tráfego. Por exemplo, o popular site de orientação profissional LearnHowToBecome.org reduziu seu tempo médio de carregamento de 7 para 2,9 segundos e viu seu tráfego mensal aumentar de 500.000 para 750.000 visitas.
3. Aumentar a receita
Um usuário tem menos probabilidade de ler um artigo se enfrentar um longo tempo de carregamento (LCP), uma resposta lenta à sua interação (FID) ou um layout instável (CLS). Sites que se destacam nessas três métricas não apenas prendem a atenção do usuário, como também o conduzem pelo funil de conversão, gerando, em última análise, mais receita para a empresa.
Em essência, as métricas de CWV são mais do que apenas números. Elas fornecem insights sobre o desempenho de um site sob a perspectiva do usuário, permitindo que a marca aprimore as áreas que mais importam para seus visitantes.
Como verificar as pontuações das principais métricas da Web de um site WordPress
Entender como verificar as pontuações CWV é o primeiro passo para melhorar o desempenho de um site. Existem duas maneiras de medir essas pontuações: internamente, usando as ferramentas oficiais do Google, ou com a ajuda de um especialista em WordPress com experiência em otimização de métricas de desempenho.
Para aqueles que optaram pela abordagem interna, é importante entender que a medição de CWVs requer o uso de uma combinação de dados de campo e dados de laboratório.
Os dados de campo são dados reais da experiência do usuário, coletados em ambientes reais. Esse tipo de dado proporciona uma melhor compreensão de como os usuários interagem com um site em diversos dispositivos, conexões e outras condições reais.
Por exemplo, se os usuários acessam um site WordPress principalmente em dispositivos móveis com redes 3G, os dados de campo podem revelar problemas de desempenho que podem não aparecer em um ambiente de laboratório controlado.
Por outro lado, os dados de laboratório são gerados em um ambiente controlado e usados para depurar problemas de desempenho. Eles não capturam todo o espectro das experiências reais dos usuários, mas fornecem resultados reproduzíveis para depurar e otimizar o desempenho de um site.
Utilizar uma ferramenta como o Lighthouse em um ambiente de desenvolvimento pode simular uma rede lenta para identificar gargalos de desempenho.
Todas as ferramentas populares para desenvolvedores do Google, do Google Search Console (GSC) ao Google Analytics (GA), podem medir as pontuações do CWV.
Fonte: Web.dev
Hoje, porém, vamos analisar a PageSpeed Insights , simplesmente porque ela é uma das ferramentas mais simples e abrangentes para começar.
Como descobrir e melhorar o FID e o TBT com o PageSpeed Insights
Até agora, falamos sobre o First Input Delay (FID) como uma forma de medir a capacidade de resposta de um site, mas nesta próxima seção, analisaremos tanto o FID quanto o Total Blocking Time (TBT).
Ambas são medidas de interação do usuário, e medir e otimizar ambas pode ter resultados positivos para a experiência do usuário (UX) de um site.
1. O que é TBT e como difere do FID?
TBT indica o período de tempo durante o qual um site está muito ocupado para reagir às interações do usuário, como cliques em botões. O TBT mede a duração total em que uma página da web está "bloqueada" — o que equivale a a página dizer: "Aguarde, estou ocupado" enquanto processa outras tarefas.
TBT é uma métrica de laboratório usada para avaliação de desempenho durante a fase de desenvolvimento, enquanto FID é uma métrica de campo que fornece informações sobre as experiências reais do usuário.
Em um cenário onde um usuário clica em um botão em uma página da web, o FID mede o atraso que ocorre entre a ação desse usuário e a resposta do site.
Essas duas métricas estão interligadas — se uma editora conseguir otimizar o TBT durante os testes, provavelmente observará um impacto positivo nas pontuações FID em situações reais.
2. Como medir FID e TBT com o PageSpeed Insights
Para medir essas métricas com o PageSpeed Insights, siga estes passos:
- Acesse a ferramenta PageSpeed Insights
- Analise a página web desejada
- Deslize a página para encontrar as pontuações FID e TBT do site
3. Como melhorar o FID e o TBT de um site WordPress
Melhorar o FID e o TBT envolve otimizar a capacidade de resposta e a interatividade de um site. Aqui estão algumas dicas:
- Comprima e otimize o código CSS e JavaScript: isso ajuda a reduzir o tamanho dos arquivos e melhora a responsividade do site. Muitas ferramentas, como o WPRocket, oferecem uma aba de otimização de arquivos que permite comprimir o código, o que pode levar a uma melhoria significativa nas pontuações FID e TBT.
- Elimine tarefas longas: Tarefas longas são aquelas que bloqueiam a thread principal por 50 milissegundos ou mais. Dividir essas tarefas longas em tarefas menores e assíncronas pode liberar a thread principal e melhorar tanto o FID quanto o TBT.
- Otimização da execução de JavaScript: A análise sintática, a compilação e a execução de JavaScript podem contribuir significativamente para altos valores de FID e TBT. Adiar a execução de JavaScript não utilizado, carregar arquivos grandes necessários de forma assíncrona, minimizar polyfills não utilizados e garantir que o JavaScript seja executado de forma eficiente podem reduzir o FID e o TBT.
- Aproveite as configurações de desempenho do tema WordPress: Muitos temas do WordPress vêm com configurações de desempenho integradas. Tire o máximo proveito dessas configurações para otimizar o site.
- Pré-carregamento e pós-carregamento de recursos: Técnicas como carregamento lento de imagens, adiamento de CSS não crítico, pré-carregamento de recursos críticos e pré-busca de recursos de terceiros podem aprimorar o desempenho do TBT e, consequentemente, melhorar também o FID.
Dica profissional: ao otimizar, concentre-se na experiência geral do usuário (UX) em vez de pontuações de métricas individuais. Essa abordagem holística pode gerar melhores resultados na melhoria do desempenho do site.
Melhorar as pontuações do FID é um processo complexo, pois envolve o código do site. Portanto, a primeira coisa que os editores devem fazer é limitar a execução de JavaScript pesado e eliminar arquivos JS desnecessários, permitindo que o navegador responda rapidamente às interações do usuário.
Ao abordar as principais questões que afetam a interatividade de um site WordPress, os editores podem melhorar efetivamente tanto o FID quanto o TBT, aprimorando a experiência do usuário e o desempenho geral.
Como descobrir e melhorar o LCP com o PageSpeed Insights
Pontuações baixas no LCP significam que um visitante precisa esperar mais tempo para que o conteúdo apareça, o que normalmente leva a taxas de rejeição mais altas.
1. O que são elementos LCP?
O LCP avalia o tempo que o conteúdo principal de uma página da web leva para carregar: quanto mais rápido esse conteúdo aparecer na tela, melhor será a experiência do usuário (UX).
Os principais elementos que contribuem para a pontuação LCP são predominantemente elementos de tamanho considerável, como elementos de imagem, elementos de vídeo ou elementos com imagens de fundo carregadas por meio de funções de URL.
Além disso, elementos de bloco — como títulos, subtítulos e tabelas, e elementos baseados em bloco, como texto — também desempenham um papel vital na configuração do LCP.
2. Como medir o LCP com o PageSpeed Insights
Para calcular a pontuação LCP, siga estes passos:
- Acesse o PageSpeed Insights.
- Analise a página web desejada
- Deslize a tela até a seção “Diagnosticar problemas de desempenho”
- Defina a opção “Mostrar auditorias relevantes para” como LCP
- Os usuários agora podem visualizar as Oportunidades e os Diagnósticos relevantes.
Os editores também podem identificar o elemento LCP no relatório do PageSpeed Insights localizando a recomendação do elemento Largest Contentful Paint na seção Diagnóstico e expandindo-a para obter mais detalhes.
3. Como melhorar o LCP de um site WordPress
A melhoria do LCP envolve várias etapas, cada uma contribuindo para uma experiência mais rápida e otimizada no site. Aqui estão algumas estratégias principais:
- Otimize o elemento LCP: Esta etapa depende da natureza do elemento LCP. Por exemplo, um elemento LCP que seja uma imagem pode ser comprimido (sem comprometer a qualidade). Outras soluções incluem pré-carregar imagens acima da dobra e imagens de espaço reservado, exibir imagens responsivas usando `srcset` dependendo do tamanho da tela do usuário e garantir que as imagens acima da dobra não sejam carregadas sob demanda (lazy loading).
- Melhorar o tempo de resposta do servidor: o LCP mede o tempo decorrido desde que um usuário acessa uma página até o momento em que seu navegador recebe uma resposta do servidor. Investir em um plano de hospedagem web de alta qualidade, implementar um mecanismo de cache adequado tanto no servidor quanto no navegador e migrar para uma plataforma CMS robusta, como o WordPress, pode ajudar a diminuir o tempo de resposta do servidor.
- Reduzir elementos que bloqueiam a renderização: Elementos que bloqueiam a renderização, como HTML, fontes e CSS, são arquivos estáticos que o navegador processa antes de carregar o conteúdo. Menos elementos que bloqueiam a renderização significam que os navegadores gastarão menos tempo renderizando esses elementos, acelerando os tempos de carregamento e melhorando as pontuações do LCP (Índice de Consumo de Carga). Por exemplo, os editores podem usar uma fonte simples para suas páginas da web ou pré-carregar fontes da web modulares.
- Remova plugins não utilizados: Sites WordPress podem usar plugins para gerenciar muitos de seus aspectos técnicos. No entanto, é importante manter apenas os plugins e seus recursos que contribuem diretamente para a funcionalidade do site, removendo os não utilizados. Isso pode deixar o site mais organizado e melhorar a pontuação LCP.
Dica profissional: O armazenamento em cache é um processo poderoso que pode melhorar significativamente a pontuação do LCP (Local Content Page). Implemente uma solução de cache que salve uma cópia estática das páginas da web nos dispositivos dos visitantes, eliminando a necessidade de baixar os mesmos dados sempre que eles acessam o site.
É importante entender que o LCP é, de longe, a métrica CWV mais difícil de melhorar. Isso ocorre porque o LCP depende do TTFB (Tempo até o Primeiro Byte), que por sua vez depende da velocidade de resposta do servidor. Dependendo da estrutura utilizada, pode ser um desafio reduzir o tempo de resposta do servidor.
Os editores precisam ter em mente que a margem de melhoria pode variar dependendo da infraestrutura com a qual estão trabalhando.
Ao focar na otimização dos principais elementos de conteúdo da página, na melhoria dos tempos de resposta do servidor, na redução dos tempos de bloqueio de JavaScript e CSS e no uso criterioso de plugins, os editores podem melhorar significativamente suas pontuações LCP.
Como descobrir e melhorar o CLS com o PageSpeed Insights
A Mudança Cumulativa de Layout (CLS, na sigla em inglês) está relacionada à estabilidade visual, avaliando quaisquer alterações inesperadas no conteúdo visual de uma página da web durante o carregamento. Páginas da web visualmente instáveis podem prejudicar a experiência do usuário, contribuindo para as taxas de rejeição.
1. O que são elementos CLS?
O CLS mede a estabilidade visual, portanto, os elementos que contribuem para ele são aqueles que podem mudar de posição inesperadamente durante o carregamento da página. Isso pode incluir imagens sem dimensões especificadas, anúncios, conteúdo incorporado e iframes sem dimensões fixas.
Essencialmente, qualquer elemento que possa se mover enquanto a página está carregando pode prejudicar a pontuação CLS.
2. Como medir o CLS com o PageSpeed Insights
Use o PageSpeed Insights para identificar e medir o CLS de uma página da web seguindo estes passos:
- Acesse o PageSpeed Insights.
- Analise a página web desejada
- Deslize a tela até a seção “Diagnosticar problemas de desempenho”
- Defina a opção “Mostrar auditorias relevantes para” como CLS
Essa abordagem nos permite identificar com precisão os elementos responsáveis pelas alterações de layout, fornecendo um ponto de partida para melhorias.
3. Como melhorar o CLS de um site WordPress
Melhorar o CLS (Classificação de Estilo de Site) de um site WordPress envolve etapas estratégicas que podem aprimorar significativamente a estabilidade visual de uma página:
- Edite o layout dos elementos: revise e ajuste o layout dos elementos para garantir que eles não se desloquem durante o carregamento da página. Esta etapa envolverá a definição de atributos específicos de largura e altura para imagens e vídeos, e a reserva estática de espaço para anúncios com carregamento lento ou iframes usando um espaço reservado.
- Use CSS crítico ou remova CSS não utilizado: CSS não utilizado pode contribuir para alterações no layout. Considere implementar CSS crítico, que contém apenas os estilos usados na parte visível da página, ou elimine códigos CSS redundantes para evitar alterações desnecessárias. Incorporar estilos menores e pré-carregar estilos importantes também ajudará a melhorar o CLS (Sistema de Layout de Página).
- Evite plugins de sliders: sliders podem causar alterações no layout devido à sua natureza dinâmica. Se possível, evite-os.
- Aplique o dimensionamento correto de imagens e divs: O dimensionamento preciso e o uso de imagens responsivas com a mesma proporção podem evitar que os elementos se desloquem durante o carregamento da página. Sempre especifique os tamanhos desses elementos na CDN (rede de distribuição de conteúdo) de imagens .
- Mover o CSS do editor de temas para o arquivo style.css do tema filho: Transferir o CSS para um tema filho pode ajudar a reduzir as alterações de layout, garantindo que os estilos sejam carregados corretamente.
- Use temas e plugins que utilizem animações de transformação: essas ferramentas têm menos impacto nas mudanças de layout em comparação com outros tipos de animações.
Ao fazer esses ajustes, os proprietários de sites WordPress podem reduzir consideravelmente a pontuação CLS de suas páginas, resultando em uma experiência do usuário mais estável e agradável.
Dica profissional: implemente o carregamento lento (lazy loading) para imagens fora da tela. Essa estratégia permite que as imagens sejam carregadas somente quando estiverem prestes a entrar na área visível, evitando assim alterações no layout causadas pelo carregamento tardio de imagens.
Lembre-se de que o CLS é uma métrica crítica centrada no usuário que mede o quanto o conteúdo de um site se altera durante o carregamento da página. Quanto menor a pontuação do CLS, melhor a experiência do usuário.
Em última análise, melhorar as pontuações do CLS exige uma abordagem multifacetada. Verificações regulares com ferramentas como o PageSpeed Insights, práticas consistentes de layout e o uso diligente de temas e plugins podem contribuir para uma pontuação CLS mais baixa e um site mais estável e fácil de usar.
Concluindo
Os editores que mensuram os Core Web Vitals (CWVs) estarão em melhor posição para otimizar a experiência do usuário em seus sites.
A otimização de CWVs não só melhora significativamente a experiência do leitor, como também contribui para o SEO. Páginas que carregam rapidamente, são visualmente estáveis e respondem prontamente às interações do usuário são atraentes não só para os usuários, mas também para os algoritmos dos mecanismos de busca.
Além de aprender a usar ferramentas como o PageSpeed Insights, os editores também devem monitorar de perto as tendências da publicação digital , as atualizações dos algoritmos dos mecanismos de busca e as opiniões de especialistas para oferecer consistentemente uma experiência de leitura de alta qualidade.
