Halo sobat blogger, pada kesempatan kali ini saya akan membagikan kepada kalian, cara memasang lazy load histats dan Google analytics. Pada umumnya script Analytic lumayan sangat memberatkan loading blog, apalagi script dari histats yang memiliki internal js yang sangat besar.
Ternyata masalah tersebut bisa di atasi loh sob, cukup dengan pasang script lazy load saja. Admin sudah tes sendiri, sebelum memasang lazy load ini, kecepatan blog di pagespeed hanya 90% tapi setelah pasang script lazy load histats ini meningkat jadi 99%.
Nah buat kalian yang belum tau tentang fungsi lazy load histats ini apa, admin akan jelaskan fungsi atau kegunaannya. Lazy load histats ini berfungsi untuk menunda loadingnya sebuah javascript js sebelum melakukan scroll. Jadi apabila seorang pengunjung belum melakukan scroll pada blog kalian, maka script histats tidak akan di muat. Begitu kira - kira.
Untuk cara pemasangannya kalian ikuti dan perhatikan step by step yang admin jelaskan dibawah ini. Oke langsung saja kita mulai.
Cara Pasang Lazy Load Histats
1). Langkah pertama, silahkan kalian siapkan script histats. Kurang lebih scripnya seperti ini.
<!-- Histats.com (div with counter) -->
<div id="histats_counter"></div>
<!-- Histats.com START (aync)-->
<script type="text/javascript">var _Hasync= _Hasync|| [];
_Hasync.push(['Histats.start', '1,4579694,4,511,95,18,00010000']);
_Hasync.push(['Histats.fasi', '1']);
_Hasync.push(['Histats.track_hits', '']);
(function() {
var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
hs.src = ('//s10.histats.com/js15_as.js');
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
})();</script>
<noscript><a href="/" target="_blank"><img src="//sstatic1.histats.com/0.gif?4579694&101" alt="" border="0"></a></noscript>
<!-- Histats.com END -->
2). Jika sudah, perhatikan script yang saya tandai dengan warna di atas, kemudian kalian pindahkan script tersebut. Pindahkan kedalam script lazy load dibawah ini, Tempelkan pada tempat yang sudah saya beri tanda dengan warna, lihat dibawah ini.
<script>//<![CDATA[
var LazyHistats=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&LazyHistats===!1||0!=document.body.scrollTop&&LazyHistats===!1)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="Tempelkan Disini";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}(),LazyHistats=!0)},!0);
//]]></script>
3). Selanjutnya gabungkan script histats dan lazy loadnya. Maka hasilnya akan menjadi seperti dibawah ini.
<!-- Histats.com (div with counter) -->
<div id="histats_counter"></div>
<!-- Histats.com START (aync)-->
<script type="text/javascript">var _Hasync= _Hasync|| [];
_Hasync.push(['Histats.start', '1,4579694,4,511,95,18,00010000']);
_Hasync.push(['Histats.fasi', '1']);
_Hasync.push(['Histats.track_hits', '']);
(function() {
var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
hs.src = ('');
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
})();</script>
<noscript><a href="/" target="_blank"><img src="//sstatic1.histats.com/0.gif?4579694&101" alt="" border="0"></a></noscript>
<!-- Histats.com END -->
<script>//<![CDATA[
var LazyHistats=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&LazyHistats===!1||0!=document.body.scrollTop&&LazyHistats===!1)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//s10.histats.com/js15_as.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}(),LazyHistats=!0)},!0);
//]]></script>
4). Terakhir silahkan kalian salin semua script yang sudah jadi tersebut dan kalian pasang pada widget yang kalian inginkan.
Cara Pasang Lazy Load Google Analytics
1). Salin javascript dibawah ini dan letakan diatas kode </body>.
<script type='text/javascript'>
//<![CDATA[
var lzyAnltc=!1;function gtag(){dataLayer.push(arguments)}window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lzyAnltc||0!=document.body.scrollTop&&!1===lzyAnltc)&&(function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://www.googletagmanager.com/gtag/js?id=UA-00000000-1";var e=document.getElementsByTagName("script")[0];e.parentNode.insertBefore(t,e)}(),lzyAnltc=!0)},!0),window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-00000000-1");
//]]></script>
2). Perhatikan script yang saya tandai dengan warna, silahkan kalian ganti dengan kode analytics kalian.
3). Selesai.
Itulah cara membuat dan memasang lazy load histats dan lazy load google analytics. Semoga postingan ini bermanfaat. Jika ada pertanyaan silahkan komentar dibawah. Akhir kata admin ucapkan. Terimakasih.