Cara Memasang Lazy Load AdSense untuk Mempercepat Loading Iklan

59 Views
Cara Memasang Lazy Load AdSense

Memasang lazy load adsense adalah alternatif yang tepat untuk meringankan loading blog. Karena, script yang diberikan google adsense untuk dipasang pada blog kita sangat mempengaruhi performa loading blog, karena menggunakan script js external atau memanggil script dari luar.

Sebenarnya, ada banyak sekali faktor yang menyebabkan loading blog lambat. Seperti ukuran gambar yang besar, banyaknya widget yang terpasang, script iklan adsense terlalu banyak, dan lain lain. Tentu itu sangat menghambat blog kita saat memuat konten, dan pastinya membutuhkan bagaimana sih cara mempercepat loading blog?

Nah, pada kesempatan kali ini saya akan membagikan cara mempercepat loading blog dari salah satu faktor yang mempengaruhinya, yaitu iklan adsense. Yuk, simak ulasan berikut ini.

Baca Juga: Mengenal Istilah-Istilah dalam Google AdSense.

Mempercepat Loading Iklan AdSense dengan Script Lazy Load

Cara Memasang Lazy Load AdSense

Dengan menggunakan script lazy load adsense, iklan yang terpasang di blog kita akan sedikit terhambat, dan akan muncul ketika pengunjung melakukan scrolling atau menggulir layar. Cara kerja script ini tidak jauh berbeda dengan script lazy load image yang sudah saya jelaskan di artikel sebelumnya.

Seperti yang sudah saya singgung diatas, script iklan adsense menggunakan JavaScript dari dipanggil dari luar. Agar lebih paham, kodenya seperti ini:

<script data-ad-client="ca-pub-xxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Script JS diatas lah yang akan kita ubah menjadi Lazy Load AdSense. Jika script diatas masih terpasang pada blog Anda, alangkah baiknya dihapus terlebih dahulu. Karena lazy load tidak akan bekerja jika script bawaan adsense masih terpasang. Anda bisa menggunakan salah satu dari script yang saya bagikan berikut ini.

Script Lazy Load AdSense #1

<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.type="text/javascript",e.async=!0,e.src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]>
</script>

Script Lazy Load AdSense #2

<script>
//<![CDATA[
var lazyadsense = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) {
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
    lazyadsense = true;
  }
}, true)
//]]>
</script>

Cara Memasang Lazy Load AdSense di Blogger

Untuk tutorial cara memasang lazy load adsense, saya harap Anda baca dengan teliti. Ikuti langkah-langkah berikut ini:

  1. Buka Dasboard Blogger.
  2. Pergi ke Tema, Edit HTML.
  3. Tekan CTRL + F, masukkan kata kunci pagead2.googlesyndication.com untuk mencari kode script bawaan Google AdSense seperti dibawah ini.
    <script data-ad-client="ca-pub-xxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  4. Hapus semua script tersebut jika ada lebih dari satu.
  5. Selanjutnya, tekan CTRL + F lagi untuk mencari kode </body>.
  6. Pilih dan copy salah satu script lazy load adsense yang sudah saya bagikan diatas.
  7. Letakkan tepat diatas kode </body>.
  8. Selesai.

PENTING!
Jika mau memasang kode unit iklan baru, copy mulai dari kode <ins class=”adsbygoogle” hingga bawah, jadi JavaScript yang ada diatasnya tidak usah dipasang kembali. Contoh:

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


Lumayan ribet ya, hehe. Tapi setelah mengikuti cara memasang lazy adsense diatas, coba cek pagespeed blog Anda. Apakah lebih baik dari sebelumnya? Semoga bermanfaat, terimakasih.

Post Views: 59