Sådan konfigureres Lazy Load til Google AdSense-annonceenheder

Et almindeligt problem, som udgivere ofte står over for, er, at Google AdSense påvirker vores oprindelige bloghastighed. Da vi ikke har kontrol over optimering af ressourcerne, ender vi bare med at føle os triste.

Ligesom YouTube-videominiaturer bør de bruge WebP til billeder af annonceenheder. Det er ironisk, at de nogle gange ikke gider at servere med GZIP-komprimering eller holde ressourcerne minificeret. De massive ressourcer og ekstra belastninger fra mange DNS-opslag dræber vores sidehastighed som ind i helvede.

Da jeg for et par måneder siden tweetede om problemet med annonceenhedens hastighed, fik jeg ikke noget tilfredsstillende svar. Jeg er tilbage selv med en løsning, der forhindrer AdSense i at bremse indlæsningen af dit oprindelige indhold.

Jeg er ærligt talt ikke personligt en stor fan af lazy load, selv ikke for billeder. Men alligevel vil jeg bare dele en letvægtsmulighed. Hvis du kan lide, kan du prøve en gang, hvis du er meget optaget af at servere primært indhold først, før annonceenheder.

Tip: Du kan bruge Ezoic til at tjene mere end AdSense og hoste WP gratis.

Instruktion til opsætning af Lazy Loading til AdSense

Sådan ser en original annonceenhedskode naturligvis ud.

<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>

Tekniske detaljer: Grundlæggende sker det, at den indlæses i asynkron form, hvilket betyder, at browseren fortsætter med at downloade adsbygoogle.js scriptet uden at blokere HTML-parsningen.

Men her, i den dovne indlæsningsmetode, ændrer jeg ASYNC-metoden til en rigtig DEFER-metode. AdSense-scriptet vil begynde at downloade i browseren, først når vinduet er færdig med at indlæse hovedwebsiden. På denne måde behøver den besøgende ikke at vente på at se hele siden hurtigt for AdSense.

Til dette formål behøver du ikke at foretage store ændringer i din annonceenhed. Vi ændrer blot stilen for indlæsning af adsbygoogle.js, som vil gøre alt det magiske.

Du skal blot følge nedenstående to trin

Fjern nedenstående script fra alle eksisterende annonceenheder.

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

Nu vil det se således ud

<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>

Derefter skal du tilføje nedenstående JavaScript-kode i din Theme Footer, eventuelt lige før body-tagget.

Metode 1. onload-begivenhed

Tip: Noptimize-tag er til stede for at gøre det kompatibelt med Autoptimize. Det forhindrer sammenlægning af 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. Ovenstående kode kan du bruge via temaindstillingen, hvis den er tilgængelig, til at tilføje et brugerdefineret script
  2. For Genesis, gør brug af Genesis Simple Hooks plugin med mulighed genesis_after
  3. eller Header and Footer plugin til ethvert andet tema.
genesis hooks option

Hvad gør dette script helt præcist?

Dette script sikrer, at din AdSense-annonceenhed begynder at blive indlæst og bliver synlig, når din primære webside er færdigindlæst. Det er derfor, jeg har kaldt det Lazy Loading for Google AdSense.

Metode 2. onscroll-begivenhed

Denne fremgangsmåde indlæser kun annonceenheden, når brugeren ruller på websiden, ellers ikke.

<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>

Metode 3. Vis annonceenheder på brugerinteraktion

Hvis du ønsker at vise advt i tide uden at gå på kompromis med indtægter og ydeevne, kan du bruge “Flying Scripts by WP Speed Matters” plugin til at downloade og udføre JS baseret på brugerinteraktion.

Det bedste er, at du ikke behøver at foretage nogen ændringer i din annoncekode overhovedet.

flying scripts plugin settings for lazy loading
Den pæne og rene brugergrænseflade i Flying Script
  • Gå til plugin-indstillinger, og indsæt nøgleordet adsbygoogle
  • Gem derefter indstillingerne, og rens (ryd) sidecachen. Det var det hele.

Resultat af ydeevne

Jeg har brugt dette plugin på en af mine klienter websted, der bruger Mediavine ad netværk (som er mere tunge end Adsense Ad enheder) kernen vitale bestået med succes for Mobile og Desktop både.

core vital result

Du bør også læse disse artikler

Vil du have mere?
Forestil dig at få vejledninger hver dag! DET er FRÆKNINGSVÆRDIG FANTASTISK. Tilmeld dig nu.

Skriv en kommentar

129 kommentarer til “Sådan konfigureres Lazy Load til Google AdSense-annonceenheder”

    • 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

      Svar
  1. 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.

    Svar
  2. 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.

    Svar
    • Thanks for the feedback.

      Lazy load is not harming anything of Google AdSense or their Advertiser, so it’s fair use in my opinion.

      Svar
    • Thanks for the feedback.

      Lazy load is not harming anything of Google AdSense or their Advertiser, so it’s fair use in my opinion.

      Svar
  3. 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.

    Svar
  4. 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.

    Svar
  5. 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.

    Svar
  6. Thanks really helpful will use it in my website..hope there is a similar guide for other ads as well nice website keep it up

    Svar
  7. Thanks really helpful will use it in my website..hope there is a similar guide for other ads as well nice website keep it up

    Svar
  8. 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 😉

    Svar
  9. Gulshan, I want to know, will this accept Google Adsense policy? Becuase they are very strict when comes to modification of their ad code.

    Svar
    • 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.

      Svar
  10. Gulshan, I want to know, will this accept Google Adsense policy? Becuase they are very strict when comes to modification of their ad code.

    Svar
    • 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.

      Svar
  11. 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…

    Svar
      • I don’t the exact number of articles I have read. Finally Boom 💣
        Previously with ads my speed decrease by 50 points on the lighthouse
        Now my speed is above 97 even with ads

        One more question, My non-amp pages are faster than amp pages…which should I use for my blog posts?

        Svar
  12. 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?

    Svar
  13. 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.

    Svar
    • 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.

      Svar
  14. The second method drastically increased my pagespeed score. Is there any issue with the second method when compared to the first?.

    Svar
  15. 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

    Svar
  16. 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

    Svar
  17. 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.. 🙂

    Svar
  18. 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.

    Svar
    • You do not need to put this script in all Ad units. As provided code will work across all web page if once added in body tag.

      Svar
  19. Brother, initially it worked fine but after 1 day it stoped working and my ads load very fast, page speed decreased. Please help

    Svar
  20. what about the header tag which will be added for Adsense approval?

    this is present in the header, should we keep this or remove it?

    Svar
      • 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

        Svar
  21. 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;

    Svar
  22. Thanks for the great tip. However, recently AdSense launched new ad code that looks like this:

    Do we need to update the Javascript you provided?

    Svar
  23. 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

    Svar
  24. 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.

    Svar
  25. 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.

    Svar
    • 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.

      Svar