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

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

Markus Bordihn
Markus Bordihn

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

Considere um site que coloca muitos anúncios no seu conteúdo com o objetivo de gerar alta receita. No entanto, a grande quantidade 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 dos anúncios, o abandono prejudica gravemente 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 tempo de 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 dele a longo prazo.

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

Aproveitar as Core Web Vitals

Transmitir as Core Web Vitals é essencial para carregar anúncios sem afetar negativamente a velocidade da página. As Core Web Vitals, que incluem métricas como Maior exibição de conteúdo (LCP), Mudança de layout cumulativa (CLS) e Interação com a próxima exibição (INP), são métricas que medem a qualidade da experiência do usuário no seu site.

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

O foco na otimização da LCP é vital, já que essa métrica mede o tempo que leva para o maior elemento de conteúdo ficar visível na janela de visualização. Ao minimizar o tempo de carregamento do conteúdo do anúncio e priorizar as técnicas de carregamento assíncrono, os proprietários de sites podem reduzir a LCP e diminuir 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 o INP é crucial para experiências responsivas do usuário. O INP mede a latência de cada clique, toque e interação que ocorre ao longo da vida de uma página. O valor resultante geralmente é a interação que levou mais tempo para ser concluída e representa a capacidade geral de uma página de responder rapidamente às interações do usuário.

Anúncios que atrasam as interações do usuário têm um impacto negativo no INP. Isso pode frustrar os usuários ao criar experiências lentas ou até mesmo completamente interrompidas em casos extremos. Implementar o carregamento lento para anúncios e adiar a execução de JavaScript não essencial pode ajudar a reduzir o INP de uma página e melhorar a capacidade de resposta geral dela.

Cumulative Layout Shift (CLS)

Por fim, a CLS avalia a estabilidade visual de uma página medindo a quantidade de mudanças inesperadas de layout que ocorrem durante o carregamento da página. Anúncios que são carregados ou redimensionados dinamicamente podem causar instabilidade no layout, levando a experiências insatisfatórias para os usuários, em que eles perdem o controle da página ou tocam sem querer nos elementos errados devido a mudanças inesperadas de layout. Para diminuir isso, os proprietários de sites precisam otimizar a CLS para garantir que os anúncios tenham espaço reservado para evitar mudanças de layout, e os tamanhos dos anúncios precisam ser otimizados para evitar reflows 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 de texto, imagem e anúncio, além de usar a propriedade CSS content-visibility:, pode melhorar significativamente o tempo total de renderização em navegadores mais recentes.

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

Priorizar espaços de anúncio importantes

Nem todos os espaços de anúncio são iguais. Por exemplo, espaços de anúncios acima da dobra geralmente são mais valiosos do que aqueles que estão abaixo da dobra em termos de visibilidade e monetização. Isso ocorre porque os anúncios acima da dobra têm maior probabilidade 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 para baixo o suficiente para vê-los.

Anúncios acima da dobra

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

Os espaços de anúncio acima da dobra referem-se à parte de uma página da Web que é visível sem rolagem e tem um valor significativo na publicidade digital. Essas posições de destaque são consideradas valiosas por diversas razões:

  • 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. É mais provável que os usuários percebam e interajam 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. É a primeira impressão que os usuários têm quando acessam um site, o que a torna uma área essencial para a exibição de anúncios premium e de alto impacto.
  • Os anúncios acima da dobra têm as taxas de visibilidade mais altas porque estão na linha de visão direta do usuário. Isso garante que a maioria dos usuários que acessam a página veja esses anúncios sem precisar rolar para baixo.

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

  • Os espaços do anúncio de primeira tela devem ser carregados o mais rápido possível na janela de visualização inicial do usuário. Anúncios de carregamento lento podem prejudicar a experiência do usuário e aumentar as taxas de rejeição. É essencial otimizar os tempos de carregamento de anúncios para manter uma experiência tranquila para os usuários e para a navegação.
  • Embora os posicionamentos de anúncios acima da dobra sejam valiosos, é importante não sobrecarregar esse espaço principal com muitos anúncios. O excesso de anúncios atrapalha a legibilidade do conteúdo e prejudica a experiência do usuário. Procure um equilíbrio entre monetização e um layout simples e fácil de usar.
  • Verifique se os espaços de anúncios 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 conceito de anúncio "abaixo da dobra".

Os espaços de anúncio abaixo da dobra, ou seja, aqueles posicionados na parte de uma página da Web que só se torna visível depois de rolar 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 são úteis para os usuários que rolam a tela para baixo para ver mais conteúdo. Esses canais chamam a atenção de usuários engajados que estão buscando 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 ficam visíveis inicialmente podem se alinhar com o conteúdo ao lado deles, oferecendo uma oportunidade de relevância contextual. Esse alinhamento pode aumentar o engajamento dos usuários à medida que eles descobrem anúncios relacionados ao conteúdo que estão explorando.
  • Quando elaborados de forma cuidadosa, os anúncios abaixo da dobra se integram perfeitamente ao conteúdo ao redor, apresentando menos incômodos 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 canais de anúncios necessários para rolar a página oferecem mais flexibilidade no design e no formato do criativo, com amplo espaço e liberdade para testar. Anúncios em vídeo, elementos interativos e imagens maiores podem ter carregamento lento para capturar a atenção do usuário sem atrapalhar 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 página para baixo. A implementação de dicas visuais ou teasers de conteúdo pode motivar os usuários a explorar mais a fundo, aumentando a probabilidade de visibilidade do anúncio.
  • O posicionamento dos anúncios abaixo da dobra não deve comprometer a qualidade nem a legibilidade do conteúdo. Manter um equilíbrio entre anúncios e conteúdo para evitar sobrecarregar os usuários e garantir uma experiência positiva.
  • Ao contrário dos canais acima da dobra, os anúncios abaixo da dobra não precisam ser carregados imediatamente. Atrasar o carregamento desses anúncios até que eles estejam perto de entrar na janela de visualização do usuário pode ajudar a melhorar a velocidade geral de carregamento da página e reduzir o tempo inicial de renderização.

Quando usados estrategicamente, os anúncios abaixo da dobra podem complementar 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 de anúncios são considerações importantes para garantir uma experiência do usuário positiva.

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

Anúncios com carregamento lento quando apropriado

Visualização de recursos de carregamento lento em comparação com o não. Quando os recursos são carregados lentamente, 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 essenciais até que eles sejam necessários. A aplicação do carregamento lento em anúncios que não ficam imediatamente visíveis (ou seja, anúncios abaixo da dobra) garante que eles sejam carregados somente quando aparecem, economizando 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 simples.

Com a implementação desse recurso, 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) (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

Visualização dos anúncios sendo atualizados na 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 o carregamento de anúncios é 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 nas visualizações da Web oferece um desempenho melhor em comparação com a atualização de toda a página ou a recriação de WebViews. Isso porque isso minimiza a sobrecarga de dados e recursos, levando a atualizações de conteúdo mais rápidas e uma experiência do usuário mais tranquila, sem a latência associada a começar do zero.

Ao atualizar anúncios de maneira assíncrona, os proprietários de sites podem manter o conteúdo da página intacto enquanto atualizam o conteúdo do anúncio no local e em tempo real. Isso não apenas melhora a velocidade da página, eliminando a necessidade de atualizar toda a página, mas também garante que os anúncios exibidos permaneçam relevantes e interessantes. Com essa técnica, os proprietários de sites podem encontrar um equilíbrio entre monetização e performance, oferecendo um conteúdo de anúncio interessante e oportuno, além de minimizar os efeitos negativos na experiência do usuário.

A atualização dos espaços de anúncio é particularmente valiosa em páginas em que os usuários tendem a ficar mais tempo, como páginas de receitas, tutoriais de "faça você mesmo" ou outros sites ricos em conteúdo. Por exemplo, em uma página de artesanato do tipo "aprenda a fazer", em que os usuários podem passar um tempo considerável acompanhando os tutoriais, atualizar os espaços de anúncio estrategicamente durante os intervalos entre as etapas ou ao visualizar 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, atualizar os espaços de anúncio depois que os usuários percorreram a lista de ingredientes ou as instruções pode manter o interesse do usuário.

Priorizar o carregamento assíncrono

Uma das estratégias com maior impacto para melhorar a velocidade das páginas durante a veiculação de anúncios é o carregamento assíncrono. O carregamento assíncrono carrega anúncios de forma independente do conteúdo da página da Web principal, permitindo que a página continue a renderização e se torne interativa sem esperar o carregamento completo dos anúncios. Isso reduz significativamente o tempo de carregamento percebido, aumentando 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ção e formatos de anúncios

Ilustração de dispositivos em vários tamanhos de janela de visualização, com canais de anúncios estilizados como caixas verdes, cada uma lendo a mensagem &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 atrasar o carregamento da página e deixar os usuários frustrados. Para minimizar isso, os proprietários de sites devem 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 criativos de anúncios ajuda a reduzir o tamanho dos arquivos sem comprometer a qualidade visual. Essas otimizações não só melhoram a velocidade da página, mas também minimizam o consumo de dados para usuários com largura de banda limitada.

Better Ads Standards

É essencial aderir ao Better Ads Standard (em inglês) para a exibição de anúncios, porque isso não só melhora a experiência do usuário ao reduzir formatos invasivos e invasivos, mas também afeta positivamente a posição da exibição de anúncios e o tempo de carregamento da página.

Seguindo esses padrões, os anúncios têm mais chances de serem colocados em posições menos obstrutivas e invasivas, o que pode resultar em um maior engajamento do usuário e taxas de cliques.

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úncios 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 todos os provedores e redes de publicidade são iguais em termos de desempenho. Para garantir a velocidade ideal da página, os proprietários de sites precisam avaliar meticulosamente a performance de diferentes redes de publicidade, a implementação de lances de cabeçalho e os provedores.

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

Conclusão

Alcançar um equilíbrio entre monetização e desempenho é crucial para proprietários de sites que buscam fornecer uma experiência de usuário excepcional e maximizar a receita com a publicidade on-line.

Com técnicas como carregamento assíncrono, carregamento lento, otimização de formatos e tamanhos de anúncios, uso do armazenamento em cache inteligente e avaliação cuidadosa das redes de publicidade, além de provedores e lances de cabeçalho, os proprietários de sites podem lidar com os desafios de carregar anúncios sem comprometer a performance da página. Priorizar a exibição eficiente de anúncios garante a estratificação de usuários, o aumento do engajamento e a 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 de 240 segundos ou mais. Em geral, quanto maior o intervalo entre as atualizações, mais atraente será seu inventário para os compradores. Saiba mais