Cara Memasang Lazy Load Google Analytics

Kecepatan situs web adalah salah satu faktor penting yang memengaruhi peringkat SEO dan pengalaman pengguna. Situs yang lambat cenderung membuat pengunjung cepat meninggalkan halaman, sehingga menurunkan performa keseluruhan. Oleh karena itu, optimasi seperti lazy load menjadi sangat relevan, termasuk pada komponen penting seperti Google Analytics.

Google Analytics sering kali disematkan di awal pemuatan halaman, yang secara tidak langsung dapat memperlambat waktu loading. Dengan menerapkan lazy load untuk Google Analytics, kita bisa menunda pemuatannya hingga beberapa detik setelah halaman dimuat sepenuhnya. Artikel ini akan membahas secara detail bagaimana cara menerapkannya.

Daftar Isi :

Pendahuluan
Apa Itu Lazy Load pada Google Analytics?
Mengapa Perlu Menggunakan Lazy Load untuk Google Analytics?
Persiapan Sebelum Memasang Lazy Load
Langkah-Langkah Memasang Lazy Load Google Analytics
Tips Optimasi Tambahan
Penutup

1. Pendahuluan

Google Analytics adalah alat penting untuk menganalisis lalu lintas pengunjung di sebuah situs web. Namun, kode pelacakan standar Google Analytics dapat menambah beban pemuatan halaman karena dimuat bersamaan dengan elemen penting lainnya. Oleh karena itu, teknik lazy load dapat menjadi solusi untuk meningkatkan kecepatan website tanpa mengorbankan fungsi pelacakan.

2. Apa Itu Lazy Load pada Google Analytics?

Lazy load adalah teknik menunda pemuatan suatu elemen sampai benar-benar dibutuhkan. Dalam konteks Google Analytics, lazy load berarti skrip pelacakan tidak langsung dimuat saat halaman dibuka, tetapi ditunda beberapa detik atau sampai pengunjung mulai berinteraksi.

Tujuan utama dari pendekatan ini adalah mengurangi Time to Interactive (TTI) dan mempercepat proses render halaman, yang berpengaruh pada skor PageSpeed dan pengalaman pengguna.

3. Mengapa Perlu Menggunakan Lazy Load untuk Google Analytics?

Memasang kode lazy load untuk Google Analytics penting dilakukan karena memberikan beberapa manfaat signifikan, terutama dalam hal kecepatan dan performa situs web. Berikut penjelasan detail mengapa hal ini perlu:

Meningkatkan Kecepatan Halaman: Kode Google Analytics yang dimuat secara langsung saat halaman dibuka bisa memperlambat waktu loading, terutama di perangkat dengan koneksi lambat. Dengan menunda pemuatan (lazy load), skrip tidak langsung berjalan saat halaman dimuat, sehingga halaman dapat tampil lebih cepat ke pengguna.
Meningkatkan Skor SEO dan Core Web Vitals: Google menggunakan metrik Core Web Vitals seperti First Input Delay (FID) dan Largest Contentful Paint (LCP) sebagai faktor peringkat SEO. Lazy load membantu memperbaiki metrik ini karena skrip yang berat tidak langsung dijalankan di awal.
Menghindari Blokir oleh Adblocker: Beberapa adblocker langsung memblokir permintaan dari Google Analytics. Lazy load dapat menyiasati hal ini karena skrip dimuat secara dinamis setelah halaman tampil, dan sering kali berhasil melewati blok tersebut.
Pengurangan Resource Usage: Mengurangi permintaan HTTP yang terjadi di awal pemuatan. Dengan menunda pemanggilan Google Analytics, permintaan ke server eksternal (google-analytics.com) tidak dilakukan di awal, sehingga server situs Anda bisa lebih fokus pada elemen penting halaman terlebih dahulu.

4. Persiapan Sebelum Memasang Lazy Load

Sebelum memulai, pastikan Anda memiliki:

Kode pelacakan Google Analytics yang aktif (GA4 atau Universal Analytics).
Akses ke template blog atau HTML situs.
Pengetahuan dasar tentang pengeditan HTML/JavaScript.

Catatan: Teknik ini lebih cocok untuk pengguna tingkat lanjut atau yang sudah terbiasa mengelola kode secara manual.

5. Langkah-Langkah Memasang Lazy Load Google Analytics

Pastikan Anda sudah menghapus atau menonaktifkan kode Google Analytics standar dari bagian <head> atau sebelum </body> dari template blog anda.

Tambahkan Script Lazy Load (Universal Analytics)

<script>
setTimeout(function() {
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXX-Y', 'auto'); // Ganti UA-XXXXXXX-Y dengan ID Anda
  ga('send', 'pageview');
}, 3000);
</script>

Untuk Google Analytics 4 (GA4)

<script>
setTimeout(function() {
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX'); // Ganti dengan ID GA4 Anda

  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX';
  document.head.appendChild(script);
}, 3000);
</script>

Catatan: Anda bisa mengubah waktu tunda (3000 ms) sesuai kebutuhan.

Jangan lupa ganti kode Google analytics Universal UA-XXXXXXX-Y dan kode Google analytics 4 (GA4) G-XXXXXXX dengan kode google analytics milik anda, lalu klik simpan dan lihat perbedaanya.

6. Tips Optimasi Tambahan

Gunakan atribut async atau defer jika tidak ingin lazy load penuh.
Kombinasikan dengan caching dan minifikasi file JavaScript.
Uji performa menggunakan Google PageSpeed Insights dan Google Search Console.

7. Penutup

Penerapan teknik lazy load pada Google Analytics adalah langkah cerdas untuk meningkatkan performa situs tanpa mengorbankan fungsi analitik. Dengan menunda pemuatan skrip pelacakan, situs akan terasa lebih ringan, lebih cepat, dan tetap dapat memonitor aktivitas pengguna secara efektif.

Pastikan Anda melakukan pengujian setelah menerapkan teknik ini untuk memastikan semuanya berjalan dengan baik.