Cara Pasang Script Lazy Load Iklan AdSense Berbagai Jenis di Blog

Daftar Isi

Ada satu masalah yang hampir semua pemilik blog monetisasi pernah rasakan tapi jarang tahu cara mengatasinya: iklan AdSense yang memperlambat loading halaman. Pengunjung masih menunggu konten muncul, tapi browser sudah sibuk memuat puluhan script iklan di background yang tidak ada hubungannya dengan konten yang sedang dicari.

Lazy load adalah solusi untuk masalah ini. Alih-alih memuat semua iklan sekaligus saat halaman pertama dibuka, lazy load menunda pemuatan iklan hingga pengunjung benar-benar mendekati area iklan tersebut saat scroll. Hasilnya adalah halaman yang terasa jauh lebih ringan di detik-detik pertama, yang berdampak langsung pada Core Web Vitals dan pengalaman pengguna secara keseluruhan.

Panduan ini membahas cara memasang script lazy load untuk berbagai jenis iklan AdSense di blog, termasuk iklan di dalam artikel, iklan sidebar, dan iklan sticky, dengan penjelasan cara kerja setiap pendekatan agar kamu bisa menyesuaikannya dengan kebutuhan blog sendiri.

Apa Itu Lazy Load Iklan dan Bagaimana Cara Kerjanya

Lazy load secara harfiah berarti "memuat dengan malas" atau memuat hanya saat diperlukan. Dalam konteks iklan AdSense, lazy load berarti script iklan tidak dieksekusi dan unit iklan tidak diminta dari server Google sampai ada indikasi bahwa pengunjung akan segera melihat area iklan tersebut.

Indikator yang paling umum digunakan adalah jarak scroll. Misalnya, iklan di tengah artikel baru akan dimuat ketika pengunjung sudah scroll hingga 200 piksel sebelum posisi iklan tersebut di layar. Sebelum mencapai jarak itu, slot iklan masih kosong dan tidak ada request yang dikirim ke server AdSense.

Pendekatan ini memberikan dua keuntungan sekaligus. Pertama, halaman terasa lebih cepat karena browser fokus memuat konten utama terlebih dahulu. Kedua, iklan yang tidak pernah masuk ke viewport pengunjung tidak dimuat sama sekali, yang berarti lebih sedikit request yang tidak perlu dikirim ke server Google.

Perlu dipahami bahwa lazy load iklan yang diterapkan dengan benar tidak melanggar kebijakan AdSense. Google justru merekomendasikan penggunaan lazy load sebagai bagian dari optimasi performa halaman, selama iklan tetap dapat terlihat dan diklik oleh pengguna saat masuk ke viewport.

Persiapan Sebelum Memasang Script Lazy Load

Sebelum memasang script lazy load, pastikan beberapa hal sudah dalam kondisi yang benar di blog kamu.

Script AdSense sudah terpasang di head template. Lazy load hanya bekerja untuk unit iklan yang sudah menggunakan kode unit iklan resmi dari AdSense. Pastikan script utama AdSense yang berisi publisher ID kamu sudah terpasang di bagian head template blog, bukan di dalam artikel atau widget.

Unit iklan sudah dibuat di dashboard AdSense. Setiap unit iklan yang ingin di-lazy load harus sudah dibuat di dashboard AdSense dan memiliki kode unit iklan yang valid. Simpan kode unit iklan tersebut karena akan dibutuhkan saat konfigurasi.

Posisi iklan sudah ditentukan. Lazy load perlu disesuaikan dengan posisi iklan di halaman. Iklan di atas fold atau sangat dekat dengan bagian atas halaman sebaiknya tidak di-lazy load karena pengunjung sudah melihatnya saat halaman pertama dibuka. Lazy load paling efektif untuk iklan di tengah artikel, bawah artikel, sidebar, dan iklan sticky.

Cara Kerja Intersection Observer untuk Lazy Load Iklan

Metode lazy load modern menggunakan Intersection Observer API, sebuah fitur bawaan browser yang memungkinkan script mendeteksi kapan sebuah elemen memasuki atau meninggalkan viewport tanpa harus terus-menerus memeriksa posisi scroll secara manual.

Cara kerjanya: setiap unit iklan dibungkus dalam sebuah kontainer dengan atribut data khusus yang menyimpan informasi unit iklan. Intersection Observer memantau semua kontainer tersebut. Ketika kontainer mulai mendekati viewport, observer mendeteksinya dan baru saat itulah script iklan dimuat dan unit iklan diminta dari server AdSense.

Keunggulan metode ini dibanding metode lama berbasis event scroll adalah efisiensi. Intersection Observer tidak memblokir main thread browser dan tidak memperlambat interaksi pengguna, berbeda dengan event listener scroll yang dieksekusi setiap kali pengguna menggerakkan layar.

Memasang Script Lazy Load di Template Blogger

Script lazy load dipasang sekali di template dan berlaku untuk semua unit iklan yang menggunakan kontainer dengan atribut yang sesuai. Buka Dashboard Blogger kemudian Theme kemudian Edit HTML, cari tag penutup body di bagian paling bawah template, dan paste script berikut tepat sebelum tag tersebut.

Script ini menggunakan Intersection Observer dengan rootMargin 200 piksel, artinya iklan mulai dimuat 200 piksel sebelum masuk ke viewport pengunjung. Nilai ini bisa disesuaikan lebih besar untuk koneksi lambat atau lebih kecil jika ingin iklan dimuat hanya saat benar-benar terlihat.

Berikut adalah script lazy load yang bisa langsung digunakan:

<script>
(function() {
  'use strict';
  var lazyAds = document.querySelectorAll('.lazy-ad');
  if (!lazyAds.length) return;
  var observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        var ad = entry.target;
        var ins = document.createElement('ins');
        ins.className = 'adsbygoogle';
        ins.style.display = 'block';
        ins.setAttribute('data-ad-client', ad.getAttribute('data-ad-client'));
        ins.setAttribute('data-ad-slot', ad.getAttribute('data-ad-slot'));
        ins.setAttribute('data-ad-format', ad.getAttribute('data-ad-format') || 'auto');
        ins.setAttribute('data-full-width-responsive', ad.getAttribute('data-full-width-responsive') || 'true');
        ad.appendChild(ins);
        (adsbygoogle = window.adsbygoogle || []).push({});
        observer.unobserve(ad);
      }
    });
  }, { rootMargin: '200px' });
  lazyAds.forEach(function(ad) {
    observer.observe(ad);
  });
})();
</script>

Format Kontainer Iklan untuk Berbagai Jenis Unit Iklan

Setelah script terpasang di template, setiap unit iklan perlu menggunakan format kontainer khusus yang menggantikan kode unit iklan standar dari AdSense. Kontainer ini menyimpan informasi unit iklan sebagai atribut data dan akan diproses oleh script lazy load saat pengunjung mendekati areanya.

Iklan di dalam artikel atau bawah artikel:

<div class="lazy-ad"
  data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
  data-ad-slot="XXXXXXXXXX"
  data-ad-format="auto"
  data-full-width-responsive="true"
  style="min-height:250px;display:block;">
</div>

Ganti ca-pub-XXXXXXXXXXXXXXXXX dengan publisher ID AdSense kamu dan XXXXXXXXXX dengan slot ID unit iklan yang ingin ditampilkan. Atribut min-height penting untuk mencegah layout shift karena kontainer kosong tidak memiliki dimensi sebelum iklan dimuat.

Iklan sidebar:

<div class="lazy-ad"
  data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
  data-ad-slot="XXXXXXXXXX"
  data-ad-format="rectangle"
  data-full-width-responsive="false"
  style="min-height:280px;min-width:336px;display:block;">
</div>

Untuk iklan sidebar, gunakan format rectangle dan nonaktifkan full-width-responsive karena sidebar biasanya memiliki lebar tetap. Ukuran minimum disesuaikan dengan ukuran unit iklan yang dipilih di dashboard AdSense.

Iklan display adaptif:

<div class="lazy-ad"
  data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
  data-ad-slot="XXXXXXXXXX"
  data-ad-format="horizontal"
  data-full-width-responsive="true"
  style="min-height:90px;display:block;">
</div>

Lazy Load untuk Iklan Sticky di Blog

Iklan sticky adalah unit iklan yang tetap terlihat saat pengunjung scroll, biasanya di bagian bawah layar mobile atau di sidebar desktop. Pendekatan lazy load untuk iklan sticky sedikit berbeda karena iklan ini perlu dimuat segera saat halaman dibuka, bukan saat pengunjung scroll.

Untuk iklan sticky, gunakan pendekatan delayed load alih-alih lazy load berbasis scroll. Iklan baru dimuat setelah halaman selesai dirender sepenuhnya dengan jeda waktu tertentu, misalnya 2 detik setelah halaman siap. Ini memberikan prioritas kepada konten utama untuk dimuat lebih dulu tanpa mengorbankan iklan sticky yang memang perlu selalu terlihat.

<script>
window.addEventListener('load', function() {
  setTimeout(function() {
    var stickyAd = document.getElementById('sticky-ad-container');
    if (stickyAd) {
      var ins = document.createElement('ins');
      ins.className = 'adsbygoogle';
      ins.style.display = 'block';
      ins.setAttribute('data-ad-client', 'ca-pub-XXXXXXXXXXXXXXXXX');
      ins.setAttribute('data-ad-slot', 'XXXXXXXXXX');
      ins.setAttribute('data-ad-format', 'auto');
      stickyAd.appendChild(ins);
      (adsbygoogle = window.adsbygoogle || []).push({});
    }
  }, 2000);
});
</script>

Kontainer untuk iklan sticky menggunakan ID khusus dan styling position fixed. Tempatkan kontainer ini di widget HTML Blogger atau di dalam template dengan CSS position fixed di bawah layar.

Hal yang Perlu Diperhatikan Setelah Pemasangan

Setelah script lazy load terpasang dan kontainer iklan sudah ditambahkan, lakukan beberapa pemeriksaan untuk memastikan semuanya berjalan dengan benar.

Buka blog di browser dan aktifkan DevTools dengan menekan F12. Masuk ke tab Network dan filter berdasarkan kata kunci "pagead" atau "googlesyndication". Scroll halaman secara perlahan dan perhatikan apakah request ke server AdSense baru muncul saat kamu mendekati posisi iklan. Jika request muncul sebelum kamu scroll, ada kemungkinan script tidak berjalan atau kontainer iklan tidak menggunakan class yang benar.

Periksa juga Console di DevTools untuk memastikan tidak ada error JavaScript yang bisa menghambat script lazy load bekerja. Error yang paling umum biasanya berkaitan dengan adsbygoogle yang belum terdefinisi, yang terjadi jika script utama AdSense belum selesai dimuat saat script lazy load dieksekusi.

Pastikan juga tidak ada Cumulative Layout Shift yang terjadi saat iklan dimuat. Ini bisa dideteksi dari tab Performance di DevTools atau menggunakan Google PageSpeed Insights setelah script terpasang. CLS yang tinggi akibat iklan yang dimuat tanpa ruang yang sudah disiapkan sebelumnya bisa merusak skor Core Web Vitals yang berdampak pada peringkat pencarian.

Untuk memastikan meta tag dan struktur halaman blog sudah optimal sebelum fokus pada optimasi iklan, kamu bisa membaca panduan lengkapnya di artikel cara optimasi meta tag SEO di Blogger yang benar dan terbukti efektif.

Iklan yang Cepat Dimuat Lebih Baik dari Iklan yang Banyak

Lazy load iklan bukan sekadar optimasi teknis. Ini adalah perubahan cara pandang tentang bagaimana iklan seharusnya bekerja di dalam ekosistem blog yang sehat. Iklan yang dimuat dengan efisien tidak hanya membuat pengunjung lebih nyaman, tapi juga meningkatkan peluang iklan tersebut benar-benar dilihat dan diklik karena pengunjung tidak keburu meninggalkan halaman akibat loading yang terlalu lambat.

Jika ada bagian dari pemasangan script yang tidak berjalan sesuai yang dijelaskan, atau ada perilaku iklan yang berbeda dari ekspektasi setelah lazy load diterapkan, tuliskan di kolom komentar dengan menyebutkan template yang digunakan dan jenis iklan yang bermasalah.

Pertanyaan yang Sering Diajukan

Apakah lazy load iklan melanggar kebijakan Google AdSense?

Tidak, selama implementasinya benar. Google mengizinkan lazy load iklan dan bahkan merekomendasikannya sebagai bagian dari optimasi performa halaman. Yang tidak diizinkan adalah menyembunyikan iklan dari pengguna atau memuat iklan di area yang tidak bisa dilihat. Lazy load yang berbasis Intersection Observer aman karena iklan tetap dimuat sebelum pengunjung benar-benar melihatnya.

Apakah lazy load mempengaruhi pendapatan AdSense?

Lazy load yang diterapkan dengan benar tidak akan menurunkan pendapatan secara signifikan. Iklan yang tidak pernah masuk ke viewport pengunjung memang tidak akan dimuat, tapi iklan tersebut juga tidak akan menghasilkan klik dalam kondisi normal. Di sisi lain, halaman yang lebih cepat meningkatkan retensi pengunjung yang berdampak positif pada jumlah halaman yang dilihat dan peluang klik secara keseluruhan.

Berapa nilai rootMargin yang paling optimal untuk lazy load iklan?

Tidak ada nilai universal yang berlaku untuk semua blog. Nilai 200 piksel adalah titik awal yang baik untuk sebagian besar kasus. Untuk koneksi yang lebih lambat atau iklan yang lebih berat, nilai yang lebih besar seperti 400 atau 500 piksel bisa memberikan pengalaman yang lebih mulus. Untuk koneksi cepat dengan iklan ringan, nilai 100 piksel sudah cukup. Sesuaikan berdasarkan hasil pengujian dengan PageSpeed Insights setelah implementasi.

Apakah script lazy load ini bisa digunakan di WordPress juga?

Bisa, dengan beberapa penyesuaian. Script dasarnya sama, tapi cara memasangnya berbeda. Di WordPress, script bisa ditambahkan melalui tema atau plugin Custom HTML. Kontainer iklan bisa ditempatkan di widget atau shortcode tergantung dari cara iklan AdSense diintegrasikan di situs WordPress yang bersangkutan.

Apa yang harus dilakukan jika iklan tidak muncul setelah script dipasang?

Periksa tiga hal secara berurutan: pastikan class kontainer iklan menggunakan tepat "lazy-ad" tanpa spasi atau karakter lain, pastikan script lazy load sudah benar-benar tersimpan di template dan tidak ada error saat menyimpan, dan pastikan publisher ID serta slot ID yang diisi di atribut data-ad-client dan data-ad-slot sudah benar dan sesuai dengan unit iklan yang aktif di dashboard AdSense.