LazyLoad adalah teknik yang di gunakan untuk mempercepatkan loading website atau blog yang menggunakan iklan daripada adseanse ataupun mana-mana penyedia periklanan yang menggunakan ads script - teruskan membaca cara pemasangan LazyLoad
Mempercepat Loading Blog dengan Lazy Load AdSense - Meta 2025
Dalam perkongsian ini, saya akan membahas dua kaedah atau cara dengan menggunakan skrip lazy load yang telah saya gunakan dan uji cuba. Cara ini tidak akan mempengaruhi pendapatan atau mengurangkan hasil iklan yang dipasang pada blog anda
Menggunakan Intersection Observer (Kaedah Terbaik)
Intersection Observer ialah API dalam JavaScript yang membolehkan anda memantau elemen dalam skrin (viewport) dan mengesan bila elemen tersebut masuk atau keluar dari pandangan pengguna.
Gunakan kod berikut, jangan lupa gantikan pub id mengikut pub id anda :
<script>
document.addEventListener("DOMContentLoaded", function () {
let adPlaceholder = document.getElementById("adsense-placeholder");
let observer = new IntersectionObserver(function (entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadAdSense();
observer.disconnect();
}
});
});
observer.observe(adPlaceholder);
});
function loadAdSense() {
let script = document.createElement("script");
script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxxxxxxxxx";
script.setAttribute("async", "true");
script.crossOrigin = "anonymous";
document.body.appendChild(script);
}
</script>
Untuk pemasangan iklan anda perlu menggunakan style berikut:
<div id="ads-placeholder">
<!-- MASUKAN KOD IKLAN ADSENSE ANDA -->
</div>Menggunakan Scroll Event (Alternatif)
Scroll event ialah kejadian (event) dalam JavaScript yang dicetuskan apabila pengguna menatal (scroll) halaman web. Ia boleh digunakan untuk menjalankan fungsi tertentu berdasarkan kedudukan skrol pengguna.
Tmbahkan kod berikut di bahagian footer sebelum closing body dan gantikan pub id dengan pub id anda.
<script>
document.addEventListener("scroll", function () {
if (window.scrollY > 500) { // Jika pengguna skrol lebih dari 500px
let adsScript = document.createElement("script");
adsScript.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxxxxx";
adsScript.async = true;
document.body.appendChild(adsScript);
document.removeEventListener("scroll", arguments.callee); // Hentikan event setelah skrip dimuatkan
}
});
</script>Untuk pemasangan iklan anda perlu gunakan styke berikut:
<div id="ads-placeholder">
<!-- MASUKAN KOD IKLAN ADSENSE ANDA -->
</div>Cara pemasangan LazyLoad Adseanse
Untuk memasang Lazyload anda perlu merubah kod iklan asal, cari dan padam kod di dalam iklan adsense
Padam code berikut :
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxxxx"
crossorigin="anonymous"></script>Note: ca-pub-xxxxxxxxxxxxxxxxxx adalah kod id adseanse anda
Di setiap iklan adseanse ada code seperti di atas, anda perlu buang code tersebut, seterusnya kita akan hanya memasang satu code untuk memanggil adsbygoogle.js , biasanya code ini akan di letakan di bahagian footer sebelum closing body, code ini boleh anda dapatkan di atas mengikut meta yang anda gunakan, sama ada meta scroll event ataupun obsever,
Kenapa Perlu Menggunakan Lazy Load untuk AdSense?
Menggunakan lazy load untuk iklan Google AdSense memberi beberapa kelebihan penting, terutamanya dalam aspek prestasi laman web, pengalaman pengguna, dan pendapatan iklan. Berikut adalah beberapa sebab utama:
Meningkatkan Kelajuan Laman Web
- Skrip AdSense boleh memperlahankan kelajuan pemuatan laman kerana ia memuatkan banyak sumber dari pelayan Google.
- Dengan lazy load, skrip AdSense hanya akan dimuat apabila pengguna menatal (scroll) ke kawasan iklan, mengurangkan beban pemuatan awal laman web.
- Contoh: Jika iklan hanya berada di bahagian bawah halaman, tidak perlu memuatkan skripnya semasa halaman pertama kali dibuka.
Mengurangkan Penggunaan Bandwidth & Server Load
- Iklan hanya dimuat apabila diperlukan, mengurangkan jumlah data yang dihantar kepada pelawat yang tidak menatal ke bahagian bawah.
- Ini sangat berguna bagi laman yang menerima trafik tinggi, kerana ia mengurangkan beban server dan mempercepatkan masa respons.
Meningkatkan Core Web Vitals (LCP, FID, CLS)
Google menggunakan Core Web Vitals sebagai faktor ranking SEO. Skrip iklan boleh menyebabkan CLS (Cumulative Layout Shift) yang tinggi, di mana susun atur laman berubah selepas kandungan dimuat.
Dengan lazy load, iklan hanya muncul apabila ruangnya tersedia, mengurangkan masalah perubahan susun atur secara tiba-tiba.Laman yang lebih pantas dan stabil mendapat skor lebih baik dalam Google PageSpeed Insights dan ranking SEO lebih tinggi.
Hasilnya: Laman lebih cepat, pengalaman pengguna lebih baik, dan lebih mesra SEO.
Tidak Mengurangkan Pendapatan Iklan
Banyak yang risau bahawa lazy load akan menurunkan CTR (Click-Through Rate) atau jumlah tayangan iklan.
Namun, sebenarnya pengguna yang benar-benar melihat iklan lebih cenderung untuk klik, meningkatkan CTR dan pendapatan.
Fakta: Iklan yang dimuat hanya apabila kelihatan boleh meningkatkan Viewability Rate, metrik penting dalam iklan digital.
Pengalaman Pengguna yang Lebih Baik
Laman yang cepat dan lancar membuatkan pelawat lebih lama berada di dalamnya.
Iklan yang dimuat secara pintar tidak mengganggu pengalaman membaca atau menyebabkan laman menjadi lambat.
Kesan: Pengguna lebih puas, kurang "bounce rate", dan potensi lebih tinggi untuk mendapatkan pendapatan daripada iklan.
Kesimpulan
Lazy Load AdSense membantu mempercepat laman web tanpa mengurangkan pendapatan.
Ia mengurangkan beban server, meningkatkan SEO, dan memberikan pengalaman pengguna yang lebih lancar.
Google sendiri menyarankan teknik ini untuk mengoptimalkan iklan tanpa mengorbankan prestasi laman.
Jadi, jika laman web anda lambat kerana iklan, pertimbangkan untuk menggunakan teknik Lazy Load AdSense!
