O que é o Core Web Vitals e como otimizá-lo

Em 2021 o Google incorporou a experiência da Página como fator de ranqueamento. Seu objetivo principal é melhorar o desempenho da web. Com a atualização da experiência da página, os principais sinais vitais da Web se tornaram um fator vital a ser considerado se você deseja que seu site seja classificado nos resultados de pesquisa do Google.

Quando alguém pesquisa no google por uma palavra-chave específica, como o Google determinará qual site deve renderizar na parte superior e qual na parte inferior. Bem, sem dúvida considera o conteúdo primeiro. O conteúdo sempre dominará as classificações, mas, além do conteúdo, o Google também mede muitos outros elementos da página da web, como palavras-chave, uso dessas palavras-chave em sua página, backlinks e muitos outros. O desempenho da página também é um deles. O Google mede o desempenho da página pelos principais sinais vitais da web.

Neste artigo, discutiremos o Core Web Vitals e como você pode otimizá-lo para ter uma classificação mais alta nos resultados de pesquisa e adquirir mais tráfego.

O que é o Core Web Vitals

Maior exibição de conteúdo, primeiro atraso de entrada e mudança cumulativa de layout são as três principais métricas de desempenho que compõem o Core Web Vital e medem a rapidez e a eficiência com que uma página é carregada para os usuários, bem como a interação e a estabilidade dos elementos do site permanecem durante todo o processo de carregamento.

Vamos decompô-lo ainda mais para um melhor entendimento.

1. LCP (maior pintura de conteúdo)

O LCP avalia a rapidez com que o maior elemento do site acima da dobra (imagens, vídeo, animações, texto etc.) pode ser carregado e exibido.

Um bom LCP é de 2,5 segundos, enquanto qualquer coisa entre 2,5-4 segundos precisa de melhorias e além de 4 segundos é considerado ruim pelo Google.

MAIORES ESTATÍSTICAS DE PINTURA DE CONTEÚDO

1. A maior pintura de conteúdo é responsável por 25% de sua pontuação de desempenho do Google Lighthouse.
2. 43% dos URLs para dispositivos móveis e 44% dos URLs para computadores passam no benchmark de maior pintura de conteúdo de 2,5 segundos.
3. De acordo com a pesquisa, o site B2B médio tem uma pontuação de Maior pintura de conteúdo móvel de 7,05s, bem acima da pontuação de 2,5s necessária para receber uma nota de aprovação.
4. De acordo com a pesquisa, o site de varejo médio tem uma pontuação de Maior pintura de conteúdo móvel de 9,17s, bem acima da pontuação de 2,5s necessária para receber uma nota de aprovação.

2. FID (atraso da primeira entrada)

O FID de uma página é o tempo que o navegador leva para começar a processar manipuladores de eventos em resposta à primeira interação do usuário com a página, como um clique, um toque.

Um bom FID está abaixo de 100 ms, enquanto qualquer valor entre 100-300 ms precisa ser melhorado e acima de 300 ms é considerado ruim.

ESTATÍSTICAS DE ATRASO DA PRIMEIRA ENTRADA

1. O primeiro atraso de entrada é responsável por 25% de sua pontuação de desempenho do Google Lighthouse.
2. 89% dos URLs para dispositivos móveis e 99% para computadores atendem ao benchmark de atraso de primeira entrada de 100 milissegundos.

3. CLS (mudança cumulativa de layout)

O CLS é uma métrica centrada no usuário útil para medir a estabilidade visual, pois ajuda a quantificar a frequência com que os usuários encontram alterações inesperadas de layout. Este é um aspecto essencial da medição da estabilidade visual.

Bom CLS está abaixo de 0,1, enquanto qualquer coisa entre 0,1 e 0,25 precisa de melhorias e acima de 0,25 é considerado ruim

ESTATÍSTICAS DE MUDANÇA DE LAYOUT CUMULATIVA

1. A mudança de layout cumulativa é responsável por 5% de sua pontuação de desempenho do Google Lighthouse.
2. 46% dos URLs para dispositivos móveis e 47% dos URLs para computadores passam no benchmark Cumulative Layout Shift de 0,1.

Agora, por que o Core Web Vitals é importante

Uma ferramenta como o Core Web Vitals ajuda a aumentar a posição do seu site nos resultados de pesquisa. Eles são cruciais, pois informam ao Google o desempenho de um site e onde ele pode ser aprimorado.

Os Core Web Vitals inegavelmente elevam a importância do UX como um elemento de classificação.

Portanto, otimizar para o Core Web Vitals pode fazer uma enorme diferença se você estiver competindo em um campo onde a qualidade do conteúdo é quase comparável, o que significa que, se o Google tiver que mostrar duas páginas com a mesma qualidade de conteúdo, ele preferirá aquele com uma boa pontuação de principais métricas da Web. Lembre-se de que nada pode substituir o conteúdo de qualidade em seu site.

O que John Mueller, do Google, tem a dizer sobre o Core Web Vitals

A outra coisa a lembrar com Core Web Vitals é que é mais do que um fator de classificação aleatório. Também afeta a usabilidade do seu site depois que ele é classificado (quando as pessoas o visitam). Se você obtiver mais tráfego (de outros esforços de SEO) e sua taxa de conversão for baixa, esse tráfego não será tão valioso quanto quando você tiver uma taxa de conversão mais alta (supondo que UX/velocidade afete sua taxa de conversão, o que geralmente acontece).

Ter Core Web Vitals sólidos é muito mais do que otimização de mecanismo de pesquisa, para simplificar. Todo proprietário de site deve se esforçar para aprimorar a experiência geral de seus visitantes.

Mesmo que o conteúdo da sua página seja excelente, você ainda precisa garantir que todos os aspectos do seu site sejam otimizados para receber uma classificação alta nos mecanismos de pesquisa, para que seu site fique visível para o seu público-alvo. O Core Web Vitals também enfatiza a importância da experiência do usuário.

Como medir os principais indicadores vitais da Web

Você pode examinar os Core Web Vitals do seu site com a ajuda de vários testes, relatórios e extensões.

Os mais importantes deles são:

• Avaliação do Core Web Vitals do PageSpeed ​​Insights;
• O relatório Core Web Vitals no Google Search Console;
• A extensão Core Web Vitals para Chrome.

1. Avaliação das principais métricas da Web no PageSpeed ​​Insights

O Google PageSpeed ​​Insights (PSI) é dividido em duas seções:

• Determine o que seus usuários reais estão experimentando (avaliação do Core Web Vitals)
• Identificar preocupações de desempenho (dados de laboratório, pontuação PSI).

Concentre-se na primeira parte para melhorar sua pontuação em Core Web Vitals. O relatório Field Data incorpora essa análise. Os dados para este estudo são coletados do Chrome User Experience Report (CrUX). Esses dados são baseados nas interações reais dos usuários com seu site. O Google considerará esses resultados de campo ao determinar as classificações do mecanismo de pesquisa.

A seção “Diagnóstico” do PSI também é um bom recurso para aprender mais sobre os fatores que podem alterar qualquer uma das três métricas:

O PSI leva em consideração métricas de usuários reais e dados de laboratório ao determinar uma pontuação geral de otimização e oferecer recomendações de otimização.

Embora essas informações sejam úteis, elas são coletadas em um ambiente controlado usando dispositivos e redes específicas no laboratório. No entanto, alguns dos visitantes do seu site podem usar tecnologia desatualizada ou conexões com pouca potência. É por isso que comparar os resultados do laboratório com o desempenho real do seu site não é uma boa ideia.

PSI nem sempre fornece um resumo de campo.

Quando o CrUX não coleta dados suficientes do campo, como costuma acontecer com sites menores, surgem problemas como esse. Felizmente, existem fontes adicionais das quais podemos coletar dados de campo.

2. Relatório de principais métricas da Web no Google Search Console

Dois novos relatórios do Core Web Vitals, um para celular e outro para desktop, foram adicionados ao Google Search Console (GSC).

Cada relatório fornece informações sobre os dados de campo e desempenho de grupos de URLs.

Esses relatórios são excelentes para descobrir problemas comuns em vários URLs. Assim, você receberá informações de todo o seu site, não apenas de uma página.

Por exemplo, se você tiver um grande número de páginas idênticas em que o maior elemento é uma imagem, a métrica LCP será a mesma para cada uma. Nessa situação, o GSC descobre problemas de LCP em cada página.

Resumidamente, esses novos relatórios GSC são a abordagem mais notável para rastrear o desempenho dos principais indicadores vitais da Web em todo o site.

3. Usando o Chrome User Experience Report (CrUX) para obter dados de campo

O conjunto de dados CrUX pode ser acessado das 2 maneiras a seguir

• A API Chrome UX Report- Para acessar este desenvolvedor deve estar familiarizado com JavaScript e JSON.
• BigQuery – Requer um projeto do Google Cloud e habilidades de SQL.

Você precisará colocar mais trabalho do que apenas passar uma página pelo PSI ou GSC. Mas eles oferecem mais opções para organizar e visualizar os dados. O BigQuery, por exemplo, possui funcionalidades para fatiamento de dados e junção com outros conjuntos de dados.

Experimente ambas as estratégias se tiver os recursos e o conhecimento técnico para implementá-las.

Algumas estatísticas vitais sobre os principais indicadores vitais da Web

1. 56% dos 100 principais domínios de desktop passam no Core Web Vitals
2. Efeito de marca pesada – as principais marcas têm uma classificação alta, mesmo com desempenho ruim.
3. 61% dos 100 principais dispositivos móveis passaram no Core Web Vitals em fevereiro de 2022
4. Em fevereiro de 2022, o tempo médio de carregamento para os 100 principais domínios nos EUA foi de 2,38 segundos no computador e 2,32 segundos no celular – abaixo do limite razoável do Google de 2,5 segundos.
5. Em fevereiro de 2022, as pontuações médias do CLS para desktop e celular foram 0,11 e 0,08, respectivamente – esta é a primeira vez que a média do CLS no celular para os 100 principais sites caiu abaixo do limite adequado do Google de 0,1
6. Em janeiro de 2020, apenas 22% dos domínios de desktop e 27% dos 100 principais domínios para dispositivos móveis foram aprovados no Core Web Vitals, respectivamente. Avançando para fevereiro de 2022, essa proporção mais que dobrou para 56% em computadores e 62% em dispositivos móveis. Isso mostra que os domínios de melhor desempenho obtiveram ganhos significativos no desempenho da web.
7. Os sites Top 100, B2B, Healthcare e Dict/Reference têm um LCP médio de 2,5 segundos ou menos em ambos os dispositivos.
8. Em média, o LCP móvel para viagens é 1,6 vezes pior do que para sites de dicionário/referência.
9. Em média, o LCP de desktop para viagens é 1,5 vezes pior do que para domínios B2B.
10. URLs na posição 1 têm 10% mais chances de passar em uma avaliação de Core Web Vitals do que URLs na posição 9.
11. Da posição 1 para a posição 5, há uma redução de 2% na taxa de aprovação da avaliação do Core Web Vitals para cada posição.

Como otimizar os principais indicadores vitais da Web

Agora que temos uma compreensão firme dos Core Web Vitals e como eles funcionam, podemos voltar nossa atenção para algumas etapas recomendadas para melhorar os Core Web Vitals. Lembre-se de que os resultados do seu teste ditarão as etapas que você precisa seguir para aumentar sua pontuação. Portanto, é essencial considerar os conselhos e sugestões feitas pelo PageSpeed ​​Insights (ou outras ferramentas de teste que você usa).

A seguir estão estratégias básicas comprovadas para aumentar suas pontuações de Core Web Vitals.

1. Use uma rede de entrega de conteúdo

O uso do CDN melhora o desempenho do site em grande medida. Sites que usam CDN carregam rápido comparativamente. Por que? Porque o CDN agiliza a transferência de dados entre o servidor e o usuário final.

CDN é uma vasta rede de servidores interconectados. Você pode armazenar o conteúdo do seu site em vários servidores usando o CDN. Quando um usuário acessa o seu site, o servidor mais próximo geograficamente o torna o site, reduzindo o tempo de transferência de dados.

Com o uso de um CDN, você pode diminuir os tempos de carregamento do LCP dos usuários. O Time-to-First-Byte também pode ser reduzido com seu uso (TTFB).

2. Otimize as imagens

Outra maneira de aumentar o LCP é pela otimização de imagem. As imagens são volumosas se forem de alta resolução e demoram um tempo razoável para carregar, o que afeta negativamente a pontuação do LCP.

O uso de imagens compactadas torna o carregamento mais rápido. Muitos sites como o TinyJPG podem reduzir o tamanho de uma imagem gratuitamente sem prejudicar sua qualidade. As imagens podem ser ainda mais otimizadas, garantindo que tenham o tamanho e as dimensões corretos.

Portanto, é inteligente garantir que você não esteja usando dimensões de imagem desnecessárias para determinadas áreas do seu site. Incluir os atributos adequados pode ajudar seu navegador a fornecer a quantidade ideal de espaço para as partes da página, reduzindo a necessidade de mudanças constantes de layout.

Ao fazer alterações no código-fonte, você pode alterar as propriedades de largura e altura de seus arquivos de mídia.

3. Implemente o carregamento lento

Seu LCP e o tempo de carregamento da página podem se beneficiar do uso do carregamento lento. Smush é apenas um exemplo de vários plugins do WordPress que oferecem carregamento lento.

O carregamento lento, também conhecido como carregamento sob demanda, é um método para melhorar o desempenho do conteúdo da web.

O carregamento lento ajuda a carregar apenas a parte necessária e atrasa o carregamento do restante até que seja necessário para o usuário, em oposição ao carregamento em massa, que carrega a página da Web inteira de uma vez e a renderiza de uma só vez.

4. Otimize as fontes do seu site

As fontes que você usa em seu site podem afetar o tempo de carregamento da mesma forma que as imagens. Isso ocorre porque cada combinação de peso de fonte exige que o navegador carregue toda a família de fontes.

A otimização de fontes da Web é uma maneira simples de aumentar a velocidade do seu site. Isso ocorre porque as fontes da Web otimizadas ocupam menos espaço no computador do usuário e carregam muito mais rápido.

Por outro lado, se a fonte da Web relevante ainda não tiver sido carregada, o navegador pode não renderizar automaticamente os componentes de texto. No entanto, mudar para fontes alternativas pode resultar em alterações de layout indesejadas, diminuindo sua pontuação no CLS.

Tenha cuidado ao decidir sobre uma fonte para o seu site. É melhor usar fontes globais para aplicar seletivamente os tipos e pesos necessários se estiver usando mais de duas fontes em vez de aplicar cada uma a cada elemento. Usando este método, você pode restringir os downloads de fontes para aqueles estritamente necessários para o conteúdo.

5. Atualize sua hospedagem WordPress

Se o tempo de carregamento do site for muito longo, pode ser indicação de mudança de plano de hospedagem. Alterar sua hospedagem de compartilhada para dedicada pode impulsionar o FCP em grande medida.

Em vez de escolher o mais barato, escolher o melhor site de hospedagem que forneça todos os recursos necessários é uma decisão sábia. A qualidade do serviço prestado pelo seu host WordPress é crucial para o sucesso do seu site. Tem consequências de longo alcance, desde o tempo de carregamento da página até a segurança. Especialmente se você tiver um site grande ou sofisticado, este não é um lugar para economizar. Em vez disso, atualizar seu provedor ou plano de hospedagem é uma das estratégias mais rápidas e poderosas para otimizar seu site e melhorar os tempos de carregamento.

Para hospedagem, leia: Revisão do Bluehost

6. Elimine recursos de bloqueio de renderização

As páginas do site não podem ser renderizadas sem os arquivos HTML, CSS e JavaScript que as acompanham. Todos esses arquivos incluem scripts que podem proibir as pessoas de acessar o que estão tentando ver.

No entanto, você pode impedir que esses scripts afetem negativamente seu UX (e, por sua vez, ajudem a aumentar os principais sinais vitais da Web) removendo recursos de bloqueio de renderização e qualquer CSS ou scripts desnecessários.

Existem vários métodos para realizar isso. A primeira é remover quaisquer espaços ou comentários extras do seu JavaScript e CSS. Além disso, você pode reduzir o tamanho do seu JavaScript e CSS mesclando os arquivos.

7. Adie o carregamento do JavaScript

É outra maneira de eliminar elementos de bloqueio de renderização, dando um impulso significativo ao FID.

Isso faz com que as páginas da Web sejam carregadas rapidamente, bloqueando o carregamento de arquivos JavaScript.

Ele carrega outro conteúdo de suas páginas em vez de esperar que os arquivos JS sejam carregados. Além disso, você pode configurar seu site para carregar scripts CSS críticos que aparecem acima da dobra rapidamente. Você pode conseguir isso extraindo o material do arquivo CSS principal e inserindo-o no código do seu site.

8. Implemente o cache de conteúdo.

Quando se trata de aprimorar a experiência do usuário, o cache de conteúdo inteligente é uma das ferramentas mais poderosas à sua disposição. A técnica de entrega de conteúdo central do protocolo HTTP usa cache ou armazenamento temporário de conteúdo de solicitações anteriores. Se as políticas de cache do conteúdo permitirem, os componentes em qualquer ponto da cadeia de entrega podem armazenar cópias dele para acelerar as solicitações subsequentes.

O armazenamento em cache ajuda muito a melhorar as pontuações vitais da Web principal.

9. Pré-carregar imagens de heróis

As imagens principais geralmente são o elemento mais significativo que aparece acima do conteúdo da dobra. Portanto, se eles carregarem mais rápido, o UX geral será bastante aprimorado. O LCP pode ser reduzido drasticamente usando o atributo de link “rel=preload” , que é especialmente útil para imagens de heróis carregadas com CSS ou JavaScript.

10. Evite priorizar publicidade ou pop-ups em detrimento de outros conteúdos.

Uma pontuação CLS baixa é o resultado da mudança de conteúdo em uma página causada pela adição de conteúdo na parte superior.

Reserve espaço para anúncios, iframes e outras formas de conteúdo dinâmico.

Não alocar um espaço específico para eles é uma maneira certeira de atrapalhar o layout, assim como acontece com imagens e vídeos. Para evitar que o conteúdo transborde de um contêiner, use a propriedade overflow: hidden e escolha um contêiner com tamanho adequado.

11. Separe tarefas longas

Esta deve ser sua principal prioridade. Quando tarefas longas atrasam o Thread principal, ele não pode reagir prontamente às solicitações do usuário. O desempenho do site pode ser significativamente aprimorado ao dividi-los. Isso reduz o FID e aprimora o UX

12. Interrompa ou adie a execução de quaisquer scripts de terceiros desnecessários

Os scripts do seu próprio site podem não ser executados no prazo se entrarem em conflito com os de terceiros. Considere quais scripts são mais úteis para o usuário final e dê a eles maior prioridade. Os scripts de anúncios e pop-ups não devem estar no topo da lista.

Como os 10 principais domínios dos EUA estão se saindo em termos de principais métricas da Web com base na visibilidade de SEO da Searchmetrics.

Todas as métricas e se o domínio foi aprovado ou não nas principais métricas da Web são relatadas mensalmente no nível do domínio. Em fevereiro de 2022, 75% de todos os carregamentos de páginas da Wikipedia na área de trabalho levaram menos de 1,1 segundos, e o domínio marcou 0 tanto no FID (indicado em milissegundos) quanto no CLS, passando no Core Web Vitals.

Os 10 principais CWVs para dispositivos móveis com base na métrica Searchmetrics SEO Visibility .

Sempre que possível, uma versão móvel de um domínio foi usada. No entanto, isso depende principalmente da coleta de dados do CrUX. Uma parcela maior de sites para celular é aprovada nos Core Web Vitals do que para desktop.

Conclusão

Core Web Vitals é um divisor de águas para melhorar a experiência na web para todos. Essas medições continuarão a ser incluídas no sistema de classificação do Google.

Por isso é fundamental ficar de olho neles mesmo que não veja nada de errado.

Para manter um site de sucesso funcionando, melhorar constantemente a experiência do usuário é crucial. Graças à disponibilidade de inúmeras ferramentas e plug-ins úteis, esse processo pode ser muito mais simples e fácil do que seria de outra forma. Ou, se parecer assustador para você, você pode contratar um desenvolvedor para fazer isso por você.