Cara Memasang Lazy Load Adsense Di Blogger!

Cara Memasang Lazy Load Adsense Di Blogger!

Lazy load adalah metode untuk menunda pemuatan konten dengan tujuan meringankan loading halaman blog atau website, lazy load ini sering kali digunakan para bloger untuk meringankan loading blognya untuk menampilkan iklan.

Lazy load sering kali kita temui ketika scrol dan konten pun mereload nya satu persatu, lazy load pun tidak hanya meload konten ketika kita scrol sebuah website tetapi lazy load juga menampilkan iklan secara beruntun atau satu persatu.

Di article kali ini Reatrix Bakal memberikan tutorial cara menempatkan kode lazy load iklan adsense supaya performa blog atau website kalian tidak merah alias buruk.

Kecepatan Blog Yang belum menggunakan adsense.


performa sesudah dan sebelum

Salah satu contoh sesudah dan sebelum menggunakan kode iklan default dari adsensenya, performa ini bakalan turun sampai merah ketika kamu pasarang unit iklan di setiap widget atau halamannya.

Sudah paham kan disini? Perbedaannya?.

Pertama - tama kalian cari kode unit iklan kalian dan hapus kode .js nya saja contohnya berikut : 

code struktur adsense

Perhatikan kode yang di blok merah dan yang di blok hijau, hapus kode yang di blok merah dan sisakan kode yang diblok hijau.

Codenya akamn tampil seperti ini :

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Jika panduan diatas sudah kalian terapkan sekarang waktunya taruh script lazy loadnya salin dan pastekan code dibawah ini diatasnya </body>  : 

<!-- Defer Ads JS library -->
<script type='text/javascript'>
//<![CDATA[
/* Lazy Load AdSense*/
var lazyadsense = !1;
window.addEventListener("scroll", function() {
    (0 != document.documentElement.scrollTop && !1 === lazyadsense || 0 != document.body.scrollTop && !1 === lazyadsense) && (! function() {
        var e = document.createElement("script");
        e.id = "g_ads_js", e.type = "text/javascript", e.async = "async", e.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
        var a = document.getElementsByTagName("script")[0];
        a.parentNode.insertBefore(e, a)

      	/* only for AdSense Auto ads*/
      	var gads = document.getElementById("g_ads_js")
        gads.setAttribute("data-ad-client", "ca-pub-XXXXXXXXXXXXXXXX");

    }(), lazyadsense = !0)
}, !0);
//]]>
</script>

<!-- Defer Ads load command-->
<script>
    (adsbygoogle = window.adsbygoogle || []).onload = function () {
        [].forEach.call(document.getElementsByClassName('adsbygoogle'), function () {
            adsbygoogle.push({})
        })
    }
</script>

Letakan kode ini diatasnya </body>, dan "ca-pub-XXXXXXXXXXXXXXXX" ganti dengan id adsense kalian, id adsense mempunya i 14-15 id yang menandakan akun kalian.

Test kecepatan blog kalian apakah berpengaruh? Dan kecepatan loadingny apakah ngaruh? Dan performa nya apakah naik? 

Selamat mencoba, semoga article ini dapat membantu kalian untuk menaikan performa blog kalian.

Posting Komentar