O site relançado também teve uma visibilidade de anúncios superior a 75%, uma taxa de rejeição reduzida em 50% e um aumento de 27% nas visualizações de página.
Quando o Google anunciou a iniciativa das Core Web Vitals, a editora alemã Netzwelt percebeu rapidamente o potencial dessas novas métricas para uma ótima experiência na página e melhoria na monetização com base em publicidade. A empresa relançou o site, aplicando práticas recomendadas de performance comuns e otimizando as tags de anúncio e as posições ao mesmo tempo. O compromisso com uma ótima UX e páginas rápidas provou ser um caminho para otimizar o engajamento e as receitas de anúncios, com um aumento de 27% nas visualizações de página, na visibilidade de anúncios acima de 75% e na melhoria das receitas de publicidade em 18%.
27%
de aumento nas visualizações de página
18%
de aumento na receita de publicidade
75%
Visibilidade do anúncio
O desafio
Como muitas outras empresas de notícias, a Netzwelt teve dificuldade para encontrar o equilíbrio certo entre otimizar a experiência do usuário e a velocidade da página e manter altas receitas de publicidade. Os principais desafios encontrados foram:
- Alta Mudança de layout cumulativa (CLS) devido a mudanças de layout acionadas por anúncios, especialmente de slots de vários tamanhos e banners superiores.
- A Maior exibição de conteúdo (LCP, na sigla em inglês) está atrasada porque os anúncios são a maior exibição ou porque eles estão pegando a largura de banda do carregamento da imagem principal.
- Alta latência na primeira entrada (FID, na sigla em inglês) causada pelo JavaScript de terceiros necessário para publicidade, lances de cabeçalho e outras finalidades.
- Efeitos colaterais nas Core Web Vitals de caixas de diálogo de consentimento controladas por fornecedores terceirizados, que também são adicionadas a mudanças de layout e podem ser detectadas como maiores exibições tardias.
Otimizar um site de notícias para as Core Web Vitals
Quando a Netzwelt começou a trabalhar nas Core Web Vitals, ele percebeu rapidamente que a otimização das Core Web Vitals não precisa afetar a publicidade negativamente, mas pode ser usada como uma oportunidade para melhorar a visibilidade de anúncios. Portanto, a equipe da Netzwelt otimizou as Core Web Vitals para aumentar a visibilidade de anúncios acima de 75% e atrair publicidade de maior valor. A média global de anúncios de display é menor que 50%.
Como otimizar a CLS
Muitas vezes, os anúncios carregam com atraso (às vezes, conscientemente por meio do carregamento lento), e o tamanho real deles geralmente não é conhecido com antecedência devido a posicionamentos fluidos e de vários tamanhos.
O problema pode ser dividido em dois: anúncios acima e abaixo da dobra.
Os anúncios acima da dobra podem causar grandes saltos de layout devido ao carregamento atrasado de tamanhos desconhecidos. Bloquear o maior espaço necessário pode levar a uma UX ruim, enquanto pedir aos anunciantes tamanhos fixos pode reduzir a receita de publicidade. A Netzwelt resolveu esse problema tornando o anúncio superior aderente e removendo 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, uma melhor visibilidade compensa isso facilmente.
Os dados históricos e os testes A/B ajudaram a Netzwelt a encontrar o tamanho e o posicionamento certos para diferentes dispositivos e tamanhos de tela, além das regras de mídia CSS usadas para reservar espaço.
Os anúncios abaixo da dobra oferecem espaço para melhorias significativas:
- Um banner que não é visto, mas carregado gera baixa visibilidade do anúncio e piora a experiência na página.
- Um banner que é carregado no momento em que um usuário rola sobre ele pode introduzir saltos de conteúdo adicionais.
Para manter uma boa experiência na página e alta visibilidade de anúncios, a Netzwelt implementou o carregamento lento e o espaço reservado para o tamanho do menor denominador comum. Em uma zona com vários tamanhos, os banners solicitados nos tamanhos 300 x 250 a 300 x 600, reservados de 250 px de altura. Isso eliminou mudanças de layout para os tamanhos menores e as reduziu consideravelmente para banners maiores. Essa abordagem não é ideal, mas é um começo e um bom meio-termo.
Para otimizar ainda mais, a Netzwelt usou o Intersection Observer e a API Network Information (link em inglês) para controlar as posições de anúncios e reduzir as mudanças de layout. Diferentes posições de anúncios e estratégias de carregamento lento 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 dos anúncios e minimizar 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 tipo de rede derivado de dispositivo e IP. Essa estratégia de carregamento adaptável reduz especialmente a CLS para usuários com conexões de Internet lentas.
Como otimizar a FID
A latência na primeira entrada pode parecer um problema para empresas de notícias, já que a publicidade geralmente vem com muitas outras bibliotecas JavaScript. E parece haver um impacto negativo ao analisar dados de laboratório como o Lighthouse. No entanto, analisando os dados de campo no Almanaque da Web 2020 (em inglês), muitos sites têm resposta suficientemente rápida. Parte disso se deve à publicidade do carregamento de JavaScript atrasado (após a primeira entrada), ao armazenamento em cache correto (por exemplo, receber o tratamento de armazenamento em cache de código v8) ou à boa otimização dos fornecedores de anúncios. Os rastreadores de visibilidade do fornecedor evitam tarefas longas. Portanto, mesmo quando a soma do ambiente de execução é longa, o tempo total de bloqueio (TBT, na sigla em inglês) e a FID não são afetados. Embora a FID não tenha sido um grande problema para o Netzwelt, ainda havia algumas otimizações a serem feitas:
- Reduzir scripts e provedores de anúncios, concentrando-se em uma única pilha, se possível.
- Carregar todos os scripts com adiamento ou assíncrono.
- Usar o webpack ou tecnologias semelhantes para atravessar árvores e desagrupar o app.
- Usar regras CSS simples, como as de BEM.
- Evite tarefas de longa duração e use o padrão idle-until-urgent.
- Trabalhar com RequestAnimationFrame sempre que o layout for afetado.
Otimizar a LCP
A Maior exibição de conteúdo pode ser influenciada por anúncios de duas maneiras: reconhecendo explicitamente um anúncio como a maior exibição e indiretamente congestionando a largura de banda da rede ou afetando o caminho crítico, de modo que a maior exibição real (por exemplo, uma imagem principal) não possa ser carregada com rapidez suficiente.
A Netzwelt já havia removido anúncios retangulares médios dos espaços de anúncios superiores ao otimizar para o CLS. Isso tinha a vantagem adicional de os anúncios não se tornarem o maior elemento.
A Netzwelt segue uma política rígida para priorizar o conteúdo acima dos anúncios. A Netzwelt priorizou as imagens principais e as fontes usadas acima da dobra e otimizou o caminho crítico para ter precedência sobre scripts e anúncios de publicidade. Essa priorização ajudou a LCP a não ser afetada pelos anúncios.
Além dessas otimizações, o Netzwelt seguiu outras práticas recomendadas:
- separou o CSS para o caminho crítico de renderização e coloque-o no cabeçalho.
- Foram pré-carregadas as fontes, scripts e imagens mais importantes.
- Evitar o carregamento lento de imagens acima da dobra.
- Usou
font-display="swap".
Consentimento do GDPR e as Core Web Vitals
Caixas de diálogo de consentimento geralmente afetam negativamente as Core Web Vitals. Assim como acontece com anúncios, há duas maneiras de uma caixa de diálogo de consentimento influenciar as Core Web Vitals:
- explicitamente se for detectada como a maior exibição ou causar mudanças de layout;
- De maneira implícita, ao roubar a largura de banda da maior exibição, bloquear o caminho crítico para a maior exibição ou atrasar os anúncios até que o consentimento seja dado, o que pode acionar mudanças de layout.
O Netzwelt trabalha com um provedor de consentimento terceirizado, que também implementou otimizações. Primeiro, o Netzwelt se certificou de evitar as armadilhas simples:
- Os scripts de consentimento são carregados de forma assíncrona para não bloquear recursos críticos.
- O consentimento é formatado para que elementos grandes não sejam qualificados como o maior elemento na LCP.
- A sobreposição de consentimento usa
position: fixedpara evitar mudanças. - Embora os anúncios sejam exibidos somente após o consentimento, o espaço em branco adequado é preservado com antecedência para evitar mudanças de layout quando os anúncios são carregados.
- Garantir que a exibição e o posicionamento da caixa de diálogo de consentimento não acionem mudanças de layout Um problema encontrado e corrigido foi a opção de bloqueio de rolagem do provedor de serviços, que desativava a rolagem enquanto o consentimento era mostrado ao mover o conteúdo principal do artigo na rolagem, o que causava mudanças de layout.
Após esse trabalho, ainda havia grandes discrepâncias entre a CLS de campo e de laboratório. Embora a CLS do laboratório estivesse perto de zero, os valores dos campos estavam significativamente acima dos limites. Após a investigação, o culpado foram as mudanças de layout no iframe de consentimento, que, no momento, são capturadas corretamente apenas nos dados de campo. A Netzwelt continua trabalhando com o provedor de consentimento terceirizado para melhorar esse problema.
Modelos de assinatura de notícias e Core Web Vitals
As empresas de notícias estão mudando para modelos de assinatura para financiar o jornalismo. Esse modelo é relevante para as Core Web Vitals porque as pessoas não se inscrevem em sites com uma experiência ruim do usuário. 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. O site precisa verificar se os usuários têm o direito de visualizar o conteúdo e se podem mostrar anúncios. Essas verificações podem causar mais latências, levando a mudanças de conteúdo ou uma experiência ruim para o usuário.
O Netzwelt está usando um modelo em que o conteúdo é sempre sem custo financeiro, mas os assinantes não veem anúncios. A empresa pesquisou diferentes maneiras de consultar e armazenar direitos para reduzir latências e mudanças de layout.
Uma consulta inicial de direito sempre causou latências e, portanto, se a consulta dos direitos demorar muito, o site exibirá o último estado armazenado em cache. Para novos assinantes, isso significa um pequeno risco de um usuário pagante ver os anúncios uma vez. Os usuários que apenas encerrarem uma assinatura poderão ver um carregamento sem anúncios antes da atualização dos direitos armazenados localmente. Depois que os direitos são conhecidos, eles são armazenados localmente usando a API LocalStorage, para evitar outras latências e mudanças de layout durante a navegação futura.
Resultados da otimização
Os resultados das otimizações do Netzwelt falam por si. A pontuação do PageSpeed Insights é incomparável entre os editores de notícias do mundo todo:
As otimizações melhoraram a experiência na página, mas foram feitas pensando nos negócios e melhorando a experiência de anúncios, a visibilidade dos anúncios e a receita. Depois de relançar a página otimizada, a Netzwelt teve aumentos no CPM de 20% a 30%, com uma visibilidade de anúncios acima de 75%. No entanto, a Netzwelt presume que o aumento geral da receita seja ainda maior. O tráfego aumentou desde o relançamento, provavelmente impulsionado por maior engajamento do usuário e taxas de rejeição mais baixas devido à UX aprimorada. Esses efeitos são difíceis de quantificar e definir em relação causal com o relançamento, já que o tráfego flutua naturalmente e também há efeitos da pandemia global. Esses efeitos indiretos são uma das razões pelas quais a Netzwelt sempre analisa todos os números ao analisar seu site, não apenas o CPM, que podem ser enganosos. As Core Web Vitals e as métricas de UX, em combinação com todas as métricas relacionadas a anúncios, mostram o cenário real.
De olho no futuro
A Netzwelt acredita que, em um futuro sem cookies de terceiros, a segmentação contextual pelo conteúdo, combinada com boa UX e experiência na página (incluindo a visibilidade de anúncios), é a chave para o sucesso como empresa de notícias.
Portanto, a Netzwelt não para com as Core Web Vitals, mas vai além implementando muitos recursos modernos da Web, como Progressive Web Apps (PWA), conteúdo off-line, modo escuro, API Web Share e Trusted Web Activities (TWA, na sigla em inglês) usando a nova API Digital Goods.