AdSense, Blogger, Lazy Load, Lighthouse, SEO, Tutorial

Script Lazy Load AdSense di Blogger

Penggunaan Script Lazy Load AdSense di Blogger ini dimaksudkan sebagai upaya untuk mempercepat loading blog, terutama jika dibuka dengan ponsel yang sebagian masih memakai jaringan 3G. Sebenarnya jika cakupan 4G sudah mencakup 100% area di seluruh pelosok tanah air, kebutuhan untuk lazy load mungkin tak sekrusial seperti sekarang ini.

Meskipun script AdSense telah dibuat secara asynchronous, yang mestinya secara teoretis tidak lagi memblokir atau menghambat eksekusi proses lainnya, namun pada kenyataannya keberadaan script AdSense di blog tetap saja berpengaruh pada skor SEO di Lighthouse dan Audit dengan GT Metrix.

Ini bisa dimengerti karena setiap ada penambahan script pada template tentu akan berdampak langsung pada jumlah tindakan yang harus diproses. Pengaruhnya ke kecepatan loading laman bergantung pada kompleksitas script dan apa yang kemudian dipanggil untuk disajikan di layar.

Script Lazy Load AdSense di Blogger

Keberadaan script AdSense pada dasarnya memang menjadi semacam trade-off, yaitu dengan 'mengorbankan' penurunan kecepatan loading blog untuk mendapat penghasilan dari pemasangan iklan. Seperti yang sering dikutip orang, bahwa tak ada makan siang gratis, karena akan selalu ada yang harus dibayar, meski bukan dalam bentuk uang.

Begitu pula jika hendak memasang Script Lazy Load AdSense di Blogger atau di WordPress, akan ada trade off antara perolehan meningkatnya kecepatan loading laman dan kenaikan skor SEO, dengan mengorbankan lokasi penempatan iklan paling strategis, yaitu di above the fold.

Mengapa demikian? Oleh karena jika Anda menggunakan script lazy load, iklan baru muncul ketika pengunjung scroll laman ke bawah layar. Jika Anda meletakkan iklan di atas layar, maka pengunjung akan melihatnya kurang dari 1 detik, dan itu tak bagus buat parameter active view viewable.

Setelah mengetahui untung ruginya dan tetap ingin memasang script lazy load AdSense, ikuti langkah berikut ini.

  1. Login di Blogger
  2. Klik Theme, klik Edit HTML
    Lakukan back up seluruh isi HTML, dengan tekan Ctrl+A (command+A untuk Mac), copy dan paste ke Notes sebagai cadangan jika ada kesalahan selama proses perubahan HMTL.
  3. Jika tidak menggunakan script Auto Ads, cari kode di bawah ini,

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

    dan ganti dengan kode di bawah ini,

    <script>
    //<![CDATA[
    var lazyAds = false;window.addEventListener('scroll', function(){if ((document.documentElement.scrollTop != 0 && lazyAds === false) || (document.body.scrollTop != 0 && lazyAds === false)) {(function() { var ad = document.createElement('script'); ad.async = true; ad.src ='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();lazyAds = true;}}, true);
    //]]>
    </script>
  4. Jika Anda menggunakan script AdSense Auto Ads, maka gunakan script di bawah ini untuk menggantikan script Anda, yang idenya saya peroleh dari situsweb kompiajaib.com.

    <script>
    //<![CDATA[
    var lazyAds = false;window.addEventListener('scroll', function(){if ((document.documentElement.scrollTop != 0 && lazyAds === false) || (document.body.scrollTop != 0 && lazyAds === false)) {(function() { var ad = document.createElement('script'); ad.setAttribute('data-ad-client','ca-pub-xxxxxxxxxxxxxxxx'); ad.async = true; ad.src ='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();lazyAds = true;}}, true);
    //]]>
    </script>

    Ganti warna merah dengan angka ca-pub Anda, lalu Save.

Lihat Video

Semoga bermanfaat dan selamat mencoba.


Bagikan ke:
Facebook, Twitter, WhatsApp, Telegram, Email. Print!.

, seorang pejalan musiman dan penyuka sejarah. Penduduk Jakarta yang sedang tinggal di Cikarang Utara. Traktir BA secangkir kopi. Secangkir saja ya! Juni 15, 2020.