Jak nastavit líné načítání pro reklamní jednotky Google AdSense

Jedním z častých problémů, se kterými se vydavatelé často potýkají, je, že Google AdSense ovlivňuje rychlost našeho původního blogu. Kvůli tomu, že nemáme kontrolu nad optimalizací zdrojů, jsme nakonec jen smutní.

Stejně jako miniatury videí na YouTube by měly být. using WebP pro obrázky reklamních jednotek. Je ironické, že se někdy neobtěžují servírovat s kompresí GZIP nebo udržovat zdroje minifikované. Obrovské prostředky a další zatížení mnoha vyhledávání DNS nám pekelně ničí rychlost stránky.

Když jsem před několika měsíci na Twitteru psal o problému s rychlostí reklamní jednotky, nedostal jsem žádnou uspokojivou odpověď. Sám jsem se vrátil s řešením, které zabrání tomu, aby AdSense zpomalovalo načítání původního obsahu.

Upřímně řečeno, osobně nejsem velkým fanouškem líného načítání ani u obrázků. Ale přesto se chci jen podělit o odlehčenou možnost. Pokud se vám líbí, můžete ji jednou vyzkoušet, pokud vám velmi záleží na tom, aby se nejdříve zobrazoval primární obsah a teprve potom reklamní jednotky.

Tip: Můžete použít Ezoic vydělat více než AdSense & hostitel WP free of cost.

Pokyny pro nastavení Lazy Loading for AdSense

Takto samozřejmě vypadá původní kód reklamní jednotky.

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

Technické detaily: V podstatě se stává, že se načítá v asynchronní formě, což znamená, že prohlížeč pokračuje ve stahování skriptu adsbygoogle.js, aniž by blokoval. HTML parsing.

Zde však v metodě líného načítání změním metodu ASYNC na skutečný DEFER. Skript AdSense se začne stahovat do prohlížeče, teprve až okno dokončí načítání hlavní webové stránky. Tímto způsobem nemusí návštěvník čekat na rychlé zobrazení celé stránky pro AdSense.

Za tímto účelem nemusíte provádět žádné velké změny v reklamní jednotce. Jednoduše změníme styl načítání adsbygoogle.js který provede všechna kouzla.

Vše, co potřebujete, je postupovat podle níže uvedených dvou kroků

Odstranit níže script ze všech stávajících ad units.

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

Now it will appear like this

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

Poté přidejte níže uvedený kód JavaScriptu do zápatí tématu, případně těsně před značku body.

Metoda 1. onload event

Nápověda: Noptimize tag je přítomna, aby byla kompatibilní s Autoptimize. Zabrání agregaci 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. Výše uvedený kód, můžete použít prostřednictvím Theme option pokud je k dispozici pro přidání custom script
  2. For Genesis, využívat prostřednictvím Genesis Simple Hooks plugin with option genesis_after
  3. or Header and Footer plugin for any other theme.
genesis hooks option

Co přesně tento skript dělá?

Tento skript zajistí, že se vaše reklamní jednotka AdSense začne načítat a zobrazí se až po dokončení načítání hlavní webové stránky. Proto jsem ho pojmenoval Lazy Loading for Google AdSense.

Metoda 2. onscroll event

Tento přístup načte reklamní jednotku pouze tehdy, když uživatel prochází webovou stránku, jinak ne.

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

Metoda 3. Display Ad Units on User Interaction

Pokud chcete zobrazit inzerát včas, aniž by došlo ke snížení příjmů a výkonu, Můžete použít „Flying Scripts by WP Speed Matters“ plugin pro stahování a spouštění JS na základě interakce s uživatelem.n.

Nejlepší na tom je, že nemusíte provádět žádné změny v kódu reklamy.

flying scripts plugin settings for lazy loading
The neat and clean UI of Flying Script
  • Přejděte do nastavení zásuvného modulu, zadejte klíčové slovo adsbygoogle
  • Poté uložte nastavení a vyčistěte (vymažte) mezipaměť stránky. To je vše.

Výsledek výkonu

Používal jsem tento plugin na jednom z mých klientských stránek, který používá reklamní síť Mediavine (která je těžší než reklamní jednotky Adsense), jádro životně důležité úspěšně prošlo pro mobilní i stolní počítače.

core vital result

Měli byste si také přečíst tyto články

Napsat komentář

130 komentářů u „Jak nastavit líné načítání pro reklamní jednotky Google AdSense“

    • 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

      Odpovědět
  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.

    Odpovědět
  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.

    Odpovědět
  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.

    Odpovědět
  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.

    Odpovědět
  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.

    Odpovědět
  6. 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 😉

    Odpovědět
  7. Gulshan, I want to know, will this accept Google Adsense policy? Becuase they are very strict when comes to modification of their ad code.

    Odpovědět
    • 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.

      Odpovědět
  8. Gulshan, I want to know, will this accept Google Adsense policy? Becuase they are very strict when comes to modification of their ad code.

    Odpovědět
    • 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.

      Odpovědět
  9. 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…

    Odpovědět
  10. 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?

    Odpovědět
  11. 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.

    Odpovědět
    • 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.

      Odpovědět
  12. 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

    Odpovědět
  13. 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

    Odpovědět
  14. 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.. 🙂

    Odpovědět
  15. 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.

    Odpovědět
    • 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.

      Odpovědět
  16. Brother, initially it worked fine but after 1 day it stoped working and my ads load very fast, page speed decreased. Please help

    Odpovědět
  17. 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?

    Odpovědět
      • 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

        Odpovědět
  18. 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;

    Odpovědět
  19. 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?

    Odpovědět
  20. 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

    Odpovědět
  21. 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.

    Odpovědět
  22. 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.

    Odpovědět
    • 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.

      Odpovědět
  23. Hi! I use manually placed adsense ads in articles and also I use adsense vignette ads (auto). If I use your second code will it affect vignette ads? Because they are shown between pages and not on pages.

    Odpovědět