GDPlayer

Beranda

Cara Pasang Script Lazy Load Iklan AdSense di Blog

Cara Pasang Script Lazy Load Iklan AdSense Berbagai Jenis di Blog

Tingkatkan Kecepatan Website & Skor Core Web Vitals Tanpa Mengorbankan Pendapatan

Memiliki iklan AdSense di blog adalah cara yang bagus untuk monetisasi, tetapi seringkali script iklan menjadi penyebab utama lambatnya loading website. Hal ini berdampak buruk pada pengalaman pengguna dan skor Core Web Vitals (CWV). Solusinya adalah dengan menerapkan Lazy Loading pada iklan.

Lazy loading adalah teknik menunda pemuatan script iklan sampai pengguna melakukan scroll dan iklan akan masuk ke dalam layar (viewport). Dengan begitu, pemuatan awal halaman menjadi jauh lebih cepat.

Langkah 1: Script Utama Lazy Load

Pertama, kita memerlukan script JavaScript utama yang berfungsi untuk mendeteksi kapan unit iklan harus dimuat. Script ini menggunakan Intersection Observer API yang modern dan efisien.

Salin kode di bawah ini dan letakkan tepat di atas tag penutup </body> di dalam editor tema HTML blog Anda.

<script type='text/javascript'>
//
</script>
Catatan: Script di atas hanya akan memuat file utama adsbygoogle.js satu kali saat pengguna pertama kali melakukan scroll. Ini membuat pemuatan awal halaman bebas dari script AdSense.

Langkah 2: Penerapan pada Berbagai Jenis Iklan

Setelah script utama terpasang, kini saatnya memodifikasi kode unit iklan AdSense Anda agar mendukung lazy load.

1. Untuk Iklan Display & In-Article (Manual)

Jika Anda menempatkan iklan secara manual (Display, Link, In-article, In-feed), Anda perlu sedikit mengubah kodenya.

Kode Iklan AdSense Asli:

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Ubah menjadi seperti ini:

Hapus bagian <script>...</script> dari kode asli. Biarkan hanya bagian tag <ins>...</ins> saja.

<!-- Letakkan kode ini di mana Anda ingin iklan tampil -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
Penting: Script lazy load yang kita pasang di Langkah 1 sudah menangani proses "push" iklan secara otomatis ketika pengguna scroll. Anda tidak perlu lagi menambahkan (adsbygoogle = window.adsbygoogle || []).push({}); setiap kali memasang iklan manual.

2. Untuk Iklan Otomatis (Auto Ads)

Kabar baiknya, jika Anda hanya menggunakan Iklan Otomatis (Auto Ads), Anda tidak perlu melakukan modifikasi tambahan. Script utama pada Langkah 1 sudah cukup.

Cukup pastikan kode Iklan Otomatis Anda terpasang di antara <head> dan </head>, dan script lazy load dari Langkah 1 terpasang sebelum </body>. Sistem akan bekerja secara otomatis:

  1. Halaman dimuat tanpa adsbygoogle.js.
  2. Pengguna melakukan scroll.
  3. Script lazy load memuat adsbygoogle.js.
  4. Setelah termuat, script Iklan Otomatis akan berjalan dan menempatkan iklan di posisi terbaik.

Peringatan dan Hal yang Perlu Diperhatikan

  • Backup Template: Selalu buat cadangan (backup) template atau tema blog Anda sebelum melakukan perubahan kode apapun.
  • Potensi Pendapatan: Secara teori, lazy loading bisa sedikit mengurangi impresi iklan karena iklan di bagian paling bawah halaman tidak akan dimuat jika pengguna tidak scroll sampai ke sana. Namun, manfaat dari kecepatan website dan SEO yang lebih baik seringkali lebih besar daripada potensi penurunan minor ini.
  • Uji Coba: Setelah memasang script, bersihkan cache browser Anda dan kunjungi blog Anda. Scroll ke bawah perlahan dan perhatikan apakah iklan muncul dengan benar saat memasuki area layar.
  • Kebijakan AdSense: Teknik lazy loading ini secara umum aman dan sesuai dengan praktik terbaik yang direkomendasikan Google untuk performa web. Teknik ini tidak menyembunyikan atau memanipulasi iklan secara tidak wajar.
Halo