Salah satu penyumbang loading blog adalah iklan adsense. Meskipun JS adsense sudah menggunakan asynchronous untuk menghindari blocking render JS, namun kenyataannya loading iklan adsense sangat terasa ketika halaman blog dimuat.Apalagi jika Anda memasang JS adsense pada setiap unit iklan yang ditampilkan di blog, maka loading blog akan ditambah pemuatan beberapa JS adsense tersebut. Jadi saran saya, cukup menyimpan hanya 1 JS adsense di atas kode
</body> untuk semua unit iklan adsense di blog.Namun kali ini saya akan memberikan trik lain untuk lazy load iklan adsense agar tidak menambah loading blog.
Untuk melakukan lazy load pada iklan adsense, kita bisa memanfaatkan javascript load on scroll. Jadi secara sederhana, JS adsense tidak akan dimuat sebelum halaman di-scroll. Masuk akal bukan?
Namun untuk mengimplementasikan trik ini, maka kita jangan menaruh iklan adsense pada daerah "above the fold" atau jangan menaruh iklan adsense di daerah penampakan layar sebelum halaman di-scroll karena iklan tidak akan tampil.
Bagian yang terang adalah "above the fold" atau "visible content"
Nah untuk trik lazy load iklan adsense ini silahkan ganti kode JS adsense dengan javascript di bawah ini, silahkan simpan di atas kode
</body>
<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>
Anda juga bisa memasukan js atau script lainnya jika ingin widget tersebut dimuat setelah scroll, misalkan komentar disqus atau lainnya.