Desde que o Google implementou em maio de 2021 o Core Web Vitals, estamos acompanhando alguns publishers otimizando seus websites. Em uma de nossas experiências, notamos uma queda significativa na receita de um dos publishers logo que o Google colocou em prática o novo algoritmo. A partir da queda, trabalhamos duro na otimização com Core Web Vitals, aumentando cerca de 30% a receita de publicidade do site ao compararmos com os dias antes da queda.

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 objetivo do artigo é compartilhar nossa experiência, além de dar dicas de como aumentar a receita de publicidade do seu site otimizando com o Core Web Vitals. Vamos lá? 

Sobre o Core Web Vitals

Como você pode imaginar, é impossível prever qual a porcentagem do aumento de receita que você vai conseguir ao realizar essas otimizações. Já observamos aumento de 30%, 18% e até 15%. Percebemos que a otimização tem maior impacto em categorias de sites mais competitivas, pois os publisher investem em desempenho. Mas além do aumento de receita com publicidade, também notamos melhora no viewability, redução das taxas de rejeição e melhora nas visualizações de página.

Logo que o Google anunciou a iniciativa Core Web Vitals, muitos pensaram que seria apenas mais um conjunto de coisas que já otimizaram em seus sites. Entretanto, os Core Web Vitals estão influenciando a prática de SEO, no tráfego proveniente das ferramentas de descoberta e Google News e, consequentemente, na receita. Mas logo que perceberam o potencial das novas métricas para melhorar a experiência nas páginas do site e na monetização com publicidade, começaram a trabalhar para aplicar as novas práticas. 

O compromisso com a experiência do usuário e velocidade de carregamento de páginas está provando dia após dia ser o caminho certo para melhorar o engajamento e a receita de publicidade. Outras métricas apreciadas pelos anunciantes também são impactadas, como o viewability por exemplo.

Equilíbrio entre experiência do usuário e velocidade da página:

Quando começamos a otimização em sites teste, buscamos equilibrar a experiência do usuário e a velocidade da página, ao mesmo tempo que buscamos manter a receita com os anúncios. As principais dificuldade encontradas foram:

• Alta pontuação cumulativa (CLS) devido a mudanças de layout acionadas por anúncios, especialmente de slots de vários tamanhos e banners superiores. 
• Baixa velocidade de carregamento (LCP) dos anúncios devido a competição por largura banda no carregamento da imagem destacada do conteúdo.
• Muito atraso na primeira entrada (FID) por causa do JavaScript de terceiros necessário para publicidade, Header Bidding e outros. 
• Além de efeitos colaterais no Core Web Vitals nas caixas de consentimento controlados por fornecedores terceirizados, que também aumentam as mudanças de layout e podem ser detectados como maior LCP.

Otimizando seu site para Core Web Vitals 

A otimização para Core Web Vitals não precisa afetar a propaganda negativamente e pode ser uma oportunidade para melhorar a viewability. De acordo com o Google, a média global de viewability para anúncios gráficos atualmente é inferior a 50%. Para atrair publicidade de maior valor, seu site precisa buscar visibilidade acima de 75%.

Otimizando CLS 

Geralmente os anúncios carregam com atraso por terem sido implementados dessa forma ( lazy load). Na maioria das vezes o tamanho real não é conhecido com antecedência devido a variedade de tamanhos e posicionamentos fluidos. Esse problema pode ser dividido em dois: anúncios acima e abaixo da dobra.

Anúncios acima da dobra podem causar grandes saltos de layout devido ao carregamento tardio com tamanhos desconhecidos. Bloquear o maior espaço de que eles podem precisar pode levar a uma experiência ruim, enquanto pedir aos anunciantes por tamanhos fixos pode reduzir a receita de publicidade. Para resolver isso, torne o anúncio principal aderente e remova alguns dos maiores tamanhos de banner permitidos. O anúncio sobreposto evita o acionamento de saltos de layout para anúncios de tamanhos diferentes. Embora os tamanhos qualificados reduzidos afetem as vendas de anúncios, a melhora no viewability pode compensar a perda.

Os dados históricos do seu site e os testes A / B podem te ajudar a encontrar o tamanho e o posicionamento correto para diferentes dispositivos, tamanhos de tela e regras de mídia CSS usadas para reservar espaço aos anúncios.

Nos anúncios abaixo da dobra você pode fazer melhorias significativas:

• Um banner que não é visto, mas carregado prejudica o viewability e piora a experiência da página.
• Um banner que é carregado no momento em que um usuário rolar sobre ele geralmente apresenta saltos de conteúdo adicionais.

Para manter uma boa experiência de página e alto viewability, você pode implementar o lazy load e o espaço reservado para o menor denominador comum. Em uma zona de vários tamanhos, os banners solicitados nos tamanhos 300×250 a 300×600, reservados 250 px de altura. Isso elimina mudanças de layout para os tamanhos menores e reduz para banners maiores. Embora essa abordagem não seja ideal, é um compromisso com a experiência do usuário.

Além disso, você pode usar o Intersection Observer e a Network Information API para otimizar ainda mais e controlar a inserção de anúncios e reduzir as mudanças de layout. Diferentes posições de anúncios e estratégias de lazy load são usadas dependendo da posição de rolagem e da qualidade da conexão de rede, e os anúncios podem ser alterados de vários para tamanhos fixos.

O objetivo do algoritmo é sempre maximizar a visibilidade do anúncio, minimizando as mudanças de layout. Os navegadores que não oferecem suporte à API NetworkInfo usam um valor de proxy com base em uma combinação de dispositivo e tipo de rede derivada de IP. Essa estratégia de carregamento adaptável reduz especialmente o CLS para usuários com conexões lentas à Internet.

Otimizando FID

O atraso na primeira entrada pode parecer um problema para os publishers, já que o anúncio geralmente vem com muitas bibliotecas JavaScript adicionais e pode parecer haver um impacto negativo ao observar dados de laboratório como o Lighthouse. 

Porém, ao olhar para os dados de campo no 2020 Web Almanac , muitos sites têm uma resposta suficientemente rápida e parte disso se deve ao carregamento tardio do JavaScript de publicidade (após a primeira entrada), bom armazenamento em cache (por exemplo, obter o tratamento do armazenamento em cache do código v8 ) ou sendo bem otimizado pelos fornecedores de anúncios. A Grumft e o Gnet otimizam a entrega de seus scripts. 

O Ad manager rastreia o viewability dos sites da rede da Grumft e evita tarefas longas. Portanto, quando a soma do tempo de execução é longa, o Total Blocking Time (TBT) e o FID não são afetados. Confira algumas otimizações que podem ser feitas:

1. Reduza scripts de anúncios e provedores, concentrando-se em uma única pilha, se possível.
2. Carregue todos os scripts com adiar ou assíncrono.
3. Use regras CSS simples.
4. Evite tarefas de longa duração e use o padrão ocioso até urgente .
5. Trabalhe com RequestAnimationFrame sempre que o layout for afetado.

Leia mais: Anuncios em vídeo: tudo que você precisa saber

Otimizando LCP

O tempo de renderização da maior imagem ou bloco de texto visível na janela de visualização influencia no carregamento de anúncios de duas maneiras: 1)  explicitamente reconhecendo um anúncio como parte do conteúdo 2) indiretamente competindo por largura de banda da rede ou afetando o carregamento de uma imagem que realmente faça parte do conteúdo (por exemplo a imagem destacada) não possa carregar rapidamente.

Você pode remover os anúncios retangulares médios dos locais de anúncio superiores para otimizar o CLS, fazendo que os anúncios não se tornarem o elemento principal, priorizando as imagens e fontes principais acima da dobra e otimizr o caminho crítico para ter precedência sobre scripts e anúncios publicitários. Essa priorização ajuda o LCP a não ser afetado pelos anúncios.

Além dessas otimizações, você também pode seguir outras práticas recomendadas:

1. CSS separado para o caminho de renderização crítico e coloque-o no cabeçalho.
2. Pré-carregar as fontes, scripts e imagens mais importantes.
3. Evitar imagens de lazy load acima da dobra.
4. Usar “font-display=”swap”.

Consentimento LGPD e Core Web Vitals

A caixa de diálogo de consentimento geralmente afeta negativamente o Core Web Vitals. Tal como acontece com os anúncios, existem duas maneiras pelas quais uma caixa de diálogo de consentimento pode influenciar o CWV:

• Se a caixa de diálogo for entendida como parte do conteúdo ou se causar mudanças de layout.
• Competir por uso de banda ao ser entendida como conteúdo e bloquear o caminho para o conteúdo ou atrasar os anúncios até que haja consentimento, causando mudanças de layout.

Portanto, é importante que você evite algumas armadilhas simples ao solicitar consentimento aos usuários:

• Que os scripts de consentimento sejam carregados de forma assíncrona para não bloquear recursos críticos.
• O consentimento é formatado de forma que grandes elementos não sejam elegíveis como o maior elemento no LCP.
• Use “position: fixed” na sobreposição de consentimento para evitar mudanças.
• Embora os anúncios sejam exibidos somente após o consentimento, os espaços em branco adequados são preservados com antecedência, evitando mudanças de layout quando os anúncios são carregados.
• Certificar-se de que a exibição e o posicionamento da caixa de diálogo de consentimento não acione mudanças de layout. Aqui pode ser que você encontre a opção de bloqueio de rolagem do provedor de serviços, que desabilita a rolagem enquanto mostra o consentimento ao mover o conteúdo principal do artigo na rolagem, causando mudanças de layout.

Mesmo depois disso, ainda poderá existir discrepâncias entre o CLS de campo e de laboratório. Enquanto o CLS do laboratório está próximo de zero, os valores de campo podem estar acima dos limites. Você precisa verificar as mudanças de layout dentro do iframe de consentimento, que atualmente só são capturados corretamente nos dados de campo. É importante que você continue trabalhando para melhorar esse problema.

Modelos de assinatura e Core Web Vitals

Muitos publishers estão adotando modelos de assinatura para financiar o jornalismo. Este modelo é relevante para Core Web Vitals, pois as pessoas não assinarão sites com experiência de usuário ruim. Além disso, os assinantes não esperam ver anúncios no conteúdo pago, mas ocultar anúncios pode causar mudanças de layout. Por isso, site precisa verificar se os usuários têm direito a visualizar o conteúdo e a exibir anúncios. Essas verificações podem causar latências adicionais, levando a alterações de conteúdo ou uma experiência do usuário insatisfatória.

Se você trabalha com esse modelo, é importante investigar diferentes maneiras de consultar e armazenar direitos para reduzir latências e mudanças de layout.

A consulta inicial de direitos sempre causou latências e, portanto, se a consulta de direitos demorar muito, o site exibirá o último estado em cache. Mas para novos assinantes, isso significa um pequeno risco de um usuário pagante ver os anúncios uma vez. Os usuários que acabaram de encerrar uma assinatura podem ver um carregamento sem anúncios antes da atualização dos direitos armazenados localmente. Depois de conhecidos, os direitos são armazenados localmente usando a API LocalStorage, para evitar latências adicionais e mudanças de layout durante a navegação futura.

Resultados 

É possível que essas otimizações melhore a sua pontuação do PageSpeed ​​Insights. Embora essas otimizações melhorem a experiência da página, também precisam ser feitas pensando no negócio e com o objetivo de aprimorar a experiência do anúncio, viewability e a receita. Além do aumento de CPM e melhoria no viewability, é possível que você note aumento do tráfego, pois essas otimizações impulsionam o envolvimento do usuário, diminuindo as taxas de rejeição. 

Leia mais: Privacidade de Dados: estudo revela que consumidores e profissionais de marketing querem as mesmas coisas

Futuro sem cookies de terceiros

Existe uma tendência global de que a segmentação contextual por meio do conteúdo, combinada com uma boa experiência do usuário e experiência da página (incluindo  viewability,). Essa pode ser a chave para o sucesso dos publishers de notícias no futuro sem cookies de terceiros. 

Portanto, é importante que você não se limite ao Core Web Vitals, mas busque implementar muitos recursos modernos da web, como Progressive Web Apps (PWA), conteúdo offline, modo escuro, API de compartilhamento da Web entre outros.

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.