Πώς να ρυθμίσετε το Lazy Load για μονάδες διαφημίσεων Google AdSense

από

Ένα κοινό πρόβλημα που αντιμετωπίζουν συχνά οι εκδότες είναι ότι το Google AdSense επηρεάζει την αρχική ταχύτητα του ιστολογίου μας. Λόγω του ότι δεν έχουμε τον έλεγχο της βελτιστοποίησης των πόρων, απλά καταλήγουμε να αισθανόμαστε θλιμμένοι.

Όπως οι μικρογραφίες βίντεο στο YouTube, έτσι θα πρέπει να είναι χρησιμοποιώντας WebP και για τις εικόνες της μονάδας διαφήμισης. Είναι ειρωνικό, ότι μερικές φορές δεν μπαίνουν στον κόπο να εξυπηρετούν με συμπίεση GZIP ή να διατηρούν τους πόρους minified. Οι τεράστιοι πόροι και τα επιπλέον φορτία πολλών αναζητήσεων DNS, σκοτώνουν την ταχύτητα της σελίδας μας σαν κόλαση.

Πριν από μερικούς μήνες, όταν έγραψα στο Twitter το πρόβλημα της ταχύτητας της μονάδας διαφήμισης, δεν έλαβα καμία ικανοποιητική απάντηση. Επιστρέφω ο ίδιος με μια λύση που θα αποτρέψει το AdSense από το να επιβραδύνει τη φόρτωση του αρχικού σας περιεχομένου.

Ειλικρινά, προσωπικά δεν είμαι μεγάλος οπαδός του lazy load, ακόμη και για τις εικόνες. Αλλά και πάλι, θέλω απλώς να μοιραστώ μια ελαφριά επιλογή. Αν θέλετε, μπορείτε να δοκιμάσετε μία φορά, αν σας ενδιαφέρει ιδιαίτερα να εξυπηρετείται πρώτα το πρωτογενές περιεχόμενο, πριν από τις Μονάδες διαφήμισης.

Συμβουλή: Μπορείτε να χρησιμοποιήσετε το Ezoic για να κερδίσετε περισσότερα από το AdSense και να φιλοξενήσετε το WP χωρίς κόστος.

Οδηγίες για τη ρύθμιση Lazy Loading για το AdSense

Φυσικά, έτσι μοιάζει ένας αρχικός κώδικας μονάδας διαφήμισης.

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

Τεχνικές λεπτομέρειες: Βασικά αυτό που συμβαίνει ότι φορτώνει σε ασύγχρονη μορφή, σημαίνει ότι το πρόγραμμα περιήγησης συνεχίζει να κατεβάζει το σενάριο adsbygoogle.js χωρίς να μπλοκάρει την ανάλυση HTML.

Αλλά εδώ, στη μέθοδο lazy loading θα αλλάξω τη μέθοδο ASYNC σε πραγματική DEFER. Το σενάριο AdSense θα αρχίσει να κατεβάζει στο πρόγραμμα περιήγησης, μόνο μόλις το παράθυρο ολοκληρώσει τη φόρτωση της κύριας ιστοσελίδας. Με αυτόν τον τρόπο, ο επισκέπτης δεν χρειάζεται να περιμένει να δει ολόκληρη τη σελίδα γρήγορα για το AdSense.

Για το σκοπό αυτό, δεν χρειάζεται να κάνετε μεγάλες αλλαγές στη μονάδα διαφήμισής σας. Απλά θα αλλάξουμε το στυλ φόρτωσης του adsbygoogle.js που θα κάνει όλη τη μαγεία.

Το μόνο που χρειάζεται να ακολουθήσετε είναι τα παρακάτω δύο βήματα

Αφαιρέστε το παρακάτω σενάριο από όλες τις υπάρχουσες μονάδες διαφήμισης.

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

Τώρα θα εμφανιστεί ως εξής

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

Στη συνέχεια, προσθέστε τον παρακάτω κώδικα JavaScript στο υποσέλιδο του θέματος, ενδεχομένως ακριβώς πριν από την ετικέτα σώματος.

Μέθοδος 1. συμβάν onload

Συμβουλή: Η ετικέτα Noptimize είναι παρούσα για να είναι συμβατή με το Autoptimize. Θα αποτρέψει τη συγκέντρωση του 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. Ο παραπάνω κώδικας, μπορείτε να τον χρησιμοποιήσετε μέσω της επιλογής Theme αν είναι διαθέσιμος για την προσθήκη προσαρμοσμένου σεναρίου
  2. Για το Genesis, χρησιμοποιήστε το πρόσθετο Genesis Simple Hooks με την επιλογή genesis_after
  3. ή Header and Footer plugin για οποιοδήποτε άλλο θέμα.
genesis hooks option

Τι ακριβώς κάνει αυτό το σενάριο;

Αυτό το σενάριο θα διασφαλίσει ότι η μονάδα διαφήμισης AdSense θα αρχίσει να φορτώνει και θα γίνει ορατή μετά την ολοκλήρωση της πλήρους φόρτωσης της κύριας ιστοσελίδας σας. Αυτός είναι ο λόγος για τον οποίο το ονόμασα, Lazy Loading for Google AdSense.

Μέθοδος 2. συμβάν onscroll

Αυτή η προσέγγιση θα φορτώσει τη μονάδα διαφήμισης μόνο όταν ο χρήστης μετακινηθεί στην ιστοσελίδα ή όχι.

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

Μέθοδος 3. Εμφάνιση μονάδων διαφήμισης στην αλληλεπίδραση του χρήστη

Αν θέλετε να εμφανίσετε advt εγκαίρως χωρίς συμβιβασμούς στα έσοδα και την απόδοση, μπορείτε να χρησιμοποιήσετε το plugin “Flying Scripts by WP Speed Matters” για τη λήψη και εκτέλεση JS με βάση την αλληλεπίδραση του χρήστη.

Το καλύτερο είναι ότι δεν χρειάζεται να κάνετε καμία αλλαγή στον κώδικα της διαφήμισής σας.

flying scripts plugin settings for lazy loading
Το τακτοποιημένο και καθαρό UI του Flying Script
  • Μεταβείτε στις ρυθμίσεις του πρόσθετου, συμπεριλάβετε τη λέξη-κλειδί adsbygoogle
  • Στη συνέχεια, αποθηκεύστε τις ρυθμίσεις και καθαρίστε (εκκαθαρίστε) την προσωρινή μνήμη της σελίδας. Αυτό είναι όλο.

Αποτέλεσμα απόδοσης

Έχω χρησιμοποιήσει αυτό το plugin σε ένα από τα site των πελατών μου που χρησιμοποιεί το διαφημιστικό δίκτυο Mediavine (το οποίο είναι πιο βαρύ από Adsense Ad units) ο πυρήνας ζωτικής σημασίας πέρασε με επιτυχία για Mobile και Desktop τόσο.

core vital result

Θα πρέπει επίσης να διαβάσετε αυτά τα άρθρα

Σχολιάστε

130 σκέψεις στο “Πώς να ρυθμίσετε το Lazy Load για μονάδες διαφημίσεων Google AdSense”

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

    Απάντηση

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

    Απάντηση

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

    Απάντηση

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

    Απάντηση

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

    Απάντηση

  25. I tested both codes, the code that works as Lazyload pagespeed speed testindo outputs like 99%. https://www.havadurumu15gunluk.xyz/havadurumu/630/istanbul-hava-durumu-15-gunluk.html However, with the page late loading code, the pagespeed speed test is not very successful. I also doubt whether it is against the adsense rules. I am thinking of getting support via mail. https://havadurumu16gunluk.xyz/havadurumu/728/izmir-hava-durumu-16-gunluk.html

    Απάντηση

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

    Απάντηση

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

    Απάντηση

  46. 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?

    Απάντηση

  48. 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…

    Απάντηση

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

      Απάντηση

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

      Απάντηση

  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.

    Απάντηση

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

    Απάντηση

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

    Απάντηση

  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.

    Απάντηση

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

    Απάντηση

    • 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

      Απάντηση