Cara Ampuh Meningkatkan Skor Google PageSpeed dengan Lazy Loading Adsense di Hugo

Memiliki blog berbasis Static Site Generator (SSG) seperti Hugo memang memberikan keunggulan kecepatan yang luar biasa. Namun, performa tersebut seringkali merosot drastis saat kita mulai memasang iklan Google Adsense. Script eksternal dari Adsense biasanya memiliki ukuran yang cukup besar dan membebani proses render awal halaman web.

Masalah utamanya adalah script Adsense akan dimuat segera setelah browser membuka website, bahkan sebelum konten utama selesai ditampilkan. Hal ini menyebabkan skor Largest Contentful Paint (LCP) dan Total Blocking Time (TBT) pada Google PageSpeed Insights menjadi merah, yang tentu buruk untuk SEO dan pengalaman pengguna.

Kabar baiknya, Anda bisa mengatasi masalah tersebut dengan menerapkan teknik lazy loading adsense di hugo. Dengan metode ini, script iklan hanya akan dimuat ketika pengunjung melakukan interaksi (seperti scroll atau klik) atau setelah durasi waktu tertentu. Mari kita simak panduan teknisnya di bawah ini.

Persiapan Sebelum Memulai

#

Sebelum masuk ke tahap eksekusi, pastikan Anda telah menyiapkan hal-hal berikut:

• Akses ke direktori proyek Hugo Anda.
• Editor teks favorit (VS Code, Sublime Text, atau Vim).
• Script unit iklan dari akun Google Adsense Anda.
• Pemahaman dasar tentang struktur folder Hugo, terutama folder layouts/partials.

Langkah Demi Langkah Menerapkan Lazy Loading Adsense di Hugo

#

Berikut adalah urutan pengerjaan untuk mengoptimalkan pemuatan iklan tanpa mengorbankan kecepatan situs.

1. Membuat Partial Script Delayer

#

Langkah pertama adalah membuat sebuah file “pemicu” yang bertugas menunda pemuatan script eksternal. Buatlah file baru di folder layouts/partials/script-delayer.html dan masukkan kode berikut:

<script>
const autoLoadDuration = 5; // Durasi dalam detik
const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];
const autoLoadTimeout = setTimeout(runScripts, autoLoadDuration * 1000);

eventList.forEach(function(event) {
    window.addEventListener(event, triggerScripts, { passive: true })
});

function triggerScripts() {
    runScripts();
    clearTimeout(autoLoadTimeout);
    eventList.forEach(function(event) {
         window.removeEventListener(event, triggerScripts, { passive: true });
    });
}

function runScripts() {
    document.querySelectorAll("script[data-delay]").forEach(function(scriptTag) {
        const delaySrc = scriptTag.getAttribute("data-delay");
        if (delaySrc) {
            scriptTag.setAttribute("src", delaySrc);
            scriptTag.removeAttribute("data-delay");
            if (scriptTag.hasAttribute("async")) {
                scriptTag.setAttribute("async", ""); 
            } else if (scriptTag.hasAttribute("defer")) {
                scriptTag.setAttribute("defer", ""); 
            } else {
                scriptTag.setAttribute("defer", "");
            }
        }
    });
}
</script>

Penjelasan Teknis: Script ini bekerja dengan memantau aktivitas pengguna (eventList). Jika user melakukan interaksi seperti scroll atau menyentuh layar, fungsi runScripts akan dipicu. Jika user tidak melakukan apa pun, script tetap akan dimuat secara otomatis setelah 5 detik (autoLoadDuration) agar performa SEO tetap terjaga.

2. Memanggil Partial di Template Utama

#

Agar script delayer ini aktif di seluruh halaman, Anda perlu memanggilnya di file base layout. Biasanya terletak di layouts/_default/baseof.html.

Letakkan kode pemanggil tepat sebelum tag penutup </body>:

    {{ partial "script-delayer.html" . }}
</body>

Penjelasan Teknis: Penempatan di akhir body bertujuan agar script pemantau interaksi ini tidak menghambat rendering elemen visual utama (DOM) blog Anda.

3. Modifikasi Script Unit Iklan Adsense

#

Sekarang, saatnya mengubah cara Anda memasang iklan. Biasanya, script bawaan Adsense menggunakan atribut src. Kita akan mengubahnya menjadi data-delay agar tidak langsung dieksekusi oleh browser.

Ubah unit iklan Anda menjadi seperti ini:

<script async data-delay="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx"
     crossorigin="anonymous"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-xxxxxxxxxxx"
     data-ad-slot="xxxxxxxx"></ins>

<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Penjelasan Teknis: Dengan mengganti src menjadi data-delay, browser menganggap tag tersebut bukan script aktif saat page load pertama. Setelah interaksi pengguna terdeteksi, script delayer yang kita buat di langkah pertama akan memindahkan nilai dari data-delay kembali ke src, sehingga iklan baru akan dimuat saat itu juga.

Mengapa Menggunakan Metode Ini?

#

Penerapan lazy loading adsense di hugo sangat krusial bagi blog yang mengejar performa tinggi. Google Adsense dikenal “rakus” sumber daya karena melakukan banyak request DNS dan eksekusi JavaScript yang kompleks. Tanpa penundaan, browser akan sibuk mengunduh iklan sementara konten teks Anda bahkan belum tampil sempurna di mata pembaca.

Dari sisi teknis, penggunaan atribut data-delay ini jauh lebih aman dibandingkan memanipulasi script Adsense secara ekstrem yang berisiko melanggar kebijakan Terms of Service (ToS) Google. Kita tidak mengubah fungsi script iklan, melainkan hanya mengatur kapan script tersebut boleh mulai bekerja.

Selain itu, metode ini sangat adaptif terhadap algoritma Core Web Vitals. Dengan memberikan prioritas penuh pada elemen visual utama di detik pertama, Anda bisa mendapatkan skor performa yang jauh lebih tinggi (bahkan mencapai 90-100) di PageSpeed Insights, meskipun blog tersebut penuh dengan iklan.

Kesimpulan dan Tips Tambahan

#

Menerapkan lazy loading adsense di hugo adalah langkah cerdas untuk menjaga keseimbangan antara monetisasi dan performa website. Dengan memisahkan proses pemuatan script iklan dari proses render utama, blog Anda tetap terasa ringan bagi pengunjung namun tetap menghasilkan pendapatan.

Tips Troubleshooting:

• Iklan Tidak Muncul: Pastikan Anda telah mengganti ca-pub-xxxxxxxx dengan ID asli Anda dan periksa konsol browser (F12) apakah ada error JavaScript.
• Tampilan Berantakan: Gunakan pembungkus <div> dengan tinggi tetap (fixed height) pada unit iklan untuk menghindari layout shift (CLS) saat iklan muncul.
• Waktu Tunggu: Anda bisa mengatur autoLoadDuration ke angka yang lebih tinggi jika ingin skor PageSpeed lebih maksimal, namun 5 detik adalah angka yang cukup aman.