[Tutorial] Cara Memasang Script Lazy Load untuk Unit Iklan Google AdSense di Blog

seotechman.com, Bogor 30/10/2019. Pada artikel kali ini kita akan membahas, Cara memasang script lazy load unit iklan Google AdSense di blog. Seperti yang Anda ketahui, Google AdSense adalah program monetisasi yang dijalankan oleh Google. Ini masih merupakan cara paling andal untuk menghasilkan uang secara online bagi banyak penerbit.

Satu masalah umum yang sering dihadapi penerbit bahwa unit iklan Google AdSense bisa mempengaruhi kecepatan blog. Karena tidak memiliki kendali untuk mengoptimalkan sumber daya, kita hanya berakhir dengan perasaan sedih.

[Baca Juga]: Cara Mempercepat Loading Blog

Seperti thumbnail video YouTube, mereka harus menggunakan WebP untuk gambar unit iklan. Sungguh ironis, terkadang mereka tidak repot-repot menayangkan dengan kompresi GZIP, atau menjaga sumber daya tetap diminimalkan.

Sumber daya yang sangat besar dan muatan ekstra dari banyak pencarian DNS, mematikan kecepatan halaman kami seperti neraka.

Sejujurnya, saya pribadi bukan penggemar berat pemuatan lambat bahkan untuk gambar. Tapi tetap saja, saya hanya ingin berbagi opsi. Jika Anda suka, Anda dapat mencoba sekali jika Anda sangat ingin menyajikan konten utama terlebih dahulu, sebelum Ad Units.

Secara alami, seperti inilah tampilan kode unit iklan aslinya.

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

Detail teknis: Pada dasarnya apa yang terjadi saat memuat dalam bentuk asinkron, berarti browser terus mengunduh skrip adsbygoogle.js tanpa memblokir penguraian HTML.

Tetapi di sini, dalam metode pemuatan lambat saya akan mengubah metode ASYNC menjadi DEFER nyata. Script AdSense akan mulai diunduh di browser, hanya setelah jendela selesai memuat halaman web utama. Dengan cara ini, pengunjung tidak perlu menunggu untuk melihat seluruh halaman dengan cepat.

Untuk tujuan ini, Anda tidak perlu melakukan perubahan besar apa pun pada unit iklan Anda. Sederhananya, kami akan mengubah gaya memuat adsbygoogle.js yang akan melakukan semua keajaiban.

Untuk pemasangan script lazy load AdSense ini, silahkan Anda ikuti langkah di bawah ini:

Cara Memasang Script Lazy Load AdSense Untuk Unit  Iklan Google AdSense di Blog

Apa yang harus Anda lakukan? Pertama-tama, coba hapus script yang sama seperti di bawah ini dari semua unit iklan yang ada.

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

Sekarang akan muncul seperti ini

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

Setelah itu, tambahkan kode JavaScript di bawah ini di Footer Tema Anda, mungkin tepat sebelum tag body.

Metode 1. Onload Event

Petunjuk: Silahkan Salin Javascript Berikut ini, kemudian tempelkan kedalam template masing-masing atau lebih tepatnya sebelum tag penutup body.

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

Apa sebenarnya yang dilakukan script ini?

Script ini akan memastikan bahwa unit Iklan Google AdSense Anda akan mulai dimuat dan terlihat setelah menyelesaikan pemuatan penuh halaman web utama Anda.

Metode 2. Onscroll Event

Pendekatan ini akan memuat unit iklan setelah pengguna menggulir halaman web Anda.

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

Seperti itulah cara memasang script lazy load AdSense di blog. Saya harap ini akan membantu Anda dalam meningkatkan PageSpeed dan kinerja situs Anda.

Virm Aditya

Berita teknologi informasi terkini

Bagikan Artikel ini