O site relançado também tem uma visibilidade de anúncios de mais de 75%, taxas de rejeição reduzidas em 50% e visualizações de página aumentadas em 27%.
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 uma monetização melhor com base em publicidade. Eles fizeram uma jornada para relançar o site, aplicando práticas recomendadas de performance comuns e otimizando as tags de anúncios e posições em paralelo. O compromisso com uma ótima UX e páginas rápidas provou ser um caminho para otimizar o engajamento e as receitas de publicidade, com um aumento de 27% nas visualizações de página, uma visibilidade de anúncios acima de 75% e uma melhoria de 18% nas receitas de publicidade.
27%
Aumento nas visualizações de página
18%
Aumento na receita de publicidade
75%
Visibilidade do anúncio
O desafio
Como muitos outros editores 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 anúncios. Os principais desafios que eles enfrentaram foram:
- Shift de layout cumulativo (CLS) alto devido a mudanças de layout acionadas por anúncios, principalmente de espaços de vários tamanhos e banners de topo.
- Maior exibição de conteúdo (LCP) atrasada devido a anúncios serem a pintura mais longa ou por consumir largura de banda do carregamento da imagem principal.
- First Input Delay (FID) alto causado por JavaScript de terceiros necessário para publicidade, lances de encabeçamento e outras finalidades.
- Efeitos colaterais nas Core Web Vitals de caixas de diálogo de consentimento controladas por fornecedores terceirizados, que também foram adicionadas aos deslocamentos de layout e podem ser detectadas como pinturas tardias.
Como otimizar um site de notícias para as Core Web Vitals
Quando a Netzwelt começou a trabalhar com as Core Web Vitals, ela percebeu rapidamente que a otimização das Core Web Vitals não precisa afetar negativamente os anúncios, mas pode ser usada como uma oportunidade para melhorar a visibilidade do anúncio. Por isso, a equipe da Netzwelt otimizou as Core Web Vitals para aumentar a visibilidade do anúncio acima de 75% e atrair publicidade de maior valor. A média global de anúncios de display é inferior a 50%.
Como otimizar a CLS
Os anúncios geralmente são carregados com atraso (às vezes de forma consciente, com o carregamento lento), e o tamanho real deles nem sempre é conhecido com antecedência devido a posicionamentos de anúncios fluidos e de vários tamanhos.
O problema pode ser dividido em dois: anúncios acima e abaixo da dobra.
Os anúncios acima do nível do olho podem causar saltos de layout enormes devido ao carregamento tardio com tamanhos desconhecidos. Bloquear o maior espaço que eles precisam pode resultar em uma experiência do usuário ruim, enquanto pedir tamanhos fixos aos anunciantes pode reduzir a receita de publicidade. A Netzwelt resolveu esse problema fixando o anúncio de cima e removendo alguns dos tamanhos de banner maiores permitidos. O anúncio sobreposto evita saltos de layout para anúncios de tamanhos diferentes. Embora os tamanhos qualificados reduzidos afetem as vendas de anúncios, a 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, e as 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, cria uma visibilidade ruim do anúncio e piora a experiência da página.
- Um banner que é carregado no momento em que o usuário rola a tela pode apresentar saltos de conteúdo adicionais.
Para manter uma boa experiência na página e uma alta visibilidade do anúncio, a Netzwelt implementou o carregamento lento e reservou espaço para o tamanho do menor denominador comum. Em uma zona de vários tamanhos, os banners solicitados nos tamanhos de 300 x 250 a 300 x 600 reservaram 250 px de altura. Isso eliminou as mudanças de layout para os tamanhos menores e reduziu drasticamente as mudanças para banners maiores. Essa abordagem não é ideal, mas é um bom começo e um bom compromisso.
Para otimizar ainda mais, a Netzwelt usou o Intersection Observer e a API Network Information para controlar as posições dos anúncios e reduzir as mudanças de layout. Diferentes posições de anúncio 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 do anúncio 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 dispositivo e tipo de rede derivado de IP. Essa estratégia de carregamento adaptativo reduz a CLS principalmente para usuários com conexões de Internet lentas.
Como otimizar o FID
O First Input Delay pode parecer um problema para editores de notícias, já que os anúncios geralmente vêm 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 de 2020, muitos sites têm resposta rápida o suficiente. Parte disso se deve ao carregamento tardio do JavaScript de publicidade (após a primeira entrada), ao armazenamento em cache (por exemplo, o tratamento do armazenamento em cache do código v8) ou à otimização pelos fornecedores de anúncios. Os rastreadores de visibilidade do fornecedor evitam tarefas longas. Portanto, mesmo quando a soma do tempo de execução é longa, o Tempo de bloqueio total (TBT, na sigla em inglês) e o FID não são afetados. Embora o FID não fosse um grande problema para a 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.
- Carregamento de todos os scripts com "defer" ou "async".
- Usar o Webpack ou tecnologias semelhantes para desempacotamento e desempacotamento.
- Usando regras CSS simples semelhantes ao BEM.
- Evite tarefas de longa duração e use o padrão idle-until-urgent.
- Trabalhar com RequestAnimationFrame sempre que o layout for afetado.
Otimização da LCP
A "Maior exibição de conteúdo" pode ser influenciada por anúncios de duas maneiras: explicitamente, reconhecendo um anúncio como a pintura maior, e indiretamente, congestionando a largura de banda da rede ou afetando o caminho crítico para que a pintura maior (por exemplo, uma imagem principal) não seja carregada rápido o suficiente.
A Netzwelt já havia removido os anúncios retangulares médios dos espaços de anúncios principais ao otimizar para CLS. Isso também teve o benefício 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 e fontes principais usadas acima da dobra e priorizou o caminho crítico em relação a scripts e anúncios publicitários. Essa priorização ajudou a LCP a não ser afetada pelos anúncios.
Além dessas otimizações, a Netzwelt seguiu outras práticas recomendadas:
- Separou o CSS para o caminho de renderização crítico e o colocou no cabeçalho.
- Carreguei as fontes, scripts e imagens mais importantes.
- Evitou o carregamento lento de imagens acima da dobra.
font-display="swap"usados.
Consentimento do GDPR e Core Web Vitals
As caixas de consentimento geralmente afetam negativamente as Core Web Vitals. Assim como nos anúncios, há duas maneiras de uma caixa de diálogo de consentimento influenciar as Core Web Vitals:
- Explicitamente, se for detectado como a pintura maior ou causar mudanças de layout.
- Implicitamente, roubando largura de banda da pintura mais longa, bloqueando o caminho crítico para a pintura mais longa ou atrasando os anúncios até que o consentimento seja concedido, o que pode, por sua vez, acionar mudanças de layout.
A Netzwelt trabalha com um provedor de consentimento de terceiros, que também implementou otimizações. Primeiro, a Netzwelt evitou as armadilhas mais óbvias:
- Os scripts de consentimento são carregados de forma assíncrona para não bloquear recursos essenciais.
- O consentimento é formatado para que elementos grandes não sejam qualificados como o maior elemento no LCP.
- A sobreposição de consentimento usa
position: fixedpara evitar mudanças. - Embora os anúncios sejam mostrados somente após o consentimento, o espaço em branco adequado é preservado com antecedência para evitar mudanças no layout quando os anúncios são carregados.
- Verifique se a exibição e o posicionamento da caixa de diálogo de consentimento não acionam mudanças de layout. Um problema encontrado e corrigido aqui foi a opção de bloqueio de rolagem do provedor de serviços, que desativava a rolagem enquanto o consentimento era mostrado movendo o conteúdo principal do artigo na rolagem, causando mudanças no layout.
Depois desse trabalho, ainda havia grandes discrepâncias entre a CLS de campo e a de laboratório. Embora a CLS do laboratório estivesse próxima de zero, os valores do campo estavam significativamente acima dos limites. Após a investigação, o culpado foi o layout do iframe de consentimento, que atualmente só é capturado corretamente nos dados de campo. A Netzwelt continua trabalhando com o provedor de consentimento de terceiros para melhorar esse problema.
Modelos de assinatura de notícias e Core Web Vitals
As editoras de notícias estão migrando para modelos de assinatura para financiar o jornalismo. Esse modelo é relevante para as Core Web Vitals, porque as pessoas não vão se inscrever em sites com uma experiência do 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 no layout. O site precisa verificar se os usuários têm direito de acessar o conteúdo e se devem mostrar anúncios. Essas verificações podem causar latências adicionais, levando a mudanças de conteúdo ou uma experiência do usuário ruim.
A Netzwelt usa um modelo em que o conteúdo é sempre sem custo financeiro, mas os assinantes não veem anúncios. Eles investigaram maneiras diferentes de consultar e armazenar direitos para reduzir latências e mudanças de layout.
Uma consulta inicial de direito sempre causava latências. Portanto, se a consulta dos direitos demorar muito, o site vai mostrar o último estado armazenado em cache. Para novos assinantes, isso significa um pequeno risco de um usuário pagante ver anúncios uma vez. Os usuários que estão encerrando uma assinatura podem ver uma carga 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 latências e mudanças de layout adicionais durante a navegação futura.
Resultados da otimização
Os resultados das otimizações da Netzwelt falam por si. A pontuação do PageSpeed Insights é incomparável entre as empresas de notícias do mundo todo:
As otimizações melhoraram a experiência da página, mas foram feitas pensando no negócio e melhoraram a experiência do anúncio, a visibilidade do anúncio e a receita. Depois de relançar a página otimizada, a Netzwelt observou um aumento de 20% a 30% no CPM, com uma visibilidade de anúncios acima de 75%. No entanto, a Netzwelt assume que o aumento da receita geral seja ainda maior. O tráfego aumentou desde o relançamento, provavelmente impulsionado pelo maior engajamento do usuário e taxas de rejeição mais baixas devido à melhoria da UX. Esses efeitos são difíceis de quantificar e definir em relação causal ao relançamento, já que o tráfego flutua naturalmente e também há efeitos da pandemia global. Esses efeitos indiretos são um dos motivos pelos quais a Netzwelt sempre analisa todos os números ao revisar o site, não apenas o CPM, que pode ser enganoso. As métricas de UX e das CWV, em combinação com todas as métricas relacionadas a anúncios, mostram a situação real.
O que esperar no futuro
A Netzwelt acredita que, em um futuro sem cookies de terceiros, a segmentação contextual pelo conteúdo, combinada com uma boa experiência de página e UX (incluindo a visibilidade do anúncio), é a chave para o sucesso como editor de notícias.
Portanto, a Netzwelt não para com as Core Web Vitals, mas vai além ao implementar muitos recursos modernos da Web, como Progressive Web Apps (PWA), conteúdo off-line, modo escuro, a API Share da Web e atividades confiáveis na Web (TWA), usando a nova API Digital Goods.