Hoe Lazy Load instellen voor Google AdSense-advertentie-eenheden

door

Een veel voorkomend probleem voor uitgevers is dat Google AdSense onze oorspronkelijke blog snelheid aantast. Omdat we geen controle hebben over het optimaliseren van de middelen, eindigen we gewoon zielig.

Zoals YouTube video thumbnails, zouden ze WebP moeten gebruiken voor ad unit afbeeldingen. Het is ironisch dat ze soms niet de moeite nemen om met GZIP-compressie te serveren, of de bronnen geminificeerd te houden. De enorme resources en extra belasting van veel DNS lookup, doen onze paginasnelheid de das om.

Een paar maanden geleden, toen ik het probleem met de snelheid van de Ad unit tweette, kreeg ik geen bevredigend antwoord. Ik ben zelf terug met een oplossing die voorkomt dat AdSense het laden van uw originele inhoud vertraagt.

Eerlijk gezegd ben ik persoonlijk geen grote fan van de lazy load, zelfs niet voor afbeeldingen. Maar toch wil ik een lichtgewicht optie delen. Als u wilt, kunt u het een keer proberen als u veel belang hecht aan het eerst serveren van primaire inhoud, vóór Ad Units.

Tip: U kunt Ezoic gebruiken om meer te verdienen dan AdSense & WP gratis hosten.

Instructies voor Setup Lazy Loading voor AdSense

Natuurlijk ziet een originele advertentie-eenheid er zo uit.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- leaderboard -->
<ins class="adsbygoogle"
 style="display:inline-block;width:728px;height:90px"
 data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
 data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Technische details: In principe gebeurt het laden in asynchrone vorm, wat betekent dat de browser doorgaat met het downloaden van adsbygoogle.js script zonder de HTML parsing te blokkeren.

Maar hier, in de lazy loading methode ga ik de ASYNC methode veranderen in echte DEFER. De AdSense script zal beginnen te downloaden in de browser, alleen zodra venster zal het laden van de belangrijkste webpagina te voltooien. Op deze manier, bezoeker niet hoeft te wachten voor het zien van hele pagina snel voor de AdSense.

Hiervoor hoef je geen grote veranderingen in je advertentie-eenheid aan te brengen. We wijzigen gewoon de stijl van het laden van adsbygoogle.js die alle magie zal doen.

U hoeft alleen maar de volgende twee stappen te volgen

Verwijder onderstaand script uit alle bestaande advertentie-eenheden.

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

Nu zal het er zo uitzien

<ins class="adsbygoogle"
 style="display:inline-block;width:728px;height:90px"
 data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
 data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Voeg daarna onderstaande JavaScript-code toe in uw Theme Footer, eventueel net voor de body-tag.

Method 1. onload event

Hint: Noptimize tag is aanwezig om compatibel te zijn met Autoptimize. Het voorkomt het samenvoegen van AdSense lazy loader inline JS.

<!--noptimize-->
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
<!--/noptimize-->
  1. Bovenstaande code, kunt u gebruiken via Thema optie indien beschikbaar voor het toevoegen van aangepast script
  2. Voor Genesis, maak gebruik via Genesis Simple Hooks plugin met optie genesis_after
  3. of Header en Footer plugin voor elk ander thema.
genesis hooks option

Wat doet dit script precies?

Dit script zorgt ervoor dat uw AdSense-advertentie-eenheid begint te laden en zichtbaar wordt nadat uw hoofdpagina volledig geladen is. Daarom heb ik het de naam Lazy Loading for Google AdSense gegeven.

Methode 2. Onscroll-gebeurtenis

Deze aanpak zal advertentie-eenheid alleen laden wanneer de gebruiker de webpagina anders niet scrollt.

<script type='text/javascript'>
//<![CDATA[
var la=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===la||0!=document.body.scrollTop&&!1===la)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),la=!0)},!0);
//]]>
</script>

Methode 3. Advertentie-eenheden weergeven op gebruikersinteractie

Als u wilt weergeven advt in tijdige wijze zonder compromis op inkomsten en prestaties, kunt u gebruik maken van “Flying Scripts door WP Speed Matters” plugin voor het downloaden en uitvoeren van JS op basis van de gebruiker-interactie.

Het beste is dat u helemaal niets aan uw advertentiecode hoeft te veranderen.

flying scripts plugin settings for lazy loading
De nette en schone UI van Flying Script
  • Ga naar plugin instellingen, voeg het trefwoord adsbygoogle toe
  • Sla dan de instellingen op en wis de pagina-cache. Dat is het.

Prestatie Resultaat

Ik heb deze plugin gebruikt op een van mijn klanten site die Mediavine advertentie netwerk gebruikt (wat zwaarder is dan Adsense Ad units) de kern van vitaal belang geslaagd voor Mobiel en Desktop beide.

core vital result

Lees ook deze artikelen

Plaats een reactie

129 gedachten over “Hoe Lazy Load instellen voor Google AdSense-advertentie-eenheden”

    • 1. There is one customized responsive ad unit added in top header using Elements > Hook option. Here’s the code if you need.

      2. Then I have two responsive ad units added after paragraphs 2 and 8 using Ad Inserter. That’s all.

      Beantwoorden

  2. Hello. Thank you so much for the useful information.

    I have read all the posts and comments.

    Google Adsense updated, but this code still works fine for me.

    But as you said in your comment, “If you have AdSense placement mainly in above the fold, you should avoid.” Due to the problem, I also stopped using it.

    By any chance, how are you displaying AdSense now?

    Are you just using the default (provided by Google) code?

    Or

    Can you please let me know if you are using another method?

    Thank you.

    Beantwoorden

  7. Method 2 worked for me, but method 1 did not.
    Method 2 increases pagespeed from a meager 50 to a whopping 92 on mobile.
    Method 1 did nothing.
    The downside is that method 2 loads the add only after a scroll, even if it is above the fold.

    I find it amazing that google puts so much emphasis on pagespeed while at the same time slows sites with adsense down to impossible levels.

    Beantwoorden

  9. Theoretically speaking, does lazy loading affect ads targeting? I kinda notice that the ads I see when lazy loading seem quite different from AdSense auto ads.

    Thank you

    Beantwoorden

  12. Improved JS version as per new AdSense code. Added query string for publishing ID and crossOrigin property.

    function downloadJSAtOnload() {
    var element = document.createElement(“script”);
    element.src = “https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890″;
    element.crossOrigin=”anonymous”;
    document.body.appendChild(element);
    }
    if (window.addEventListener)
    window.addEventListener(“load”, downloadJSAtOnload, false);
    else if (window.attachEvent)
    window.attachEvent(“onload”, downloadJSAtOnload);
    else window.onload = downloadJSAtOnload;

    Beantwoorden

      • Hey Gulshan, thanks for providing us with this code. But I discovered that it’s not lazy loading, but just to defer loading of ads.

        I will like it if you will make it to load ads only when user scrolls to the viewport where the ads are meant to show.

        Thanks a lot

        Beantwoorden

  22. Thanks so much for the code and your research Gulshan. My Pagespeed score is now, as you say, as without Adsense placed on the page. Also reassuring that you’ve been using the second option since June 2020, I’m guessing without Google Adsense wrath. Thanks also for your continued watch of this post. With Core Web Vitals being slapped on us in a couple of months, I’m sure many people are looking for this type of assistance now.

    Beantwoorden

  25. Gracias hermano por el aporte este truco de lazy espectacular me ayudo en Lighthouse Report Viewer de 40 a 80 puntos….todo debido a ese script de google adsense.. 🙂

    Beantwoorden

  29. My site’s speed was seriously battered due to adsense codes but using this code raised my speed to 90. Thanks for this hint, its really the drug for FCP and CLS

    Beantwoorden

  33. Hey buddy! I just come across your article and this is literally amazing but I had one issue.. I m trying to work with the second option, which is the scroll event, I did the steps u said on the first event but besides putting the lazy load code I put the scroll one but it doesn’t work, PLEASE I was looking for this script for months and finally when I found it, it won’t work could you please show me exactly how it works or is there any video I can follow..

    Really appreciate you effort

    Beantwoorden

  40. Gulshan,

    Which of the both methods are you seeing an effective balance between load speed and the revenue?

    In the comments you said, you haven’t using the lazy load.

    Can we able to add an array tags to the JS code, so that it applies to only that ads code? We can easily add a comment to the adsense code if they are below the fold.

    That should help in even fine tune the code.

    Beantwoorden

    • At the moment of writing this comment, I am using second method which is based on scroll. I feel, it is subject to test what perform best for each site.

      Beantwoorden

  45. Based on this “Update 12/09/2017: I have removed this method from my blog since I found that it reduces Ad impressions. So, please implement at your own responsibility.”

    Can anyone confirm if this method still affects impressions?

    Beantwoorden

  47. Hi, I just wanted to implement your code but then I wasn’t able to see your code, already tried opening it in Chrome and Firefox but where the code is supposed to be there is just a grey box unfortunately…

    Beantwoorden

    • Hi,
      Great question!

      We are not modifying heavily like modifications. We are just adjusting same script in a way to load after finishing page load. From async to defer. So, I don’t think it’s a violation.

      Beantwoorden

    • Hi,
      Great question!

      We are not modifying heavily like modifications. We are just adjusting same script in a way to load after finishing page load. From async to defer. So, I don’t think it’s a violation.

      Beantwoorden

  66. You must execute for every ad after load the script:

    (adsbygoogle = window.adsbygoogle || []).push({});

    so if you have 3 ads you must execute this code 3 times 😉

    Beantwoorden

  69. Great share Gulshan. Personally, I’m not a big fan of Google AdSense and prefer to stay away since it slows down the website and distracts the users.

    I don’t want my readers to click on the ad and leave my site while reading an article where I could have gotten a chance to make an affiliate sale. Also, Google pays peanuts, which is another sad truth.

    Lazy load can reduce the server load and improve the site speed by a good margin. Thanks for sharing the script.

    Beantwoorden

  70. Great share Gulshan. Personally, I’m not a big fan of Google AdSense and prefer to stay away since it slows down the website and distracts the users.

    I don’t want my readers to click on the ad and leave my site while reading an article where I could have gotten a chance to make an affiliate sale. Also, Google pays peanuts, which is another sad truth.

    Lazy load can reduce the server load and improve the site speed by a good margin. Thanks for sharing the script.

    Beantwoorden

  71. Just Now I removed the lazy load Adsense option on my website,

    Once you add the script for lazy load, site loading is very fast, but the main problem is if your having more than 3 ads means sometimes ads not showing, it shows blank space, once refresh only ads came, I recently found out this problem.

    Then only i remove the script, normally my side load time is 5 secs, while using lazy load 2 secs only.

    Beantwoorden

  76. Fabulous! 245 ms load time. How cloudflare is caching HTML content? Part of their paid plan?
    “cf-cache-status” shows HIT, which I never get for any HTML content. I always get very long wait time with CF, around 0.5 to 1 Sec every time.

    On the server side, using Key-CDN cache enabler, and Autoptimize, there’s only Two CSS and one JS file, excluding adsense scripts.

    Beantwoorden

  77. Fabulous! 245 ms load time. How cloudflare is caching HTML content? Part of their paid plan?
    “cf-cache-status” shows HIT, which I never get for any HTML content. I always get very long wait time with CF, around 0.5 to 1 Sec every time.

    On the server side, using Key-CDN cache enabler, and Autoptimize, there’s only Two CSS and one JS file, excluding adsense scripts.

    Beantwoorden

    • Great Now My site works really awesome fast. i am also like to know How to do Https for my website using cloudfare ? Can you guide me.

      One more doubt : How to use cloudfare ssl for normal html websites ?

      Thank you

      Beantwoorden