Core Web Vitals (CWV): O que é, como Implementar e como Afeta seu SEO

Core Web Vitals são um conjunto de métricas padronizadas que ajudam os desenvolvedores a entender como os usuários experimentam uma página da web. Embora os Core Web Vitals do Google tenham sido criados para desenvolvedores, essas ferramentas de SEO e podem ser usadas por todos os proprietários de sites porque detalham a experiência do mundo real do usuário em uma página. Os Core Web Vitals identificam problemas de experiência do usuário gerando uma métrica para três áreas principais de experiência do usuário, incluindo:

• Desempenho de carregamento de página
• Facilidade de interação
• Estabilidade visual de uma página da perspectiva do usuário

Leia Também:
Melhores plugins de WhatsApp
O que são os MegaMenus em WordPress
Melhores práticas para trabalhar com WordPress
Plugins Obrigatórios para WordPress
Como melhorar a segurança do seu site
Melhores Plugins para Woocommerce
Woocommerce: melhores temas

Cada uma dessas métricas fornece sua própria perspectiva sobre diferentes elementos que afetam a forma como os usuários interagem e se envolvem com um site. Embora os desenvolvedores precisem pensar na “experiência do usuário” de uma perspectiva holística, essas métricas independentes ajudam a dividir as diferentes variáveis ​​em partes menores para que os proprietários de sites possam identificar e corrigir problemas técnicos em seu site.

É importante lembrar que essas métricas não contam toda a história sobre a experiência do usuário em um site, mas cada métrica pode ser reunida para ajudar os desenvolvedores a solucionar problemas de maneira eficiente e metódica. Vamos dar uma olhada nas três principais métricas incluídas no Core Web Vitals para melhorar seus sites hoje e, se você ficar com alguma dúvida, é só deixar aí nos comentários.

Por que os principais Web Vitals são importantes

O Core Web Vitals pode ajudar a melhorar seus resultados de pesquisa. Eles são importantes porque ajudam o Google a entender o desempenho de um site e identificar áreas em que ele pode melhorar.

Mais especificamente, essas métricas consideram:

• Carregamento
• Interatividade
• Estabilidade visual

Esses são apenas alguns fatores que o Google considera em seus algoritmos para medir a saúde de um site. Também considera a compatibilidade com dispositivos móveis. Isso é importante porque mais pessoas estão usando seus dispositivos móveis para acessar a web. Se você não sabe como tornar o seu site não for compatível com dispositivos móveis, rápido e funcional, você pode estar perdendo muitos negócios e tráfego no site.

Outro aspecto importante é a segurança do site, que ajuda a proteger seu site contra ameaças online, como malware e hackers. Ele ajuda a proteger o conteúdo do seu site e os dados de seus usuários. Ao garantir que seu site atenda a esses padrões, você pode ajudar a aumentar seu desempenho e ter uma classificação mais alta nos resultados de pesquisa. Em outras palavras, priorizar e otimizar o Core Web Vitals pode ajudar a melhorar a experiência do usuário e o SEO.

1. Largest Contentful Paint (LCP)

A Largest Contentful Paint é uma métrica do Core Web Vitals que os proprietários de sites podem usar para avaliar a experiência do usuário e ver se um usuário achará uma página útil com base no tempo de renderização dos maiores blocos visíveis para um público. Os proprietários de sites precisam que as páginas do site sejam carregadas rapidamente para criar uma experiência de usuário agradável.

O tempo de carregamento não é apenas um fator crítico para uma experiência positiva do usuário, uma página que carrega rapidamente tem maior probabilidade de ter uma classificação mais alta no Google. Além disso, os tempos de carregamento rápido mostraram afetar as taxas de engajamento e conversão em comparação com uma página com tempos de carregamento lentos.

O que o LCP mede?

O LCP mede o tempo que os diferentes blocos de conteúdo levam para carregar na janela de visualização do usuário (tela atual). Essa métrica apenas informa a rapidez com que as seções de conteúdo são renderizadas na tela visível, e nada abaixo da dobra é considerado.

• Imagens
• Imagens de pôsteres de vídeo
• Imagens de fundo
• Texto em nível de bloco

Os proprietários de sites devem buscar o LCP em até 2,5 segundos após o início do carregamento de uma página.

2. Cumulative Layout Shift (CLS)

Os proprietários de sites precisam facilitar ao máximo o engajamento com links e botões em um site para gerar vendas e conversões. O Cumulative Layout Shift é uma métrica que identifica links ou botões que mudam após o carregamento de uma página da Web e reflete o nível de dificuldade que os usuários terão ao tentar interagir com elementos em seu site após a renderização de uma página.

UX e design são componentes vitais de uma boa experiência do usuário, e um usuário ficará frustrado se uma página da Web mudar elementos enquanto o usuário estiver lendo. O CLS ajuda os desenvolvedores a determinar se as imagens ou links mudam na página para que os proprietários do site possam melhorar a usabilidade, aumentar as taxas de cliques e melhorar as vendas online.

O que o CLS mede?

O CLS mede se os elementos na viewport visível mudam de sua posição inicial entre dois quadros renderizados. Em termos simples, essa métrica ajuda os proprietários de sites a entender se o conteúdo como texto, botões e banners são enviados enquanto um usuário está lendo o conteúdo de uma determinada página.

Elementos que mudam de posição podem confundir os usuários e dificultar sua experiência em uma página, por isso é importante garantir que todo o conteúdo permaneça no lugar após o carregamento de uma página no dispositivo do usuário. O CLS analisa as principais métricas para determinar a estabilidade visual de uma página da perspectiva do usuário, considerando vários fatores:

• Mudança de layout
• Fração de impacto
• Fração de distância

Os proprietários do site devem manter um CLS de 0,1 ou menos.

3. First Input Delay (FID)

Os consumidores online querem páginas que sejam rápidas e fáceis de interagir. O atraso na primeira entrada mede a latência de entrada (o tempo que um elemento de página leva para responder a partir da entrada de um usuário) para identificar as páginas que podem causar frustração ao seu público. Os sites modernos usam uma variedade de tecnologias avançadas e widgets de conteúdo dinâmico para fornecer conteúdo ao seu público.

Embora esse tipo de conteúdo possa melhorar a entrega de conteúdo, esses aprimoramentos podem causar tempos de atraso que exigem que o usuário espere que o navegador atue em sua entrada. Os desenvolvedores precisam reduzir o tempo que os usuários gastam esperando que um navegador responda à sua entrada para melhorar o engajamento e a usabilidade em todo o site.

O que o FID mede?

O FID mede a capacidade de resposta de uma página ao carregar entradas de elementos de um usuário. Isso significa que o FID registra apenas eventos como cliques e pressionamentos de teclas. Os proprietários de sites devem ter como objetivo uma boa experiência ao usuário com FID abaixo de 100 milissegundos.

Deve-se notar que o FID é difícil de medir porque esses dados só podem ser medidos em campo. Isso significa que sua pontuação dependerá de variáveis ​​fora do seu controle, como a capacidade do dispositivo dos usuários e as velocidades da Internet conforme experimentado pelo seu público.

Outras métricas de desempenho

Conforme discutimos, o Core Web Vitals oferece uma série de informações que os desenvolvedores podem usar para melhorar seus sites para a experiência do usuário. Junto com as principais métricas listadas acima, os desenvolvedores também podem entender como seu código impacta a forma como os usuários consomem conteúdo em seu site.

Embora não sejam consideradas parte das métricas de experiência do usuário, essas métricas quantificam os tempos de atraso ou outros fatores técnicos que podem afetar negativamente a forma como um público on-line interage com uma página da Web. Então, vamos dar uma olhada rápida em algumas outras métricas que você pode usar para entender a experiência visitantes têm em seu site.

1. Primeira pintura de conteúdo

O First Contentful Paint (FCP) mede quanto tempo leva para o navegador de um usuário renderizar elementos DOM (imagens, elementos do cavnas “não brancos” e SVGs). Essa métrica identifica recursos de bloqueio de renderização e é medida em segundos, com uma variedade de pontuações do FCP:

• 0–2 segundos: Verde (rápido)
• 2–4 segundos: Laranja (moderado)
• 4+ segundos: Vermelho (lento)

2. Índice de velocidade

Os sites como o Page Insight avaliam, entre outras coisas, o Índice de velocidade (SI ou Speed Index) mostra o tempo médio que o conteúdo do seu site leva para ser exibido para um usuário. Essa métrica identificará JavaScript excessivo em uma página e é medida em milissegundos, com um intervalo de pontuações SI:

• 0–4,3 segundos: Verde (rápido)
• 4,4–5,8 segundos: Laranja (moderado)
• 5,8+ segundos: Vermelho (lento)

3. Tempo para Interação

Time to Interactive (TTI) é a quantidade de tempo que leva para o conteúdo de uma página se tornar funcional para que ela seja totalmente interativa. O TTI ajuda você a identificar páginas com JavaScript desnecessário e é medido em segundos, com uma variedade de pontuações de TTI:

• 0–3,8 segundos: Verde (rápido)
• 3,9–7,3 segundos: Laranja (moderado)
• 7,3+ segundos: Vermelho (lento)

4. Tempo Total de Bloqueio

O Tempo Total de Bloqueio (TBT) ajuda os proprietários de sites a avaliar por quanto tempo uma página da Web responde a uma entrada específica do usuário. Essa métrica identificará páginas com JavaScript desnecessário e é medida em milissegundos com uma variedade de pontuações TBT:

• 0–300 ms: Verde (rápido)
• 300–600 ms: Laranja (moderado)
• 600+ ms: Vermelho (lento)

5. Pontuações de desempenho da página

Uma pontuação de desempenho da página é uma métrica única que considera todas as métricas importantes da experiência do usuário no Core Web Vitals. Essa pontuação usa um sistema de pontuação agregado em todas as visitas em dispositivos móveis e computadores. É preciso a média ponderada para fornecer uma pontuação única para entender rapidamente as páginas que precisam de um exame mais detalhado.

Embora essas métricas sejam simplificadas na métrica Pontuação de desempenho da página, os desenvolvedores podem referenciar pontuações em cada categoria com base na pontuação específica de 90 (bom), 50 a 90 (precisa melhorar) e abaixo de 50 (ruim).

Avaliando seus Principais Web Vitais

Agora que sabemos tudo sobre o Core Web Vitals, como descobrimos onde estão nossas páginas? Felizmente, existem algumas maneiras de analisar seu site. Usar o Google Search Console é a maneira mais fácil de abordar várias páginas em um site grande. O GSC tem uma seção dedicada a melhorias na navegação principal onde você pode ver o número de páginas em seu site afetadas por cada Core Web Vital. Depois de clicar nesta seção, você verá um relatório para cada problema do Core Web Vital em que seu site pode estar com problemas.

Corrigindo seus principais problemas de Web Vitals

Agora que você entende melhor o que cada métrica do Core Web Vitals está medindo e como elas representam pontos problemáticos para seu público que tenta acessar seu conteúdo e se envolver com suas marcas, é hora de agir para melhorar essas métricas – mas, mais importante, melhorar seu engajamento com seu público.

Cada site vai ser um pouco único. Seria raro que dois sites separados sofressem exatamente dos mesmos problemas – por isso, é importante pesquisar e analisar seus domínios individualmente para priorizar as atualizações que serão mais benéficas. Obviamente, existem problemas mais comuns que os sites enfrentam e, posteriormente, podemos apontar correções comuns para problemas que você pode enfrentar.

Atividades comuns para abordar o LCP

• Aplique carregamento instantâneo com o padrão PRPL
• Otimizando seu caminho crítico de renderização
• Otimizar arquivos CSS
• Otimize os tamanhos e a compactação dos arquivos de imagem
• Otimizar ou remover fontes da web
• Otimize ou reduza seu JavaScript (para sites renderizados pelo cliente)

Atividades comuns para lidar com o FID

• Reduza o impacto do código de terceiros
• Reduza o tempo de execução do JavaScript
• Minimize o trabalho de thread principal
• Mantenha as contagens de solicitações baixas e os tamanhos de transferência pequenos

Atividades comuns para lidar com o CLS

• Inclua os atributos de tamanho em suas imagens e elementos de vídeo ou reserve o espaço com caixas de proporção CSS
• Nunca insira conteúdo acima do conteúdo existente, exceto em resposta a uma interação do usuário
• Use animações de transformação em vez de animações de propriedades que forçam alterações de layout

Como melhorar os Core Web Vitals

Aqui estão algumas maneiras eficazes de melhorar suas pontuações no Core Web Vitals.

Construa seu site bem otimizado

Antes de mais nada, saber construir o seu site WordPress, ou em qualquer outra plataforma CMS ou na linguagem que você escolher, você deve entender como os Web Vitals afetaram o desenvolvimento do seu site. Você pode sim fazer o seu site e depois adaptá-lo para atender os requisitos do Google e as boas práticas de SEO. Mas para que ter esse trabalho se você pode começar a desenvolvê-lo já tendo em mente como ele será no final já integrado e atendendo aos requisitos do Web Vitals?

Aprender a construir o seu site em WordPress de forma a seguir todas as recomendações do Google pode parecer fácil, mas não é. Existem alguns detalhes que só quem tem um conhecimento aprofundado do CMS poderá fazer sem erros e garantindo que ele atenderá todos os requisitos do Web Vitals. Você precisa de uma agência ou de um web designer para fazer isso? Não exatamente. Se você quiser saber como fazer um site otimizado, recomendamos o conteúdo neste link que irá te ajudar a entender tudo o que você precisa do WordPress para fazer um site ou loja virtual de sucesso.

Implemente uma solução de cache

O armazenamento em cache de seu conteúdo pode ajudar a reduzir a carga em seu servidor. Uma ferramenta de cache armazena versões HTML estáticas de suas páginas, eliminando a necessidade de carregá-las sempre que um visitante acessar seu site. Dependendo do seu host, você pode aproveitar o cache no nível do servidor.

No entanto, como usuário do WordPress, também há um punhado de plugins de cache para escolher. Uma das opções mais populares é o W3 Total Cache. Este plugin WordPress gratuito pode reduzir o tempo de carregamento da página em seu site para aumentar seu desempenho. Ele oferece cache de páginas e postagens, CSS e JavaScript, objetos de banco de dados e muito mais.

Se você estiver procurando por uma ferramenta de armazenamento em cache poderosa e completa, considere o plugin WP Rocket. A implementação de uma solução de cache premium pode ser particularmente útil para melhorar sua pontuação FID. Por exemplo, o WP Rocket vem com um recurso que permite otimizar facilmente a entrega de arquivos. Ele também inclui vários outros recursos que podem ajudar a aumentar as pontuações do Core Web Vitals, que veremos nas seções a seguir.

Se estiver procurando um bom plugin de cache, temos uma matéria com os melhores plugins de cache para WordPress aqui no site.

Elimine recursos de bloqueio de renderização

Os elementos de bloqueio de renderização referem-se aos arquivos estáticos HTML, CSS e JavaScript necessários para renderizar uma página em seu site. Cada um desses arquivos contém scripts que podem impedir que seus usuários visualizem o conteúdo. Normalmente, eles são criados a partir de plugins e ferramentas de terceiros, como o Google Analytics.

No entanto, uma maneira de evitar que esses scripts prejudiquem a sua Experiência de Usuário (e, por sua vez, ajudem a melhorar os Core Web Vitals) é eliminar recursos de bloqueio de renderização e reduzir e remover qualquer CSS ou script não utilizado. Existem várias técnicas que você pode usar para fazer isso. Uma é minimizar seu JavaScript e CSS, eliminando quaisquer espaços em branco ou comentários desnecessários.

Você pode usar uma ferramenta como CSS Minifier para tornar isso mais fácil. A ferramenta é de uso gratuito e você pode simplesmente inserir seu CSS e selecionar o botão Minify. Em seguida, você pode copiar e colar a saída para baixar e substituir seu código. Outro método é condensar seu JavaScript e CSS combinando os arquivos. Esta é outra tarefa que o recurso de otimização de arquivos no plugin WP Rocket pode ajudar.

Adiar o carregamento de JavaScript

Se você deseja aumentar suas pontuações no FID, pode usar a técnica conhecida como adiamento do carregamento de JavaScript. Essa é outra maneira de eliminar elementos de bloqueio de renderização.

Esse processo faz com que suas páginas da Web sejam carregadas mais rapidamente porque atrasa o carregamento do JavaScript. Em outras palavras, ele carrega outro conteúdo na página quando um visitante chega, em vez de esperar que todos os arquivos JavaScript terminem de carregar. Seus arquivos serão forçados a esperar para carregar até que todo resto da sua página esteja pronto.

Além disso, você pode definir as configurações do seu site para que o CSS crítico carregue o ‘conteúdo acima da dobra’ mais rapidamente. ‘Acima da dobra’ refere-se aos elementos na página da Web que aparecem primeiro. Você pode fazer isso retirando o conteúdo do arquivo CSS principal e inserindo-o em seu código. Isso ajudará a carregar mais rápido, melhorando assim a Experiência do Usuário. Alguns plugins de cache como o plugin WP Rocket oferecem um recurso Optimize CSS Delivery que pode ser útil para isso.

Use uma rede de entrega de conteúdo

Uma rede de entrega de conteúdo (CDN) é uma rede de servidores em todo o mundo que você pode usar para armazenar seu conteúdo. Isso significa que seus visitantes receberão o conteúdo do seu site de servidores que estão mais próximos deles. Isso pode ajudar a acelerar ainda mais os tempos de carregamento. O uso de um CDN pode acelerar os tempos de LCP para seus usuários. Também pode ajudar a minimizar o tempo até o primeiro byte (TTFB ou Time to first byte, uma medida usada como uma indicação da capacidade de resposta de um servidor da web ou outro recurso de rede).

Existem várias ferramentas de terceiros que você pode aproveitar para o seu site WordPress. Uma das opções mais populares é o Cloudflare. Assim como no cache, alguns provedores de hospedagem oferecem soluções CDN com seus planos. Recomendamos verificar com seu host da Web para avaliar quais ofertas (se houver) vêm integradas aos planos deles antes de implementar uma por conta própria.

Dimensione e otimize corretamente as imagens

Outra maneira de aumentar as pontuações do LCP é otimizar e compactar suas imagens para reduzir o tamanho do arquivo. Você pode fazer isso usando uma ferramenta como o TinyPNG. As ferramentas de compactação de imagem permitem reduzir significativamente o tamanho do arquivo sem ter que se preocupar com a perda de qualidade.

Você também pode otimizar suas imagens garantindo que elas tenham os tamanhos e dimensões apropriados. Quando você carrega imagens do editor do WordPress o Content Management System (CMS) atribui automaticamente as dimensões para você.

No entanto, se você adicionar imagens manualmente por meio de código, é importante certificar-se de que está definindo as dimensões para especificar espaço para esses elementos. Quanto maiores as imagens, maior o tamanho do arquivo.

Portanto, é inteligente garantir que você não use dimensões de imagem desnecessárias para determinadas áreas do seu site. Adicionar os atributos certos pode ajudar seu navegador a alocar a quantidade apropriada de espaço para os elementos da página, o que pode ajudar a minimizar as mudanças de layout.

Você pode ajustar os atributos de tamanho de largura e altura da imagem e dos vídeos em seu site editando o código. Para visualizar esses atributos, você pode clicar com o botão direito do mouse na imagem no front-end do seu site e selecionar Inspecionar. Isso abrirá o painel Ferramentas do desenvolvedor. Aqui, você pode ver se os tamanhos adequados estão atribuídos.

Se estiver procurando sugestões, veja nossa matéria com os melhores plugins de imagem do WordPress.

Implemente o carregamento lento

Também recomendamos que você implemente o carregamento lento. Isso ajuda a garantir que suas imagens sejam carregadas exatamente quando os usuários chegarem a essa seção da página da Web, em vez de carregar ao mesmo tempo que todo resto da página.

As imagens de carregamento lento podem ajudar a melhorar seu LCP e a velocidade de carregamento. Muitos plugins de otimização de imagem do WordPress, como o Smush, vêm com recursos de carregamento lento integrados.

Otimize as fontes do seu site

Assim como as imagens, as fontes que você usa em seu site também podem influenciar seus tempos de carregamento. Isso ocorre porque eles exigem que o navegador baixe e carregue a família de fontes, incluindo cada variação de suas combinações de peso. Otimizar suas fontes da web pode ajudar a melhorar o desempenho do seu site. Isso ocorre porque as fontes da Web otimizadas são menores em tamanho de arquivo e entregues mais rapidamente.

Além disso, um navegador pode não renderizar automaticamente elementos de texto se a fonte da Web associada a ele ainda não tiver sido carregada. Por outro lado, o uso de fontes de fallback pode causar mudanças de layout, prejudicando sua pontuação no CLS. Recomendamos ser seletivo em quais fontes você escolhe usar em seu site. Se você estiver usando mais de duas fontes, é inteligente removê-las dos elementos específicos e usar fontes globais para aplicar apenas os tipos e pesos necessários. Isso garantirá que apenas as fontes necessárias para o texto sejam baixadas.

Atualize sua hospedagem WordPress

Se o seu site for particularmente lento para carregar, isso pode indicar que é hora de atualizar sua hospedagem na web. Por exemplo, mudar de hospedagem compartilhada para um servidor dedicado pode ser uma excelente maneira de melhorar seu LCP.

Sugerimos escolher um host gerenciado que tenha servidores otimizados especificamente para WordPress e possa lidar com muitos aspectos técnicos do desempenho do site. Seu provedor de hospedagem WordPress desempenha um papel fundamental no desempenho do seu site. Isso afeta tudo, desde a velocidade da página até a segurança. Portanto, não é uma área que recomendamos economizar, especialmente se você tiver um site grande ou complexo. Pelo contrário, atualizar seu provedor ou plano de hospedagem é uma das maneiras mais rápidas e poderosas de otimizar seu site e melhorar os tempos de carregamento.

FAQ Rápido

Então, fale conosco. Você aprendeu a configurar e Se você gostou, deixe um comentário. Fale conosco se você tem outras sugestões de otimização e aproveite para ler mais matérias sobre tecnologia e dicas para WordPress no nosso site.