Beranda / Semua Postingan / Tips Blogger

Cara Memasang Lazy Load AdSense di Blogger untuk Optimasi Loading Blog

Posting Komentar
Cara memasang lazy load AdSense di Blogger untuk optimasi loading blog

Memasang iklan AdSense di Blogger dapat membantu memonetisasi blog, tetapi script iklan dari layanan pihak ketiga juga dapat menambah pekerjaan browser saat halaman dimuat. Kondisi tersebut pada beberapa blog dapat memengaruhi performa loading, terutama jika halaman memiliki banyak elemen lain yang harus diproses.

Salah satu pendekatan yang sering digunakan untuk mengurangi pekerjaan awal browser adalah menunda pemuatan script iklan atau yang biasa disebut lazy load. Dengan metode ini, script AdSense tidak langsung dipanggil ketika halaman pertama kali dibuka, tetapi baru dimuat setelah terjadi interaksi tertentu, misalnya ketika pengunjung mulai menggulir halaman.

Dalam tutorial ini, Anda akan mempelajari cara memasang lazy load AdSense di Blogger, contoh script yang dapat digunakan, cara memasangnya pada template, serta cara melakukan pengujian setelah perubahan diterapkan.

Catatan penting: Teknik penundaan pemuatan iklan dapat memengaruhi waktu pemuatan dan visibilitas iklan. Hasilnya berbeda pada setiap blog. Tidak ada jaminan teknik ini akan meningkatkan pendapatan, RPM, CTR, atau ranking Google. Selalu uji perubahan pada blog Anda dan pastikan implementasinya tetap mengikuti kebijakan layanan iklan yang digunakan.

Apa Itu Lazy Load AdSense?

Lazy load AdSense adalah pendekatan untuk menunda pemanggilan script iklan sampai kondisi tertentu terpenuhi. Tujuannya adalah mengurangi pekerjaan yang harus dilakukan browser ketika halaman pertama kali dibuka.

Pada implementasi sederhana, script iklan dapat dipanggil setelah pengunjung mulai melakukan scroll. Dengan demikian, browser memiliki kesempatan untuk memproses konten utama terlebih dahulu sebelum memuat script iklan.

Namun, lazy load bukan berarti iklan dimuat tanpa batas atau otomatis membuat website menjadi cepat. Efeknya sangat bergantung pada struktur template, jumlah iklan, ukuran gambar, JavaScript lain, koneksi pengguna, dan berbagai faktor performa halaman.

Kenapa Loading Blog Penting?

Kecepatan halaman merupakan salah satu aspek penting dalam pengalaman pengguna. Pengunjung biasanya ingin segera melihat konten tanpa harus menunggu terlalu lama sebelum halaman dapat digunakan.

Jika sebuah halaman memuat banyak script, gambar, widget, dan elemen pihak ketiga secara bersamaan, browser harus memproses lebih banyak pekerjaan. Karena itu, optimasi sebaiknya tidak hanya berfokus pada iklan.

Beberapa bagian yang juga perlu diperhatikan antara lain:

  • Ukuran dan jumlah gambar pada halaman.
  • Jumlah JavaScript dari template dan widget.
  • Script dari layanan pihak ketiga.
  • Jumlah iklan yang ditampilkan.
  • Struktur HTML dan CSS template.
  • Jumlah widget yang aktif pada halaman.

Bagaimana Cara Kerja Lazy Load AdSense?

Pada metode yang digunakan dalam tutorial ini, script AdSense tidak langsung ditambahkan ke bagian <head> ketika halaman mulai dimuat. Script baru dibuat dan dimasukkan ke halaman setelah pengunjung melakukan scroll.

Secara sederhana, alurnya seperti berikut:

  1. Pengunjung membuka halaman blog.
  2. Browser memuat konten utama halaman.
  3. Script AdSense belum dipanggil oleh kode lazy load.
  4. Pengunjung mulai menggulir halaman.
  5. Script AdSense kemudian dimuat secara asynchronous.
  6. Unit iklan yang tersedia dapat diproses oleh AdSense.

Pendekatan ini dapat mengurangi pekerjaan JavaScript pada fase awal halaman, tetapi tetap perlu diuji karena penundaan pemuatan iklan juga dapat mengubah waktu ketika iklan mulai tersedia.

Script Lazy Load AdSense untuk Blogger

Berikut contoh script sederhana untuk menunda pemuatan library AdSense sampai pengguna mulai melakukan scroll. 

<script type='text/javascript'>
//<![CDATA[
(function () {
  var lazyAdSenseLoaded = false;

  function loadAdSense() {
    if (lazyAdSenseLoaded) {
      return;
    }

    lazyAdSenseLoaded = true;

    var adScript = document.createElement('script');

    adScript.src =
      'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX';

    adScript.async = true;
    adScript.crossOrigin = 'anonymous';

    document.head.appendChild(adScript);

    window.removeEventListener('scroll', loadAdSense);
  }

  window.addEventListener('scroll', loadAdSense, {
    passive: true
  });
})();
//]]>
</script>

Ganti ca-pub-XXXXXXXXXXXXXXXX dengan Publisher ID AdSense milik Anda. Jangan menggunakan Publisher ID milik orang lain.

Perhatian: Script di atas hanya menangani pemuatan library AdSense. Unit iklan yang digunakan di halaman tetap harus memiliki implementasi iklan yang sesuai. Jangan menghapus kode unit iklan yang masih dibutuhkan oleh template atau halaman tanpa mengetahui fungsi kode tersebut.

Cara Memasang Lazy Load AdSense di Blogger

1. Backup Template Blogger

Sebelum mengubah kode template, lakukan backup terlebih dahulu. Langkah ini penting agar Anda dapat mengembalikan template apabila terjadi kesalahan.

2. Buka Menu Tema

Masuk ke dashboard Blogger, pilih blog yang ingin dioptimalkan, kemudian buka menu Tema. Gunakan opsi untuk mengedit HTML template.

3. Cari Tag </body>

Gunakan fitur pencarian pada editor HTML untuk menemukan tag penutup: </body>.

Pada banyak editor kode, pencarian dapat dilakukan menggunakan kombinasi tombol Ctrl + F pada Windows atau Command + F pada perangkat yang mendukungnya.

4. Tempelkan Script

Tempelkan script lazy load tersebut tepat sebelum tag </body>.

Contohnya: 

<script type='text/javascript'>
  // Script lazy load AdSense Anda
</script>

</body>

5. Periksa Publisher ID

Pastikan bagian Publisher ID pada URL script sudah sesuai dengan akun AdSense yang digunakan pada blog.

6. Simpan Template

Setelah memastikan kode berada di tempat yang benar, simpan perubahan template. Jika Blogger menampilkan pesan error, jangan memaksakan penyimpanan sebelum menemukan penyebabnya.

Apakah Script AdSense Lama Harus Dihapus?

Bagian ini perlu diperhatikan. Jangan langsung menghapus semua script adsbygoogle.js hanya karena Anda memasang script lazy load. Template Blogger dapat menggunakan script tersebut dengan cara yang berbeda.

Yang perlu dilakukan adalah memeriksa apakah terdapat pemanggilan library AdSense yang menyebabkan script tetap dimuat pada awal halaman. Jika terdapat beberapa pemanggilan script yang sama, penanganannya harus disesuaikan dengan struktur template dan unit iklan yang digunakan.

Jika Anda tidak yakin bagian mana yang harus diubah, lebih aman melakukan backup template terlebih dahulu dan menguji perubahan pada salinan atau lingkungan pengujian yang tersedia.

Cara Menguji Lazy Load AdSense

Setelah script dipasang, jangan langsung menyimpulkan bahwa optimasi berhasil. Lakukan pengujian untuk melihat apakah script benar-benar ditunda dan apakah unit iklan tetap berfungsi.

Uji dengan Browser

  1. Buka halaman blog menggunakan jendela private atau incognito.
  2. Buka Developer Tools jika Anda memahami penggunaannya.
  3. Muat ulang halaman.
  4. Periksa Network untuk melihat pemanggilan script AdSense.
  5. Amati kapan script mulai dimuat.
  6. Lakukan scroll dan periksa kembali aktivitas jaringan.

Jika implementasinya bekerja sesuai rancangan, pemanggilan library AdSense seharusnya terjadi setelah event yang digunakan oleh script terpenuhi.

Uji Kecepatan Halaman

Gunakan alat pengujian performa seperti PageSpeed Insights atau Lighthouse untuk membandingkan kondisi sebelum dan sesudah perubahan.

Sebaiknya lakukan beberapa pengujian, bukan hanya sekali. Hasil pengukuran dapat berubah karena kondisi jaringan, server, perangkat, iklan pihak ketiga, dan faktor lainnya.

Kelebihan dan Kekurangan Lazy Load AdSense

Kelebihan

  • Dapat mengurangi pekerjaan JavaScript pada fase awal halaman.
  • Dapat membantu mengurangi resource yang dimuat sejak awal.
  • Konten utama dapat memperoleh kesempatan untuk diproses lebih dahulu.
  • Dapat menjadi salah satu bagian dari strategi optimasi performa Blogger.

Kekurangan

  • Iklan dapat terlambat dimuat.
  • Pengunjung yang tidak melakukan scroll mungkin tidak memicu pemuatan iklan.
  • Performa dan pendapatan iklan dapat berubah setelah implementasi.
  • Implementasi yang tidak tepat dapat menyebabkan unit iklan tidak tampil.
  • Tidak menyelesaikan masalah performa dari gambar, CSS, atau JavaScript lainnya.

Kesalahan yang Sering Terjadi

1. Publisher ID Tidak Sesuai

Pastikan Publisher ID pada script sesuai dengan akun AdSense yang digunakan. Kesalahan pada ID dapat menyebabkan implementasi tidak bekerja sebagaimana mestinya.

2. Script Dipasang Berkali-kali

Hindari menambahkan script lazy load yang sama berkali-kali. Periksa template dan widget untuk mengetahui apakah terdapat pemanggilan library AdSense yang duplikat.

3. Menghapus Kode Iklan Tanpa Backup

Kesalahan ini cukup berisiko bagi pemula. Selalu buat backup template sebelum mengubah struktur HTML atau JavaScript.

4. Hanya Mengandalkan Lazy Load

Lazy load bukan satu-satunya cara mempercepat Blogger. Jika blog masih lambat, periksa gambar berukuran besar, widget yang tidak diperlukan, script eksternal, CSS, font, dan elemen lain yang ikut dimuat halaman.

5. Tidak Melakukan Pengujian

Jangan hanya melihat halaman dari browser sendiri. Uji halaman pada perangkat mobile dan desktop serta periksa apakah iklan dan konten tetap berfungsi.

Tips Optimasi Loading Blogger Selain Lazy Load

Jika tujuan utama Anda adalah meningkatkan performa blog, gunakan pendekatan yang lebih menyeluruh. Beberapa optimasi yang dapat dipertimbangkan antara lain:

  • Kompres gambar sebelum diunggah.
  • Gunakan gambar dengan ukuran yang sesuai kebutuhan tampilan.
  • Hapus widget yang tidak diperlukan.
  • Kurangi penggunaan script pihak ketiga yang tidak penting.
  • Gunakan CSS secara efisien.
  • Hindari memasang terlalu banyak elemen animasi.
  • Periksa performa halaman secara berkala.
  • Pastikan template tetap nyaman digunakan pada perangkat mobile.

FAQ Lazy Load AdSense di Blogger

Apakah lazy load AdSense bisa membuat Blogger lebih cepat?

Lazy load dapat mengurangi pekerjaan pemuatan script iklan pada fase awal, tetapi hasilnya berbeda pada setiap website. Kecepatan halaman juga dipengaruhi oleh gambar, template, JavaScript, widget, jaringan, dan berbagai faktor lainnya.

Apakah lazy load AdSense menjamin pendapatan tetap sama?

Tidak ada jaminan. Menunda pemuatan iklan dapat mengubah waktu iklan tersedia dan berpotensi memengaruhi metrik iklan. Karena itu, lakukan pengujian setelah menerapkan perubahan.

Apakah script ini bisa digunakan di Blogger?

Script JavaScript dapat ditempatkan pada template Blogger, tetapi kompatibilitas tetap bergantung pada struktur template dan implementasi iklan yang digunakan.

Apakah saya harus menghapus semua script AdSense dari template?

Tidak. Jangan menghapus semua script secara otomatis. Periksa terlebih dahulu bagaimana library dan unit iklan AdSense digunakan pada template Anda.

Apakah lazy load AdSense bisa meningkatkan ranking Google?

Tidak ada jaminan. Optimasi performa merupakan salah satu bagian dari pengembangan pengalaman halaman, tetapi posisi pencarian ditentukan oleh banyak faktor dan tidak dapat dijamin hanya dengan memasang satu script.

Bagaimana mengetahui script lazy load sudah bekerja?

Anda dapat memeriksa Network pada Developer Tools dan melihat kapan adsbygoogle.js dipanggil. Lakukan pengujian sebelum dan sesudah scroll untuk memastikan perilakunya sesuai dengan rancangan.

Kesimpulan

Cara memasang lazy load AdSense di Blogger dapat menjadi salah satu langkah untuk mengurangi pekerjaan browser pada saat halaman pertama kali dimuat. Metode ini bekerja dengan menunda pemanggilan library iklan sampai kondisi tertentu, seperti ketika pengunjung mulai menggulir halaman.

Meskipun demikian, lazy load bukan solusi tunggal untuk semua masalah kecepatan Blogger. Anda tetap perlu memperhatikan ukuran gambar, widget, JavaScript, CSS, template, dan berbagai resource pihak ketiga lainnya.

Sebelum menerapkan perubahan pada blog utama, lakukan backup template dan uji apakah seluruh unit iklan tetap berfungsi dengan baik. Bandingkan juga performa halaman sebelum dan sesudah optimasi agar Anda dapat mengetahui dampak sebenarnya pada blog.

Dengan pendekatan yang terukur, Anda dapat mengoptimalkan performa Blogger tanpa sekadar mengejar skor alat pengujian, tetapi juga tetap memperhatikan pengalaman pengunjung dan fungsi monetisasi blog.

Posting Komentar untuk "Cara Memasang Lazy Load AdSense di Blogger untuk Optimasi Loading Blog"

Posting Komentar