Cara Memasang Lazy Load AdSense Untuk Mempercepat Loading Halaman


DailyBlog.id - Salah satu cara agar blog atau web kita yang memiliki banyak iklan ketika diakses tidak lambat yaitu menggunakan lazy load. Nah teknik lazy load sendiri ini akan me-load js ketika user melakukan scroll, sehingga js akan diunduh diakhir beserta gambar-gambar dari iklannya. Sebenarnya banyak cara untuk melakukan lazy load pada adsense ini, tapi disini saya akan membagikan tutorial yang sangat mudah dimengerti. Bagaimana cara pemasangan lazy load adsense ini dengan benar.

Lazy load ini sangat membantu kita ketika ingin mengakses suatu blog yang lambat dan pada akhirnya ketika dipasang lazy load akan menjadi cepat blognya. Tentu saja jika kita memasang iklan terlalu banyak, dan saat ingin mengakses blog atau webnya akan berat. Dikarenakan blog atau web tersebut harus mendownload js serta gambar-gambar iklan tersebut juga. Jadi ada alangkah baiknya, kita menggunakan lazy load ini. Agar js dan gambar-gambar iklan tersebut akan didownload belakangan.

Ingin tau bagaimana caranya untuk pasangnya pada blog atau web kalian? yuk mari ikutin langkah-langkah yang ada di bawah ini:


Memasang Lazy Load AdSense Untuk Mempercepat Loading Halaman

Dalam teknin lazy load yang digunakan ini, ketika pengunjung melakukan scrolling pada halaman. Maka iklan akan tampil dengan sendirinya, dan ketika pengunjung tidak melakukan scrolling. Maka iklan tidak akan tampil. Dalam hal tersebut akan membantu mengurangi lambatnya blog atau web saat diakses.

Pada dasarnya script default yang telah diberikan oleh adsense akan seperti ini:

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


Script yang diatas ini harus kalian hapus terlebih dahulu, sebelum memasang lazy load adsense nantinya. Dikarenakan jika kalian tidak menghapus, maka lazy loadnya tidak akan jalan ketika pengunjung scroll halaman.

Untuk scriptnya, kalian bisa pilih salah satu dari script yang ada dibawah ini:

Lazy Load AdSense #1

<script type='text/javascript'>
//<![CDATA[
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>


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 Pasang Lazy Load Adsense di Blogger

  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.
  4. <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-***********"></script>
  5. Hapus semua script tersebut jika ada lebih dari satu.
  6. Selanjutnya, tekan CTRL + F lagi untuk mencari kode </body>.
  7. Pilih dan copy salah satu script lazy load adsense yang sudah saya berikan di atas.
  8. Letakkan tepat diatas kode </body>.
  9. Lalu simpan tema.
  10. Selesai

* Perlu Diingat Juga

Ketika kalian ingin menambahkan iklan adsense baru di widget kalian. Pastikan kalian copas mulai dari bagian <ins class="adsbygoogle"> hingga script paling bawah . Seperti 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>



Jika kalian copy scriptnya dari paling atas, maka nantinya lazy load tidak akan berfungsi.

Jika sudah, maka kalian bisa coba akses blog atau web kalian. Dan bandingkan bagaimana rasanya sebelum dan sesudah menggunakan lazy load adsense tersebut. Dan kalian juga bisa cek kecepatan dari blog atau web kalian melalui Google, dan bandingkan juga scorenya sebelum dan sesudah menggunakan lazy load adsense. Sangat jelas nanti scorenya akan berbeda sangat jauh.

Mungkin cukup sekian dari saya, semoga artikel ini dapat bermanfaat bagi kalian semuanya. Jika saya ada salah kata atau pengetikan, saya mohon maaf. Sekian dan terima kasih.

Selamat mencoba!

Posting Komentar (0)
Lebih baru Lebih lama