Cara Pasang Script Lazy Load Iklan Adsense untuk Kecepatan Loading

Calonbloggers.blue - Dalam era digital saat ini, kecepatan loading sebuah situs web menjadi salah satu faktor kunci dalam menarik dan mempertahankan pengunjung. Salah satu cara untuk meningkatkan kecepatan loading adalah dengan menerapkan teknik lazy loading pada iklan, khususnya iklan Google AdSense. Teknik ini memungkinkan konten untuk dimuat hanya ketika pengguna menggulir ke bawah halaman, sehingga mengurangi waktu muat awal dan penggunaan bandwidth. Berikut adalah langkah-langkah untuk memasang script lazy load iklan AdSense di situs Anda.

1. Memahami Konsep Lazy Loading

Lazy loading adalah teknik pemrograman yang menunda pemuatan elemen hingga saat dibutuhkan. Dalam konteks iklan, ini berarti bahwa iklan hanya akan dimuat ketika pengguna menggulir ke area di mana iklan tersebut ditempatkan. Dengan demikian, elemen lain pada halaman dapat dimuat lebih cepat tanpa harus menunggu iklan. Ini sangat bermanfaat untuk meningkatkan pengalaman pengguna dan mengoptimalkan kecepatan loading halaman.

2. Memperoleh Kode Iklan AdSense

Sebelum memasang script lazy load, Anda perlu mendapatkan kode iklan dari akun Google AdSense Anda. Berikut adalah langkah-langkah untuk memperoleh kode iklan:

Masuk ke akun Google AdSense Anda.
Pilih opsi "Iklan" di menu sebelah kiri.
Klik "Iklan baru" untuk membuat unit iklan baru.
Pilih tipe iklan yang ingin Anda buat (misalnya, iklan display).

Sesuaikan pengaturan iklan sesuai kebutuhan Anda dan salin kode yang dihasilkan.

3. Menyiapkan Script Lazy Load

Setelah mendapatkan kode iklan, langkah selanjutnya adalah menyiapkan script lazy load. Script ini dapat ditulis dalam JavaScript yang sederhana. Berikut adalah contoh script lazy load untuk iklan AdSense:

document.addEventListener("DOMContentLoaded", function() {

var lazyAds = document.querySelectorAll('.lazyload');

var lazyLoadAds = function() {

lazyAds.forEach(function(ad) {

if (ad.getBoundingClientRect().top < window.innerHeight && ad.getAttribute('data-loaded') === 'false') {

ad.innerHTML = ad.getAttribute('data-ad');

ad.setAttribute('data-loaded', 'true');

}

});

};

window.addEventListener('scroll', lazyLoadAds);

window.addEventListener('resize', lazyLoadAds);

lazyLoadAds();

});

</script>

Penjelasan tentang script di atas:

Script ini mendengarkan event DOMContentLoaded untuk memastikan DOM telah sepenuhnya dimuat sebelum mengeksekusi script.
Kemudian, script mencari semua elemen yang memiliki kelas lazyload.
Fungsi lazyLoadAds akan memeriksa posisi elemen dengan menggunakan getBoundingClientRect(). Jika elemen tersebut terlihat di viewport, maka isi elemen dengan kode iklan asli yang disimpan dalam atribut data-ad.
Setelah kode iklan dimuat, atribut data-loaded diubah menjadi true untuk mencegah iklan dimuat ulang.

4. Memodifikasi Kode Iklan AdSense

Setelah menyiapkan script, modifikasi kode iklan AdSense Anda agar sesuai dengan script lazy loading. Gantilah kode iklan biasa dengan kode berikut:

<div class="lazyload" data-ad="<script async src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script><ins class='adsbygoogle' style='display:block' data-ad-client='ca-pub-XXXXXXXXXX' data-ad-slot='YYYYYYYYYY' data-ad-format='auto'></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>" data-loaded="false"></div>

Gantilah ca-pub-XXXXXXXXXX dan data-ad-slot='YYYYYYYYYY' dengan ID penerbit dan slot iklan Anda yang sesuai.

5. Menempatkan Kode di Halaman Anda

Setelah memodifikasi kode iklan, langkah selanjutnya adalah menempatkan kode tersebut di halaman web Anda. Anda bisa menempatkan script lazy load dan kode iklan di bagian <body> halaman web, di lokasi yang tepat sesuai dengan di mana Anda ingin iklan muncul. Pastikan untuk menguji berbagai posisi untuk memastikan efektivitas loading iklan.

6. Mengoptimalkan Pengaturan Lazy Load

Untuk mencapai hasil maksimal dari teknik lazy loading, pertimbangkan beberapa aspek berikut:

Kombinasi dengan Teknik Lain: Lazy loading dapat digabungkan dengan teknik pengoptimalan lainnya seperti kompresi gambar, pengurangan jumlah skrip di halaman, dan penggunaan caching untuk meningkatkan kecepatan loading lebih lanjut.
Pengujian Kecepatan Halaman: Gunakan alat seperti Google PageSpeed Insights atau GTmetrix untuk memantau kecepatan loading halaman sebelum dan sesudah menerapkan lazy loading. Ini akan membantu Anda memahami dampak dari perubahan yang telah diterapkan.
Responsif pada Berbagai Perangkat: Pastikan bahwa iklan yang dimuat secara lazy ini tetap responsif dan tidak mengganggu pengalaman pengguna, baik di desktop maupun perangkat mobile.

7. Mematuhi Kebijakan Google AdSense

Saat menggunakan teknik lazy loading pada iklan AdSense, penting untuk selalu mematuhi kebijakan program Google AdSense. Pastikan bahwa iklan tetap terlihat dan tidak mengganggu pengalaman pengguna. Jangan menggunakan teknik yang dapat dianggap manipulatif atau yang dapat menyebabkan pelanggaran kebijakan.

8. Monitoring dan Evaluasi

Setelah menerapkan script lazy load, penting untuk memonitor performa iklan dan dampaknya terhadap pendapatan Anda. Catat perubahan dalam jumlah tayangan, klik, dan pendapatan yang dihasilkan dari iklan. Jika Anda menemukan bahwa penerapan lazy loading menyebabkan penurunan pendapatan karena iklan tidak dimuat dengan baik, Anda mungkin perlu menyesuaikan konfigurasi atau pengaturan lebih lanjut.

9. Kesimpulan

Penerapan script lazy load pada iklan Google AdSense dapat memberikan manfaat signifikan dalam meningkatkan kecepatan loading halaman web. Dengan menunda pemuatan iklan hingga saat diperlukan, Anda dapat menciptakan pengalaman pengguna yang lebih baik dan meningkatkan kinerja situs. Pastikan untuk selalu mematuhi kebijakan AdSense dan memonitor hasilnya untuk mendapatkan manfaat maksimal dari teknik ini. Dengan langkah-langkah yang tepat, Anda dapat mengoptimalkan situs web Anda sekaligus memanfaatkan potensi pendapatan iklan secara efektif.