Pemasangan Lazy Load AdSense

Sebagai pengelola situs yang baik, pastinya akan berusaha untuk meningkatkan performa kecepatan pemuatan halaman situs. Selanjutnya, sebagian dari kalian mungkin sudah atau berencana memasang Google AdSense di situs web kalian. Namun, terlepas dari seberapa cepat website kamu awalnya, menambahkan Google AdSense akan mengurangi kecepatan pemuatan halaman situsmu. Bahkan, bisa dua sampai lima kali lebih lambat daripada tanpa AdSense. Oleh karena itu, penggunaan lazy load pada AdSense merupakan salah satu cara untuk meminimalisir dampak AdSense terhadap performa kecepatan pemuatan halaman situs.

Kecepatan situs web vs. tingkat konversi

Sebelum menggunakan optimasi ini, kamu harus tahu dampaknya. Kecepatan situs web akan meningkat dengan mengorbankan jumlah impresi AdSense.

Kecepatan pemuatan halaman web sebelum dan setelah pemasangan AdSense (tanpa lazy load). — Gambar 1. Kecepatan pemuatan halaman web sebelum dan setelah pemasangan AdSense (tanpa *lazy load*).

Pengalaman pengguna (user experience) menjadi lebih baik jika kamu meningkatkan kecepatan situs web. Tapi kita semua tahu bahwa beban paling berat dalam kecepatan situs adalah AdSense itu sendiri. Jadi, kamu dapat mengoptimasi kode AdSense jika bersedia menerima konsekuensinya.

Kamu juga bisa mencoba bereksperimen untuk melihat untung tidaknya menggunakan lazy load. Namun, kamu mungkin butuh waktu lama untuk dapat membandingkannya. Caranya yaitu:

Percobaan 1: Pasang AdSense tanpa lazy load pada situsmu. Catat kecepatan rata-rata pemuatan dan penghasilan dari AdSense dalam beberapa minggu atau bulan.
Percobaan 2: Selanjutnya, implementasikan lazy load pada AdSense yang telah terpasang. Catat juga kecepatan rata-rata pemuatan dan penghasilan dari AdSense dalam rentang waktu yang sama dengan percobaan 1.
Bandingkan kecepatan dan penghasilan dari AdSense pada percobaan 1 dan 2 di atas. Dari hasil perbandingan itu, kamu bisa menentukan apakah perlu menggunakan lazy load atau tidak.

Lazy load menggunakan plugin

Beberapa content management system (CMS) seperti WordPress memiliki plugin lazy load dari pihak ketiga, seperti:

Ad Inserter memiliki fitur lazy load pada versi berbayar (Pro)
Advanced Ads memiliki fitur lazy load pada versi berbayar (Pro)
Plugin Ad Inserter atau Advanced Ads versi gratis yang dikombinasikan dengan plugin Flying Scripts.

Umumnya, dengan menggunakan plugin, implementasi Lazy Load AdSense makin mudah. Kamu bisa mengatur kapan dan bagaimana iklan AdSense mulai muncul. Apakah beberapa detik setelah pemuatan halaman selesai? Apakah saat pengunjung mulai melakukan scoll, klik, atau aksi lain? Kamu dapat menentukannya tanpa harus melakukan hal-hal teknis seperti coding.

Lazy load menggunakan metode manual

Website seperti blogger tidak memiliki pilihan plugin untuk lazy load. Jadi satu-satunya cara untuk memasang lazy load AdSense yaitu dengan metode manual.

Struktur kode AdSense

Sebelum mengoptimalkan kinerja AdSense, kamu harus memahami struktur kode unit iklan AdSense. Setiap kode unit dapat dibagi menjadi tiga bagian. Sebut saja “Ads JS library“, “Ads Unit Identifier“, dan “Ads load command“. Strukturnya seperti berikut:

<!-- Init Ads JS library -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<!-- Ads Unit Identifier -->
<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>

<!-- Init Ads load command -->
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Ads JS library adalah kode utama AdSense itu sendiri. Semua fungsi AdSense ada di sini. Sebenarnya, setiap halaman web hanya memerlukan satu kode utama ini.

Kemudian, Ads Unit Identifier akan memberitahu Google posisi dan bagaimana iklan akan dimuat. Unit ini adalah tempat di mana iklan-iklan nanti akan muncul. Jika kamu ingin memunculkan 2 iklan, maka kamu perlu menuliskan unit ini dua kali (misal di header dan sidebar).

Dan yang terakhir, Ads load command adalah kode pemanggil untuk mendapatkan iklan. Jumlah kode pemanggil ini harus sama dengan jumlah Ads Unit Identifier dalam halaman tersebut.

Jadi, untuk mengoptimalkan kode unit iklan ini, kamu harus menunda pemuatan “Ads JS library” dan “Ads load command“. Maksud saya adalah, setelah pemuatan awal halaman selesai dan pengguna mulai berinteraksi (misal menggulir atau scrolling), baru jalankan kedua kode tersebut.

Sebenarnya ada banyak kode lazy loading untuk AdSense di luar sana. Tapi saya sudah mencobanya, dan hasilnya tidak cukup baik. Terutama jika menggunakan iklan Otomatis (fitur Auto Ads). Jadi, saya menggabungkan dan memodifikasi beberapa kode rekomendasi agar sesuai dengan kebutuhan saya.

Kode lazy load AdSense

Pertama, cari dan hapus “Init Ads JS library” dan “Init Ads load command” dari semua kode unit iklan AdSense yang telah kamu pasang. Jika kamu menampilkan lebih dari 1 AdSense, jangan lupa hapus semua “Init Ads JS library” dan “Init Ads load command” yang ada.

Jadi, setiap kode AdSense yang telah kamu pasang, hanya tersisa Ads Unit Identifier. Bagian yang ini jangan kamu hapus. Hasilnya, seperti pada kode berikut:

<!-- Init Ads JS library (dihapus) -->

<!-- Ads Unit Identifier -->
<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>

<!-- Init Ads load command (dihapus) -->

Kedua, silahkan salin kode di bawah ini ke bagian akhir HTML, tepat sebelum </body>.

<!-- Defer Ads JS library -->
<script type='text/javascript'>
//<![CDATA[
/* Lazy Load AdSense*/
var lazyadsense = !1;
window.addEventListener("scroll", function() {
    (0 != document.documentElement.scrollTop && !1 === lazyadsense || 0 != document.body.scrollTop && !1 === lazyadsense) && (! function() {
        var e = document.createElement("script");
        e.id = "g_ads_js", e.type = "text/javascript", e.async = "async", e.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
        var a = document.getElementsByTagName("script")[0];
        a.parentNode.insertBefore(e, a)

      	/* only for AdSense Auto ads*/
      	var gads = document.getElementById("g_ads_js")
        gads.setAttribute("data-ad-client", "ca-pub-XXXXXXXXXXXXXXXX");

    }(), lazyadsense = !0)
}, !0);
//]]>
</script>

<!-- Defer Ads load command-->
<script>
    (adsbygoogle = window.adsbygoogle || []).onload = function () {
        [].forEach.call(document.getElementsByClassName('adsbygoogle'), function () {
            adsbygoogle.push({})
        })
    }
</script>

Perhatikan Baris 14 dan 15 di atas. Jika kamu mengaktifkan Auto Ads di pengaturan situs AdSense, ubah “ca-pub-XXXXXXXXXX” dengan ID AdSense kamu. Jika tidak, hapus kedua baris 14 dan 15.

Setelah itu, periksa kembali situs web kamu. Pastikan AdSense mulai termuat hanya ketika kamu mulai menggulir halaman.

Mengatasi cumulative layout shift

Google memperbarui algoritmanya pada 18 Mei 2020 lalu. Pembaruan ini mulai mempertimbangkan perubahan lokasi awal dari tiap elemen HTML setelah halaman termuat. Perubahan lokasi ini disebut sebagai cumulative layout shift (CLS). Hal ini akan berdampak pada skor Search Engine Results Page (SERP) halaman tersebut. Hanya perubahan yang diinginkan pengguna yang tidak mempengaruhi CLS.

Jadi dengan menggunakan lazy load AdSense di atas, akan meningkatkan kecepatan situs web. Tapi, hal ini juga akan berdampak buruk pada skor CLS. Karena sebelum AdSense termuat, belum ada elemen HTML tempat AdSense akan termuat (artinya dimensinya 0 piksel). Namun setelah peramban memuat iklan AdSense, akan ada penambahan sebuah elemen yang dimensi tingginya sekitar 280 px sampai 320 px. Otomatis, seluruh elemen di bawah elemen AdSense tersebut akan berubah lokasi menjadi semakin ke bawah. Alhasil, hal ini menaikkan skor CLS lebih dari 0,5. Padahal nilai maksimumnya tidak boleh lebih dari 0,25.

Untuk itu perlu adanya perubahan dalam struktur kode di atas. Cari semua lokasi Ads Unit Identifier, lalu tambahkan elemen <div> (baris 1 dan 13) seperti pada kode berikut:

<div style="min-height: 320px;">
     <!-- Init Ads JS library (dihapus) -->

     <!-- Ads Unit Identifier -->
     <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>

     <!-- Init Ads load command (dihapus) -->
</div>

Namun, jika kamu menggunakan Ads Unit dengan dimensi tertentu, maka sesuaikan tinggi minimum <div> di atas dengan nilai tingginya (height). Semisal kamu memiliki Ads Unit dengan dimensi 728x120 px, maka ubah kodenya menjadi <div style="min-height: 120px;">, seperti pada kode berikut:

<div style="min-height: 120px;">
     <!-- Ads Unit Identifier -->
     <ins class="adsbygoogle"
          style="display:inline-block; width:728px; height:120px"
          data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
          data-ad-slot="1234567890"></ins>
</div>

Catatan: untuk saat ini, jika kamu hanya menggunakan auto ads, maka tidak akan ada kode Ads Unit Identifier yang terpasang. Jadi, jika nilai CLS terlalu tinggi akibat lazy loading AdSense, saya belum bisa memperbaikinya. Dalam hal ini, hapus kode lazy load AdSense, dan gunakan kode asli auto ads.

Cover image oleh freepik