Core Web Vitals: como otimizar o meu site?


Core Web Vitals: veja como otimizar o seu site

O pacote Core Web Vitals foi oficializado pelo Google e isso tem impacto no SEO, AMP e mais. Ou seja, essa iniciativa fornece orientação unificada para otimização de sites priorizando os sinais de qualidade que proporcionam uma experiência cada vez melhor aos usuários da web.

Portanto, nesse artigo, vamos abordar a otimização do Core Web Vitals e AMP de um modo geral e como ele vai impactar no SEO. Se você é um parceiro de anúncios da Grumft, seja bem-vindo ao nosso blog. Mas se ainda não é, esperamos que este conteúdo te motive a conhecer nossas soluções exclusivas de programática para publishers e anunciantes.

O que são os principais Web Vitals?

Core Web Vitals são um conjunto de métricas apresentadas pelo Google. De acordo com o Google, sua pontuação em cada uma dessas métricas afetará a experiência geral do usuário oferecida por suas páginas da web. Realize otimizações apropriadas de acordo com os principais pontos vitais da web para melhorar os rankings de suas páginas na SERP, bem como para aumentar a probabilidade de os usuários visitarem seu site para converter.  Ou seja, cada sinal representa uma pequena parte da experiência do usuário, é mensurável em campo, refletindo a experiência do mundo real centrado no usuário.

Otimização do site

Posteriormente, essas métricas irão evoluir, mas atualmente, o conjunto concentra-se em três aspectos da experiência do usuário: carregamento, interatividade e estabilidade visual. Confira cada uma delas e seus respectivos limites:

Largest Contentful Paint (LCP)

Mede o desempenho de carregamento. Para fornecer uma boa experiência ao usuário, o LCP deve ocorrer dentro de 2,5 segundos após o início do carregamento da página.

Otimização do site

First Input Delay (FID)

Mede a interatividade. Para fornecer uma boa experiência ao usuário, as páginas devem ter um FID de 100 milissegundos ou menos.

 

Otimização do site

Mudança cumulativa de layout (CLS)

Mede a estabilidade visual. Para fornecer uma boa experiência ao usuário, as páginas devem manter um CLS de 0.1. ou menos.

Otimização do site

Essas métricas ajudam a garantir que um site atenda às expectativas de experiência do usuário e podem ser medidas em campo por meio de novas APIs para navegadores diferentes.

O Core Web Vitals está basicamente relacionado à velocidade da sua página e aos movimentos do site durante o processo de carregamento. Para medir a velocidade com mais precisão, o Google recomenda várias submétricas: a maioria das diferentes métricas, como atraso na primeira entrada, maior exibição de conteúdo etc., são basicamente para entender a velocidade de carregamento do seu site e a experiência que ele oferece aos usuários durante o carregamento.

Codificação de cores

A codificação de cores refere-se a suas pontuações no Core Web Vitals:

  1. Cor verde: significa boa pontuação e geralmente indica que o Google e os usuários estão recebendo um forte UX da sua página.
  2. Cor laranja: significa que precisa de melhorias. Esse valor, que você pode aumentar com a ajuda de diversas otimizações em geral, é um sinal importante de que você está fazendo algo errado na sua página.
  3. Cor vermelha: significa “Ruim”. Geralmente aparece para páginas que carregam muito mais devagar do que o necessário, com mudança de layout cumulativa muito alta durante o carregamento. Isso significa um desempenho muito baixo do site. Para fortalecer seu ranking e melhorar as estatísticas do seu site obtendo tráfego muito maior em pouco tempo, você precisa seguir as tarefas que serão apresentadas a você através do Screpy e fazer as otimizações necessárias de acordo com essas tarefas. Desta forma, você pode aumentar sua pontuação passo a passo.

Ferramentas Core Web Vitals

A otimização com foco na qualidade da experiência do usuário é fundamental para o sucesso a longo prazo de qualquer site. Acima de tudo, os Web Vitals ajudam a quantificar a experiência do site e identificar oportunidades de melhoria.

O Google fornece ferramentas para medir e relatar o desempenho dos sites, mas muitos ainda consideram difícil o uso para compreender a qualidade da experiência que proporcionam aos usuários. Entre essas ferramentas estão:

Otimização da experiência do usuário com Core Web Vitals

Caso você ainda não realizou a otimização da experiência do usuário com Core Web Vitals no seu site, siga o fluxo indicado abaixo:

  1. Use o novo relatório Core Web Vitals do Search Console para identificar grupos de páginas que requerem atenção (com base nos dados de campo).
  2. Use o PageSpeed ​​Insights (desenvolvido por Lighthouse e Chrome UX Report) para diagnosticar problemas de laboratório e de campo em uma página depois de identificar as páginas que precisam ser trabalhadas. O PageSpeed ​​Insights (PSI) está disponível por meio do Search Console ou você pode inserir um URL no PSI diretamente.
  3. Pronto para otimizar seu site localmente no laboratório? Use o Lighthouse e o Chrome DevTools para medir os vitais essenciais da Web e obtenha orientação prática sobre exatamente o que corrigir. A extensão Web Vitals do Chrome pode fornecer uma visão em tempo real das métricas no desktop.
  4. Precisa de um painel personalizado do Core Web Vitals? Use o CrUX Dashboard atualizado ou o novo Chrome UX Report API para dados de campo ou PageSpeed ​​Insights API para dados de laboratório.
  5. Procurando orientação? web.dev/measure pode medir sua página e mostrar a você um conjunto priorizado de guias e codelabs para otimização, usando dados PSI.
  6. Por fim, use Lighthouse CI em solicitações pull para garantir que não haja regressões no Core Web Vitals antes de implantar uma mudança na produção.

Como os Core Web Vitals influencia o SEO?

Pode ser que você pense que a nova atualização não tenha nada de especial e seja apenas um conjunto de coisas que já conhecem, como usar HTTPS, Mobile Friendly, etc. Mas os Core Web Vitals são diferentes e podem influenciar a prática de SEO de maneiras inesperadas, como redução de tráfego e perda de receita para os publishers.

Durante um tempo, uma parte importante da otimização da imagem foi usar o atributo <decoding = async> na tag <img> para evitar a perda de velocidade da página durante a renderização da página. Mas agora, com o CLS sendo formalmente anunciado como um fator de classificação, as coisas mudam. Atualmente, é necessário ter certeza que cada página da web está codificada com o CLS, com o espaço necessário para cada imagem definida com antecedência, para evitar as mudanças de layout.

AMP e Core Web Vitals

Como todos nós sabemos, objetivo do AMP sempre foi garantir que a “ web funcione melhor e mais rápido para todos, em qualquer lugar ”. Veja como o AMP pode ajudar a cumprir as metas de desempenho recomendadas descritas pelo Web Vitals: 

First Input Delay (FID) 

  • O código de AMP não bloquea seus usuários: AMP só permite JavaScript assíncrono e não está executando acidentalmente operações lentas ou computacionalmente pesadas que podem impedir que os usuários usem realmente o seu site. 
  • Layout diferido: o AMP atrasa a renderização de elementos que provavelmente não serão vistos imediatamente durante o carregamento para manter a sensação do site instantânea. Ou seja, ele não impede que o usuário clique e toque porque está processando um reprodutor de vídeo pesado com JavaScript na parte inferior do site, assim que ele carrega. 
  • Processos fragmentados: o AMP implementa a fragmentação do processo para garantir que as tarefas de longa execução sejam divididas e não bloqueiem uma página. Ao manter as grandes tarefas divididas em versões menores, o AMP mantém o site responsivo a todas as interações. 
  • Sandboxes para tudo o mais: se o código de fora do AMP for necessário, ele deve ser executado em seu próprio iframe. Ao executar esse código em seu próprio contêiner, ele não pode impedir que o usuário interaja com uma página. Isso significa que anúncios lentos ou players de vídeo com muitos códigos não impedirão os usuários de realmente usarem um site.

Cumulative Layout Shift (CLS)

  • Sistema de layout de tamanho estático: o  sistema de layout do AMP foi desenvolvido com o objetivo de ser capaz de inferir o tamanho dos recursos antes de baixá-los. Por exemplo, o AMP exige que todas as imagens, vídeos, iframes ou qualquer coisa que não seja texto, sejam carregados por meio de componentes integrados, o que exige que os desenvolvedores informem ao navegador a altura e a largura desses recursos. 

<amp-img height=”200″ width=”400″ src=…

Ao garantir que esses atributos sejam incluídos antes do download do conteúdo, o AMP pode garantir que o navegador possa definir a aparência da página quando as imagens forem carregadas. Sem eles, o navegador inevitavelmente precisará mudar o layout à medida que baixa e determinar quanto espaço é necessário para cada elemento.

  • Interação necessária para conteúdo dinâmico: todas as atualizações em uma página que potencialmente causam um novo layout precisam ser acionadas por uma interação do usuário. Você não pode fazer com que um widget apareça antes que o usuário toque em algo. Ao restringir as atualizações em resposta às interações, os usuários têm muito menos probabilidade de receber uma surpresa desagradável.
  • Carregamento de fonte eficiente: muitos sites usam fontes externas para estilizar sua página. Ter que baixar um arquivo CSS externo, encontrar a referência e baixar a fonte pode facilmente causar carregamentos de página instáveis ​​e instáveis ​​e pode levar a uma experiência desorientadora para os usuários. As AMP atenuam isso exigindo que todos os CSS estejam embutidos, na parte superior do código-fonte do site. Quaisquer fontes são rapidamente descobertas e baixadas. Além disso, o carregamento assíncrono do JavaScript mencionado em nossa exploração FID significa que o JavaScript também baixado não impedirá que o navegador manipule fontes personalizadas.

Largest Contentful Paint (LCP)

  • Carregamento inteligente de recursos: o objetivo do AMP sempre foi ser instantâneo. Uma das muitas coisas que ele faz para conseguir isso é garantir que as imagens e os anúncios só sejam baixados inicialmente quando estiverem acima da dobra ou se o usuário provavelmente rolar até eles. Ao limitar a quantidade de recursos que estão sendo buscados quando uma página é carregada, o AMP pode garantir que está priorizando o conteúdo que realmente será visualizado. O resultado é um site que parece mais rápido.
  • Pré-carregamento e pré-renderização: quando as páginas AMP são hospedadas em um cache de AMP, várias otimizações são adicionadas à página para garantir que seja o mais rápido possível, como o pré-carregamento do conteúdo. Então, no momento em que um usuário normalmente toca em uma página AMP pré-renderizada, o navegador já fez o download e renderizar a coisa inteira e faz parecer instantâneo.

Otimizações adicionais em AMP

É possível fazer algumas otimizações adicionais para melhorar o AMP:

  • Servidor lento: se um servidor estiver lento, quase tudo ficará lento. Os caches de AMP ajudam a otimizar a entrega, como um CDN, mas quase todos os sites de AMP têm algum tráfego fora de um cache de AMP. Isso significa garantir que o servidor seja rápido e responsivo para o sucesso do Core Web Vitals.
  • Imagens grandes: para um site ser mais rápido, é bom evitar o uso de imagens maiores do que serão exibidas no site. Os sites que carregam imagens não otimizadas geralmente aumentam o tamanho do download em centenas de kilobytes, o que pode prejudicar diretamente seus resultados de LCP no Core Web Vitals. Certifique-se de que o tempo e a largura de banda de seus usuários sejam respeitados, otimizando as imagens em sua origem AMP. Os caches de AMP otimizam o código para evitar esses tipos de problemas, mas as otimizações são realizadas apenas em caches. Os visitas diretas, seja por meio de um link compartilhado nas redes sociais ou apenas navegando diretamente no site, não terá a mesma experiência. Para garantir ótimas pontuações do Core Web Vitals, é bom otimizar o site na origem. 

Ferramentas de otimização AMP

Existem várias ferramentas de código aberto para otimização de sites em APM, confira algumas: 

  • Otimizador de AMP: o AMP Optimizer é uma opção para melhorar o desempenho de renderização de AMP. Com recursos como renderização do lado do servidor e minificação de código, o AMP Optimizer é uma ótima primeira etapa para garantir que seu site carregue rápido.
  • Plug-in de AMP para WordPress: se você estiver no WordPress e tiver interesse em AMP, verifique o plug-in oficial de AMP . Desenvolvido e mantido pela equipe de AMP, ele traz a geração de conteúdo AMP para o WordPress, a maneira do WordPress, e oferece uma opção pronta para publicação de páginas AMP rápidas, sem a necessidade de profundo conhecimento técnico em otimização de desempenho. O plug-in oficial de AMP também fornece aos desenvolvedores ferramentas avançadas para ajudá-los no desenvolvimento de AMP no WordPress.
  • Next.js: Em seguida , adicione uma única linha de código para transformar qualquer site React em um site AMP. Isso fornece automaticamente uma grande variedade de otimizações de desempenho do site, como renderização do lado do servidor (para um LCP mais rápido), integração do AMP Optimizer.

Ao usar ferramentas como as mencionadas acima, é possível garantir que todos os usuários tenham uma experiência rápida e tranquila, não apenas aqueles que acessam por meio de uma página em cache.

Importância do AMP para SEO

Segundo John Muellers, do Google, o AMP não é um fator de classificação, embora o AMP represente uma maneira rápida e fácil para aumentar a velocidade da página. Mas as preocupações com a privacidade sempre foram constantes desde o seu lançamento em 2015. Além disso, o Google anunciou em 2020 que não há necessidade de criarmos páginas AMP para ocupar o recurso SERP “Notícias Principais”.

Dito isso, muitos especialitas acreditam que o AMP desaparecerá completamente nos próximos dois anos devido aos problemas de privacidade do AMP, combinados com o custo de manutenção. Portanto, se a otimização não for realizada de forma adequada, não há razão para colocar em risco a segurança dos usuários.

Google EAT

EAT em SEO significa perícia, autoridade e confiabilidade. As Diretrizes dos avaliadores de qualidade (QRG) do Google discute detalhadamente esses conceitos. Demonstrar uma boa EAT dentro e fora de um site pode ajudar a melhorar as classificações do Google.

Estudar as diretrizes de avaliador de qualidade de pesquisa pode ser uma ótima forma de alcançar conteúdo excelente, pois essas informações são a chave para entender o que o Google deseja ver em um site em termos de qualidade. 

Em uma entrevista à CNBC, o vice-presidente de pesquisa do Google, Ben Gomes, foi questionado sobre a conexão entre as diretrizes dos avaliadores de qualidade do Google e os algoritmos do Google. Ele disse:

Você pode ver as diretrizes dos avaliadores para onde queremos que o algoritmo de pesquisa vá. Eles não dizem como o algoritmo classifica os resultados, mas fundamentalmente mostram o que o algoritmo deve fazer.”

Avaliadores são pessoas que fornecem insights para o Google sobre o funcionamento dos algoritmos e se eles parecem estar fornecendo bons resultados. De acordo com o Google, esta é umaforma de confirmar se as alterações estão funcionando bem. 

Os avaliadores são treinados para entender se o conteúdo tem o que o Google chama de EAT forte. Isso significa perícia, autoridade e confiabilidade. Ler as diretrizes ajuda a avaliar o desempenho do seu conteúdo da perspectiva do EAT e as melhorias a serem consideradas.

Os avaliadores não têm controle sobre a classificação das páginas e os dados do avaliador não são usados ​​diretamente nos algoritmos de classificação. Portanto, entender como os avaliadores aprendem a avaliar um bom conteúdo pode ajudar a melhorar o próprio conteúdo e alcançar melhores resultados na Pesquisa. 

EAT é importante para os sites Your Money or Your Life (YMYL)

Se o site for médico, jurídico ou financeiro, é muito importante ter uma boa EAT, pois ajudam as pessoas a tomar uma decisão importante, considerado YMYL. Site de vendas são YMYL, pois aceitam transações com cartão de crédito  e as pessoas precisam confiar para inserir seus dados.

O QRG diz que um site YMYL sem EAT deve ser considerado um site de baixa qualidade. Quase todas as áreas temáticas têm pessoas conhecidas como especialistas no assunto. Mesmo que o seu tópico não seja um tópico YMYL óbvio, ainda assim é bom prestar atenção ao Google EAT.

Autor é importante para o EAT

Em primeiro lugar, os sinais que o Google usa para determinar o EAT podem ser aplicados a marcas, sites, empresas e também a autores. O QRG nos informa que se o criador do conteúdo principal (MC), ou seja, o autor, não tiver expertise para o tema, a página deve ser avaliada como de baixa qualidade.

Muitos sites YMYL têm artigos escritos por ótimos jornalistas, mas que não têm experiência real no assunto sobre o qual estão escrevendo. De fato, as pessoas que procuram informações sobre determinado assunto, preferem ler artigos de um especialista conhecido como uma autoridade na área ao conteúdo de um jornalista, por melhor que ele seja. Ou seja, as pessoas desejam ler artigos escritos por pessoas com EAT e o Google deseja mostrar aos pesquisadores artigos escritos por pessoas que são conhecidas como as melhores em suas áreas. Portanto, para ser reconhecido como uma autoridade em determinado nicho, investir em reconhecimento de marca contribui para ter uma boa classificação nas pesquisas do Google.

EAT como um fator de classificação

Danny Sullivan do Google disse no Twitter

“Não se você quiser dizer que há algo técnico como velocidade que podemos medir diretamente. Usamos uma variedade de sinais como proxy para saber se o conteúdo parece corresponder ao EAT da forma como os humanos o avaliaram. Nesse sentido, sim, é um fator de classificação.”

Ele também escreveu:

“Nossos sistemas não estão procurando por EAT. Nossos avaliadores estão usando isso para ver se nossos sistemas estão funcionando bem para mostrar boas informações. Existem muitos sinais diferentes que, se acertarmos, estão alinhados com o que seria uma boa avaliação EAT humana.” 

Os sistemas automatizados do Google usam uma combinação de muitos sinais diferentes para classificar um ótimo conteúdo. A empresa tenta fazer essa mistura alinhar o que os avaliadores humanos concordaram ser um ótimo conteúdo, pois eles o avaliaram de acordo com os critérios do EAT. Diante disso, a empresa recomenda avaliar seu próprio conteúdo em termos de critérios do EAT pode ajudar a alinhá-lo conceitualmente com os diferentes sinais que os sistemas automatizados automatizados do Google usam para classificar o conteúdo.

Conceitos nebulosos e abstratos do Google EAT

Sobretudo, o EAT tem conceitos nebulosos e abstratos, fazendo que não seja por si só um fator de classificação. Além disso, na mesma entrevista à CNBC, Ben Gomes confirmou que os avaliadores de qualidade não influenciam diretamente as classificações de nenhuma página. No entanto, na prática, muitas vezes vemos que os chamados sites YMYL já não podem ser classificados sem que alguma experiência e autoridade sejam estabelecidas. Um exemplo muito popular é que é virtualmente impossível classificar um site que fornece conselhos médicos sem um médico real escrevendo os artigos.

Porém, os algoritmos de pesquisa, que só entendem código, não interpretam facilmente experiência, autoridade e confiabilidade. E, no momento, parece não haver uma maneira infalível para o Google transformar esses sinais em classificações, exceto para ler o feedback de seus avaliadores de qualidade antes de cada atualização de algoritmo.

Na prática

Além da demanda do AdX, serviços de gerenciamento de rendimento e otimização dos anúncios, a Grumft também oferece outros diferenciais para alguns publishers parceiros. Portanto, nossos desenvolvedores estão preparados para fazer as devidas otimizações Web Vitals.

Otimização de sites

Segundo Henrique Bazan, um dos responsáveis pelas otimizações na Grumft , o ganho de um site é diretamente impactado pela sua interface.

“Um site mais leve, utlizando boas práticas, tende a ter um carregamento inicial do seu conteúdo mais rápido, proporcionando uma melhor experiência para o usuário e deixando mais recursos de banda livres para carregamento das publicidades. Este tipo de otimização tende a melhorar algumas métricas, como o CPM/CPC, Active View dos blocos de anúncio, e uma tendência a receber mais tráfego de canais orgânicos, como por exemplo o Google News.”

Pensamentos finais

Em suma, otimizar o seu site com as orientação unificada do Core Web Vitals, proporciona uma experiência melhor aos usuários do seu site, aumenta o tráfego orgânico, além de melhorar os ganhos com anúncios. Acima de tudo, conte com a Grumft para te apoiar. ​​​

Quer receber nossos conteúdos?

Sobre a Grumft

Nós ajudamos centenas de publishers e desenvolvedores de aplicativos a monetizar seus sites e apps, principalmente em economias emergentes, sem prejudicar a experiência do usuário.

Por meio de parcerias com marcas e agências, anunciantes de diferentes setores estão se beneficiando de impressões qualificadas por Compra de Mídia, Programática Garantida e Preferred Deal.

Nossos produtos estão gerando receita em milhares de anúncios neste exato momento. Tire suas dúvidas ou faça um teste conosco.