Ditulis oleh: Ditulis pada: 2/13/2021
Defer analytics.js Tanpa gtag.js Untuk Loading Blog Lebih Ringan - Banyak blogger yang mengeluh dengan pengaruh dari JS Analytics pada loading blog. Dari tool speed blog seperti PageSpeed Insights dan GTMatrix, diketahui bahwa JS Analytics memberikan pengaruh pada loading blog yaitu dari gtag.js yang dipasang di blog.
Seperti kita ketahui, awalnya Google Analytics menggunakan JS lama dengan analytics.js yang hanya merekam lalu lintas pengunjung saja. Namun kemudian Analytics menambah fiturnya yang bisa merekam perilaku pengunjung seperti statistik klik pada sebuah tombol yang dikenal dengan Global Site Tags dengan gtag.js.
analytics.js vs gtag.js
Tentunya dengan penambahan fitur ini membuat ukuran JS Analytics yang digunakan yaitu gtag.js menjadi semakin besar, sehingga hal ini cukup memberikan masalah pada loading blog.
Padahal sebagian besar blogger hanya memerlukan statistik lalu lintas saja, tanpa menggunakan fitur tambahan untuk statistik klik tombol dan lainnya. Sehingga penggunaan gtag.js ini kurang tepat karena tidak banyak fitur yang digunakan.
Untuk itu, jika kita hanya memantau lalu lintas pengunjung saja, sebaiknya gunakan JS Analytics klasik atau JS lama dengan analytics.js yang ukurannya tentu lebih kecil dari gtag.js yang baru.
JS Analytics Klasik
JS Analytics klasik atau JS lama dengan analytics.js itu seperti berikut:
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>Namun dengan asynchronous js seperti di atas, masih menambah beban loading blog karena js dimuat bersamaan dengan pemuatan halaman.
Defer JS Analytics Klasik
Namun jika kita menggunakan defer js, maka pemuatan js tidak akan dimuat bersamaan dengan pemuatan halaman, melainkan js dimuat browser di latar belakang lalu dieksekusi setelah selesai pemuatan halaman. Jika Anda ingin mencoba menggunakan defer analytics.js silahkan gunakan kode berikut ini, simpan di atas kode </body>:
<script>
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://www.google-analytics.com/analytics.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
//]]>
</script>Silahkan ganti kode UA-XXXXX-Y dengan ID Analytics blog Anda.
Kemudian tambahkan kode preload berikut di bawah kode <head>
<link as='script' href='https://www.google-analytics.com/analytics.js' rel='preload'/>Selesai, demikian defer analytics.js.
Jika Anda memerlukan defer js analytics dengan gtag.js silahkan ikuti postingan Mengatasi Gangguan Loading Blog Dari JS Google Analytics.
Semoga bermanfaat.