O Adsense é um dos principais vilões quando se trata de melhorar a velocidade de carregamento de uma página. E a Google poderia muito bem sugerir para seus editores a realização de um simples procedimento que faria esse tempo de carregamento diminuir consideravelmente.
Explico: ao mesmo tempo que o Adsense oferece uma forma muito fácil de implementação, bastando copiar e colar o código gerado pela ferramenta, parece que ele joga contra o publisher no que diz respeito à velocidade de carregamento.
Os motivos para esta lerdeza são vários, mas neste artigo vamos dar ênfase nos três principais:
- a necessidade do próprio Adsense de não usar caches em função do quão dinâmicos os anúncios são por sua natureza;
- o fato de muitos códigos dos anúncios serem, na verdade, códigos gerados pelos anunciantes, que por sua vez também não estão muito preocupados com a velocidade do sites dos publishers;
- o detalhe do código do Adsense ser carregado repetidamente na página de forma desnecessária. Por exemplo, uma página com dez anúncios vai carregar dez vezes um código que poderia ser carregado apenas uma única vez.
É justamente esta terceira situação que o Adsense poderia apenas dizer para o seu editor na hora que ele estiver gerando novos códigos:
Ei, publisher, este código você só precisa usar uma única vez, ok?
Seções desta página
O código padrão do Adsense
Basicamente, um bloco de anúncio do Adsense vai ter a seguinte aparência:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234556789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Code language: HTML, XML (xml)Observe que em todos os blocos de anúncios há dois scripts sendo carregados e executados. O primeiro bloco é responsável por iniciar uma sessão de anúncios entre o visitante, sua página e o Adsense.
É exatamente este script que não é necessário ser carregado em todo bloco de anúncio na página, podendo ser usado uma única vez:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>Code language: HTML, XML (xml)Já o segundo bloco é o responsável por efetivamente exibir o anúncio. Por isso vamos precisar dessa chamada toda vez que um bloco de anúncio for inserido numa página.
Contudo na prática ela não precisa ser feita desta maneira, interrompendo o processamento do restante da página. Bastaria o Adsense sugerir que essa linha de script pudesse ser usada no final da página, e podendo ser executada quantas vezes fossem necessárias somente depois que o conteúdo inteiro já estivesse carregado:
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Code language: HTML, XML (xml)Implementação do Adsense
Para implementar esta sugestão seria necessário inserir códigos no <head></head> da página, colar nos locais dos blocos de anúncio apenas a tag <ins> do código inicialmente fornecido pelo Adsense, e inserir um novo código imediatamente antes de </body> na sua página.
Ou seja, em se tratando de WordPress seria necessário editar os arquivos do template, ou usar um plugin para injeção de código, ou — caso o tema permita — utilizar recursos do Personalizar do WP para inserir os códigos nos locais corretos.
Passo 1: código de inicialização do anúncio
O primeiro passo, se o Adsense permitisse, seria inserir no seu template, antes de </head>, o primeiro trecho de script do código:
<head>
...
...
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>Code language: HTML, XML (xml)O código acima contém as marcações de <head> e </head> por uma questão de clareza, para deixar mais claro onde a linha deve ser inserida.
Passo 2: blocos de anúncios nos lugares desejados
Agora bastaria inserir apenas, e somente apenas, o código da tag <ins> fornecida pelo Adsense, nos locais em que desejamos que apareçam os anúncios. Na prática, removeríamos as duas tags <script> que são redundantes, ficando algo assim:
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234556789"></ins>Code language: HTML, XML (xml)Passo 3: código de exibição do Adsense
Neste último passo vamos adicionar um código específico que vai ser o responsável por exibir os anúncios no final do carregamento da página, sem bloqueios.
<script defer>
var n=document.querySelectorAll('.adsbygoogle').length;
for (i=0; i<n; i++)
(adsbygoogle = window.adsbygoogle || []).push({});
</script>Code language: HTML, XML (xml)O que o código acima faz é bem simples:
- conta quantos elementos da classe
adsbygoogleexistem na página; - para cada instância da classe, ou seja, para cada bloco de anúncio, ele executa o código padrão de exibição do banner.
Considerações finais
Embora esta prática não seja adotada pelo Adsense, com certeza seria muito gratificante para os seus publishers que a Google liberasse este tipo de otimização. Assim o tempo de carregamento dos anúncios seriam mínimos, podendo melhorar até a indexação de uma página na SERP.
Mas nunca é demais repetir que cada caso é um caso, e que cada um deve ter a responsabilidade de cuidar dos seus sites e blogs. E caso seja de seu interesse aplicar esta técnica, entre primeiro em contato com o gerente da sua conta Adsense e verifique a disponibilidade, pois a responsabilidade de executar esta dica é exclusivamente sua.
Fica a dica!
Foto: James Harrison via Unsplash.