So richten Sie Lazy Load für Google AdSense Ad units

von

Ein häufiges Problem, mit dem Verleger konfrontiert sind, ist, dass Google AdSense unser Original beeinflussen blog speed. Aufgrund der fehlenden Kontrolle über die Optimierung der Ressourcen, sind wir am Ende nur noch traurig.

Wie YouTube video thumbnails,sollten sie verwenden WebP für ad unit images. Es ist ironisch, dass sie sich manchmal nicht die Mühe machen serve with GZIP compression, or Ressourcen minimiert halten. Die massiven Ressourcen und zusätzlichen Belastungen vieler DNS lookup, die unsere Seitengeschwindigkeit höllisch beeinträchtigen.

Vor ein paar Monaten, wenn ich tweeted die Ad unit speed problem, Ich habe keine zufriedenstellende Antwort erhalten.Ich habe eine Lösung gefunden, die verhindern wird, dass AdSense von Verlangsamung des Ladevorgangs Ihrer Originalinhalte.

Ehrlich gesagt, Ich persönlich bin kein großer Fan der lazy load auch für Bilder. Aber dennoch, Ich möchte nur eine leichtgewichtige Option vorstellen. Wenn Sie mögen, Sie können es einmal ausprobieren, wenn Sie sehr darauf bedacht sind, den primären Inhalt zuerst anzubieten, vor Ad Units.

Tipp: Sie können verwenden Ezoicmehr zu verdienen als AdSense & host WP unentgeltlich.

Anleitung zur Einrichtung Lazy Loading für AdSense

So wird natürlich ein Original ad unit code siehe.

<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 Einzelheiten: Im Grunde genommen wird die Datei in asynchronous Formular, bedeutet browser weiter downloading adsbygoogle.js script ohne blocking die HTML parsing.

Aber hier, im lazy loading Methode werde ich die ASYNC method to real DEFER. The AdSense script wird gestartet downloading in browser, nur ein Fenster wird das Laden der Hauptseite abschließen. Auf diese Weise, Der Besucher muss nicht warten, bis er die ganze Seite sieht, um schnell die AdSense.

Zu diesem Zweck, müssen Sie keine großen Änderungen an Ihrem System vornehmen. ad unit. Wir werden einfach den Stil von loading adsbygoogle.js die den ganzen Zauber bewirken wird.

Alles, was Sie tun müssen, sind die folgenden zwei Schritte

Unten entfernen script von allen bestehenden ad units.

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

Jetzt wird sie wie folgt aussehen

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

Danach fügen Sie Folgendes hinzu JavaScript code in Ihrem Theme Footer, möglicherweise kurz vor der body tag.

Methode 1. onload event

Hinweis: Noptimize tag ist vorhanden, um die Kompatibilität mit Autoptimize. Sie verhindert die Aggregation 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. Obiger Code, können Sie nutzen über Theme option falls verfügbar füradding custom script
  2. Für Genesis, nutzen über Genesis Simple Hooks plugin mit option genesis_after
  3. oder Header and Footer plugin für jede andere theme.
genesis hooks option

Was bedeutet dies script genau das tun?

Diese script wird sicherstellen, dass Ihr AdSense Ad unit wird gestartet loading und werden nach Beendigung des gesamten Prozesses sichtbar loading Ihrer Haupt web page. Deshalb habe ich es so genannt, Lazy Loading für Google AdSense.

Methode 2. onscroll event

Dieser Ansatz wird load ad unit nur wenn user scroll the web page sonst nicht.

<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. Anzeige Ad Units on User Interaction

Wenn Sie Folgendes anzeigen möchten advt rechtzeitig und ohne Kompromisse bei revenue und performance, Sie können verwenden „Flying Scripts by WP Speed Matters“ plugin für downloading und executing JS based über the user-interaction.

Das Beste daran ist, dass Sie überhaupt keine Änderungen an Ihrem Anzeigencode vornehmen müssen.

flying scripts plugin settings for lazy loading
Die ordentliche und saubere UI von Flying Script
  • Gehe zu plugin settings, umfassen the keyword adsbygoogle
  • Dann, save settings und purge (clear) the page cache. Das ist it.

Performance Ergebnis

Ich habe dies verwendet plugin bei einem meiner clients site dass uses Mediavine ad network (die schwerer ist als Adsense Ad units) the core vital passed successfully für Mobile und Desktop beide.

core vital result

Sie sollten auch diese Artikel lesen

Schreibe einen Kommentar

129 Gedanken zu „So richten Sie Lazy Load für Google AdSense Ad units“

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

      Antworten

  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.

    Antworten

  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.

    Antworten

  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

    Antworten

  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;

    Antworten

      • 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

        Antworten

  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.

    Antworten

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

    Antworten

  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

    Antworten

  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.

    Antworten

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

      Antworten

  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?

    Antworten

  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…

    Antworten

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

      Antworten

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

      Antworten

  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 😉

    Antworten

  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.

    Antworten

  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.

    Antworten

  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.

    Antworten

  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.

    Antworten

  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.

    Antworten

    • 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

      Antworten