Aprenda como implementar lazy loading em anúncios Google AdSense no Blogger e melhorar o desempenho do seu site. Lazy Loading, ...
Como Implementar Lazy Loading para Anúncios Google AdSense no Blogger
Lazy loading é uma técnica usada para adiar o carregamento de elementos em uma página, como anúncios, imagens ou widgets. Neste artigo, vamos te ensinar passo a passo como implementar o lazy loading para anúncios Google AdSense no seu blog do Blogger.
Este guia é ideal para quem deseja melhorar o desempenho do site, aumentar a velocidade de carregamento e garantir uma melhor experiência do usuário. Então, se você quer tornar seu blog mais rápido e aumentar suas receitas com o AdSense, continue lendo!
Índice
- 1. Introdução ao Lazy Loading
- 2. Configuração do Script Básico
- 3. Implementação Manual do Código AdSense
- 4. Carregar Anúncios com Scroll
- 5. Carregar Anúncios com Timer
- 6. Carregar Anúncios ao Atingir Altura da Página
- 7. Dicas de Otimização e Boas Práticas
- 8. Conclusão
1. Introdução ao Lazy Loading
O lazy loading é uma técnica que adia o carregamento de certos elementos da página até que eles sejam realmente necessários. Isso melhora significativamente o desempenho do site, especialmente para conteúdo mais pesado, como anúncios do Google AdSense.
Com o lazy loading, os anúncios do AdSense só serão carregados quando o usuário realizar determinadas ações, como rolar a página ou depois de um determinado tempo. Isso pode ajudar a aumentar a retenção de usuários e também pode reduzir o tempo de carregamento da página.
Descubra como implementar Lazy Loading com Scroll!2. Configuração do Script Básico
Antes de começarmos a implementação de diferentes métodos de lazy loading, vamos criar um script básico que será utilizado em todos os exemplos. Ele será responsável por carregar o script externo do AdSense no momento certo.
Primeiro, remova qualquer script externo do AdSense que já tenha sido adicionado ao seu blog, normalmente localizado dentro da tag <head>. O código deve parecer algo assim:
<script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxx" crossorigin="anonymous"></script>
Agora, substitua pelo script básico a seguir, onde você deve alterar o campo ca-pub-xxxx pelo seu código de Publisher do Google AdSense.
<script>
/* Lazy Load Ads */
let adPublisherId = 'ca-pub-seu-codigo';
let adScript = document.createElement('script');
adScript.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=' + adPublisherId;
adScript.async = true;
adScript.setAttribute('crossorigin', 'anonymous');
document.head.appendChild(adScript);
</script>
3. Implementação Manual do Código AdSense
Se você estiver inserindo os anúncios manualmente, certifique-se de que não está copiando o script externo do AdSense. O correto é copiar a parte do código que começa com a tag <ins>, como mostrado abaixo:
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxx"
data-ad-slot="xxxx"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
4. Carregar Anúncios com Scroll
Um dos métodos mais populares de lazy loading é o carregamento de anúncios com base no scroll. Nesse método, o anúncio só será carregado quando o usuário rolar a página para baixo.
Veja o código a seguir para implementar esse método:
<script>
// Lazy Load Ads with Scroll
let adLoaded = false;
window.addEventListener('scroll', () => {
if (!adLoaded && (document.documentElement.scrollTop || document.body.scrollTop) > 0) {
let adPublisherId = 'ca-pub-seu-codigo';
let adScript = document.createElement('script');
adScript.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=' + adPublisherId;
adScript.async = true;
document.head.appendChild(adScript);
adLoaded = true;
}
});
</script>
Confira o método de Lazy Load com Timer!
5. Carregar Anúncios com Timer
Outro método de lazy loading eficiente é o carregamento com timer. Esse método carrega os anúncios após um determinado período de tempo, independentemente do comportamento de rolagem do usuário.
Veja o código para implementar essa técnica:
<script>
// Lazy Load Ads with Timer
let loadAdsAfter = 5; // Tempo em segundos
setTimeout(() => {
let adPublisherId = 'ca-pub-seu-codigo';
let adScript = document.createElement('script');
adScript.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=' + adPublisherId;
adScript.async = true;
document.head.appendChild(adScript);
}, loadAdsAfter * 1000);
</script>
6. Carregar Anúncios ao Atingir Altura da Página
Esse método carrega os anúncios somente após o usuário ter rolado até uma determinada altura da página, o que é útil se você deseja que os anúncios apareçam após o usuário consumir algum conteúdo.
Código para implementação:
<script>
// Lazy Load Ads based on Page Height
let adLoadHeight = 1500; // Altura em pixels
let adLoaded = false;
window.addEventListener('scroll', () => {
if (!adLoaded && (window.innerHeight + window.scrollY) >= adLoadHeight) {
let adPublisherId = 'ca-pub-seu-codigo';
let adScript = document.createElement('script');
adScript.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=' + adPublisherId;
adScript.async = true;
document.head.appendChild(adScript);
adLoaded = true;
}
});
</script>
7. Dicas de Otimização e Boas Práticas
Aqui estão algumas dicas que podem melhorar ainda mais o desempenho do seu blog:
- Minimize o uso de scripts: Evite carregar muitos scripts de terceiros para garantir tempos de carregamento mais rápidos.
- Otimize as imagens: Use ferramentas de compressão de imagens para reduzir o tamanho de arquivos de imagem.
- Teste a velocidade da página: Use ferramentas como Google PageSpeed Insights para verificar o desempenho.
8. Conclusão
Implementar lazy loading para anúncios Google AdSense no Blogger pode ajudar a melhorar o desempenho do seu blog, diminuir o tempo de carregamento e aumentar a satisfação do usuário. Escolha o método de carregamento que melhor atende às suas necessidades e implemente-o no seu site.
Se você encontrou algum problema ou quer compartilhar suas experiências, deixe seu comentário abaixo!
COMMENTS