Carregar anúncios com eficiência sem afetar a velocidade da página

No mundo digital de hoje, a publicidade on-line é uma parte essencial da Web sem custo financeiro que todos nós adoramos. No entanto, anúncios mal implementados podem levar a uma experiência de navegação mais lenta, frustrar os usuários e reduzir o engajamento. Saiba como carregar anúncios com eficiência sem afetar a velocidade da página, garantindo uma ótima experiência do usuário e maximizando as oportunidades de receita para proprietários de sites.

Markus Bordihn
Markus Bordihn

Os sites dependem muito da publicidade on-line como fonte principal de receita. No entanto, a presença de anúncios em sites às vezes pode prejudicar a experiência do usuário e o desempenho geral da página. Por isso, é vital encontrar o equilíbrio entre a monetização e o desempenho para proprietários de sites e anunciantes, além da experiência do usuário.

Considere um site que coloca anúncios extensivamente em seu conteúdo, com o objetivo de gerar uma alta receita. No entanto, o grande número de anúncios frustra os usuários, levando a uma experiência insatisfatória e a altas taxas de rejeição. Apesar do potencial de receita substancial, o abandono prejudica muito o sucesso do site.

Por outro lado, considere um site sem anúncios. Esse ambiente sem anúncios atrai um número significativo de usuários devido ao carregamento rápido e à experiência de navegação perfeita. No entanto, sem uma estratégia de monetização, o site tem dificuldade para gerar receita, o que pode prejudicar a sustentabilidade e o crescimento a longo prazo.

Ambos os cenários ilustram a importância de equilibrar monetização, usuários e desempenho.

Como aproveitar as Core Web Vitals

Passar nas Core Web Vitals é essencial para carregar anúncios sem afetar negativamente a velocidade da página. As Core Web Vitals, que abrangem métricas como Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e Interaction to Next Paint (INP), são métricas de experiência do usuário que medem a qualidade da experiência do usuário no seu site.

Maior exibição de conteúdo (LCP)

É essencial focar na otimização da LCP, já que essa métrica mede o tempo que leva para o maior elemento com conteúdo ficar visível na janela de visualização. Ao minimizar o tempo de carregamento do conteúdo do anúncio e priorizar técnicas de carregamento assíncrono, os proprietários de sites podem reduzir a LCP e o tempo de renderização dos elementos de conteúdo mais proeminentes em uma página.

Interação com a próxima exibição (INP)

Em segundo lugar, melhorar a INP é crucial para uma experiência do usuário responsiva. A INP mede a latência de cada clique, toque e interação do teclado que ocorre ao longo da vida útil de uma página. O valor resultante é, na maioria das vezes, a interação que levou mais tempo para ser concluída e representa a capacidade geral da página de responder rapidamente às interações do usuário.

Anúncios que atrasam as interações do usuário afetam negativamente a INP. Isso pode frustrar os usuários, criando experiências lentas ou até mesmo interrompidas em casos extremos. A implementação do carregamento lento para anúncios e o adiamento da execução de JavaScript não essencial podem reduzir o INP da página e melhorar a capacidade de resposta em geral.

Cumulative Layout Shift (CLS)

Por fim, a CLS mede a estabilidade visual de uma página medindo a quantidade de mudanças inesperadas de layout que ocorrem durante o carregamento da página. Os anúncios que são carregados ou redimensionados dinamicamente podem resultar em instabilidade no layout, resultando em experiências do usuário insatisfatórias, em que as pessoas perdem o controle de onde estão em uma página ou até tocam sem querer nos elementos errados devido a mudanças inesperadas de layout. Para atenuar isso, os proprietários de sites precisam otimizar a CLS para garantir que os anúncios tenham espaço reservado e evitar mudanças de layout, e os tamanhos dos anúncios precisam ser otimizados para evitar refluxos repentinos de conteúdo.

Estruturar sua página da Web em blocos de conteúdo distintos

Estruturar sua página da Web com blocos de conteúdo para texto, imagem e anúncio, além de usar a propriedade content-visibility: do CSS, pode melhorar significativamente o tempo geral de renderização em navegadores mais recentes.

Ao aplicar estrategicamente a propriedade content-visibility: a esses blocos de conteúdo, você otimiza o processo de renderização para texto, imagem e conteúdo do anúncio. Isso garante que apenas o conteúdo na janela de visualização seja totalmente renderizado, resultando em um carregamento de página inicial mais rápido e interações do usuário mais suaves. Essa melhoria de desempenho é particularmente valiosa ao lidar com páginas longas ou com muitos anúncios.

Priorize espaços de anúncio importantes

Nem todos os espaços de anúncio são iguais. Por exemplo, os espaços do anúncio acima da dobra geralmente são mais valiosos do que os que estão abaixo da dobra em termos de visibilidade e monetização. Isso ocorre porque os anúncios acima da dobra têm mais chances de serem vistos pelos usuários, já que são visíveis sem rolar na primeira janela de visualização. Os anúncios abaixo da dobra ficam visíveis depois que o usuário rola a página o suficiente para vê-los.

Anúncios acima da dobra

Uma representação visual da página "acima da dobra" conceito de anúncio.

Os espaços de anúncio acima da dobra referem-se à parte de uma página da Web que é visível sem rolagem e têm valor significativo na publicidade digital. Essas posições privilegiadas são consideradas valiosas por vários motivos:

  • Os anúncios colocados acima da dobra ficam imediatamente visíveis para os usuários após o carregamento de uma página da Web. Os usuários têm mais chances de notar e interagir com esses anúncios, o que resulta em taxas de cliques mais altas.
  • Os anunciantes geralmente consideram a parte superior de uma página da Web o bem mais valioso. Essa é a primeira impressão que os usuários têm ao acessar um site, o que a torna uma área crucial para a exibição de anúncios premium e de alto impacto.
  • Os anúncios acima da dobra têm as maiores taxas de visibilidade porque estão na linha de visão direta do usuário. Isso garante que a maioria dos usuários que visitam a página veja esses anúncios sem precisar rolar a tela.

No entanto, é importante encontrar um equilíbrio entre a monetização e a experiência do usuário ao usar os espaços de anúncio acima da dobra na visualização inicial. Aqui estão algumas considerações importantes.

  • Os espaços de anúncio da primeira tela precisam ser carregados o mais rápido possível na janela de visualização inicial do usuário. Anúncios com carregamento lento podem afetar negativamente a experiência do usuário e aumentar as taxas de rejeição. Otimizar os tempos de carregamento de anúncios é crucial para garantir uma boa experiência do usuário e de navegação.
  • Embora os posicionamentos de anúncios acima da dobra sejam valiosos, é importante não sobrecarregar esse espaço com muitos anúncios. O excesso de anúncios atrapalha a página, prejudica a leitura do conteúdo e prejudica a experiência do usuário. Procure equilibrar a monetização e manter um layout claro e fácil de usar.
  • Verifique se os espaços de anúncio acima da dobra são compatíveis com diferentes tamanhos de tela e dispositivos. As práticas de design responsivo podem ajudar a manter um layout consistente e visualmente atraente, independentemente do tamanho da tela do usuário.

Anúncios abaixo da dobra

Uma representação visual do conteúdo "abaixo da dobra" conceito de anúncio.

Os espaços de anúncio abaixo da dobra, ou seja, anúncios posicionados na parte de uma página da Web que só se torna visível após a rolagem para baixo, também têm um valor considerável no mundo da publicidade digital. Esses canais oferecem vantagens exclusivas que complementam os posicionamentos acima da dobra.

Os anúncios localizados abaixo da dobra se beneficiam dos usuários que rolam a tela para explorar mais conteúdo. Esses canais chamam a atenção de usuários engajados que procuram ativamente mais informações, o que os torna valiosos para marcas que querem transmitir mensagens ou narrativas mais complexas.

  • Os espaços de anúncio que não são inicialmente visíveis podem se alinhar com o conteúdo ao lado, oferecendo uma oportunidade de relevância contextual. Esse alinhamento pode gerar um engajamento maior do usuário, à medida que eles descobrem anúncios relacionados ao conteúdo que estão explorando.
  • Quando projetados com atenção, os anúncios abaixo da dobra podem se integrar perfeitamente ao conteúdo ao redor, aparecendo menos invasivos para os usuários. Essa integração, também conhecida como publicidade nativa, pode resultar em uma experiência do usuário mais harmoniosa.
  • Os posicionamentos de anúncios que exigem rolagem oferecem design mais criativo e flexibilidade de formato, com amplo espaço e liberdade para testar. Anúncios em vídeo, elementos interativos e imagens maiores podem ser carregados lentamente para atrair a atenção do usuário sem prejudicar a experiência.

No entanto, as seguintes considerações devem ser feitas para posicionamentos de anúncios abaixo da dobra:

  • Embora os posicionamentos de anúncios abaixo da dobra possam ser eficazes, é essencial garantir que os usuários sejam incentivados a rolar a tela para visualizá-los. A implementação de indicações visuais ou teasers de conteúdo pode incentivar os usuários a explorar ainda mais, aumentando a probabilidade de visibilidade do anúncio.
  • O posicionamento dos anúncios abaixo da dobra não deve comprometer a qualidade ou a legibilidade do conteúdo. Manter o equilíbrio entre anúncios e conteúdo para evitar sobrecarregar os usuários e garantir uma experiência positiva aos usuários.
  • Ao contrário dos posicionamentos de anúncios acima da dobra, os anúncios abaixo da dobra talvez não precisem carregar imediatamente. Atrasar o carregamento desses anúncios até que eles estejam próximos da janela de visualização do usuário pode ajudar a melhorar a velocidade geral de carregamento da página e reduzir o tempo de renderização inicial da página.

Quando usados estrategicamente, os anúncios abaixo da dobra podem complementar os anúncios acima da dobra e fornecer uma plataforma para formatos de anúncios criativos e relevância contextual. No entanto, otimizar a visibilidade, equilibrar o conteúdo e gerenciar o tempo de carregamento do anúncio são considerações importantes para garantir uma experiência positiva para o usuário.

Práticas recomendadas atuais para a Tag do editor do Google (GPT):

Anúncios de carregamento lento, quando apropriado

Uma visualização do carregamento lento em comparação com os recursos de não carregamento lento. Quando os recursos têm carregamento lento, a largura de banda é conservada durante o carregamento da página e os recursos são adiados até o ponto em que é mais provável que o usuário os veja.

O carregamento lento é uma técnica que adia o carregamento de recursos não críticos até que eles sejam necessários. Aplicar o carregamento lento a anúncios que não são imediatamente visíveis (ou seja, anúncios abaixo da dobra) garante que eles sejam carregados somente quando forem visualizados, conservando a largura de banda e melhorando a velocidade geral da página. Os navegadores agora incluem o carregamento lento nativo para iframes com um atributo loading=lazy.

Com a implementação do carregamento lento, os anúncios são buscados dinamicamente quando estão prestes a entrar na janela de visualização do usuário, reduzindo o tempo de carregamento inicial e o tempo total de bloqueio (TBT, na sigla em inglês) (que é altamente correlacionado com o INP) na linha de execução principal nessa parte crucial do ciclo de vida da página, minimizando os impactos negativos na experiência do usuário.

Atualizar anúncios sem atualizar a página

Uma visualização dos anúncios atualizando a página, sem que a página de nível superior seja atualizada.

Outra técnica que pode equilibrar a performance da página com os anúncios de carregamento é a capacidade de atualizar os anúncios a cada 30 a 240 segundos1 sem recarregar a página inteira. Essa abordagem permite atualizações dinâmicas do conteúdo do anúncio sem prejudicar a experiência de navegação do usuário ou causar atrasos desnecessários.

Em apps para dispositivos móveis, a atualização de anúncios em visualizações da Web atuais oferece uma performance melhor em comparação com recarregar a página inteira ou recriar WebViews. Isso minimiza a sobrecarga de dados e recursos, levando a atualizações de conteúdo mais rápidas e a uma experiência do usuário mais tranquila sem a latência associada a começar do zero.

Ao atualizar os anúncios de forma assíncrona, os proprietários de sites podem manter o conteúdo da página intacto e ao mesmo tempo atualizar o conteúdo do anúncio no local e em tempo real. Isso não apenas aumenta a velocidade da página, pois elimina a necessidade de atualizar toda a página, como também garante que os anúncios exibidos permaneçam relevantes e envolventes. Com essa técnica, os proprietários de sites podem encontrar o equilíbrio entre monetização e performance, exibindo conteúdo do anúncio oportuno e envolvente e, ao mesmo tempo, minimizando os efeitos negativos na experiência do usuário.

A atualização dos espaços de anúncio é especialmente valiosa em páginas em que os usuários tendem a permanecer mais tempo, como páginas de receitas, tutoriais de "faça você mesmo" ou outros sites com muito conteúdo. Por exemplo, em uma página de artesanato no estilo "aprenda a fazer", em que os usuários podem passar um tempo considerável seguindo os tutoriais, atualizar os espaços de anúncios estrategicamente durante intervalos entre as etapas ou enquanto visualizam galerias de imagens pode melhorar a experiência do usuário e a receita de publicidade. Da mesma forma, em uma página de receitas, a atualização dos espaços de anúncio depois de os usuários percorrerem a lista de ingredientes ou as instruções pode manter o interesse do usuário.

Priorizar o carregamento assíncrono

Uma das estratégias de maior impacto para aumentar a velocidade da página durante a veiculação de anúncios é o carregamento assíncrono. O carregamento assíncrono carrega anúncios independentemente do conteúdo da página principal. Assim, a página pode continuar a renderização e se tornar interativa sem esperar que os anúncios sejam totalmente carregados. Isso reduz significativamente a percepção do tempo de carregamento, melhorando a satisfação do usuário.

Inclua o atributo async na definição da tag de script. Exemplo:

Google AdSense:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Google AdSense (anúncios automáticos):

<script async data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Tag do editor do Google:

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

Otimize tamanhos, posições e formatos de anúncios

Uma ilustração de dispositivos em vários tamanhos de janela de visualização, com posições de anúncios estilizadas como caixas verdes, cada uma com a palavra &quot;Anúncio&quot;.

O tamanho, a posição e o formato dos anúncios podem ter um impacto significativo na velocidade da página. Anúncios grandes podem deixar o carregamento da página mais lento, deixando os usuários frustrados. Para minimizar esse problema, os proprietários de sites precisam trabalhar em estreita colaboração com os anunciantes para otimizar tamanhos e formatos de anúncios. Incentivar o uso de formatos de imagem compactados e um design eficiente de criativo de anúncio ajuda a reduzir o tamanho dos arquivos sem comprometer a qualidade visual. Essas otimizações não apenas melhoram a velocidade da página, como também minimizam o consumo de dados para usuários com largura de banda limitada.

Better Ads Standards

É essencial aderir ao Better Ads Standard para exibir anúncios, porque isso melhora a experiência do usuário ao reduzir formatos de anúncios invasivos e disruptivos, mas também tem um impacto positivo na posição de exibição do anúncio e no tempo de carregamento da página.

Seguindo esses padrões, é mais provável que os anúncios sejam colocados em posições menos obstrutivas e invasivas, o que pode resultar em um engajamento do usuário e taxas de cliques mais altos.

Além disso, aderir a essas diretrizes também pode resultar em velocidades de carregamento de página mais rápidas, já que formatos de anúncio mais leves e que consomem menos recursos são favorecidos, melhorando o desempenho geral do site e a satisfação do usuário.

Avaliação estratégica de redes de publicidade e provedores

Nem todas as redes de publicidade e provedores são iguais em termos de desempenho. Para garantir a velocidade ideal da página, os proprietários de sites precisam avaliar meticulosamente o desempenho de diferentes redes de publicidade, da implementação de lances de cabeçalho e dos provedores.

Estabelecer parcerias com provedores que priorizam a velocidade e têm um histórico de fornecimento eficiente de conteúdo leve de anúncios pode aumentar significativamente o desempenho da página e melhorar a experiência do usuário.

Conclusão

Atingir o equilíbrio entre monetização e desempenho é crucial para os proprietários de sites que buscam fornecer uma experiência excepcional ao usuário e, ao mesmo tempo, maximizar a receita por meio da publicidade on-line.

Ao usar técnicas como carregamento assíncrono, carregamento lento, otimização de formatos e tamanhos de anúncios, uso do armazenamento em cache inteligente, avaliação cuidadosa das redes de publicidade, lances de cabeçalho e provedores, os proprietários de sites conseguem lidar com os desafios de carregamento de anúncios sem comprometer o desempenho da página. Priorizar a exibição eficiente de anúncios garante a estratificação do usuário, maior engajamento e geração sustentável de receita.

Notas de rodapé

  1. Os servidores de anúncios podem ter restrições e requisitos aplicáveis. Por exemplo, o Ad Manager exige que os editores declarem o inventário que é atualizado na interface. Alguns compradores exigem uma declaração de atualização maior ou igual a 240 segundos. Em geral, quanto maior o intervalo entre as atualizações, mais desejável seu inventário é para os compradores. leia mais