Kumpulan Cara pasang LazyLoad Khusus Blogger

LazyLoad adalah program javascript yang disematkan pada halaman web dengan tujuan untuk membuat serangkaian penundaan terhadap dokumen lain. Halaman website itu tersusun dalam berbagai dokumen, ada gambar, video, sudio, file penting lain misal javascript eksternal, css eksternal dan masih banyak lagi.

Dokumen tersebut bisa menyebabkan proses pemuatan halaman jadi lebih lama, faktanya peramban akan memuat semua data secara bersamaan dalam satu waktu.

Kecepatan Loading halaman juga menjadi faktor yang bisa mempengaruhi kualitas SEO website. Google sendiri dalam tools search consolenya terdapat fitur yang bisa mengukur seberapa cepat halaman diakses.

Dengan membuat serangkaian penundaan untuk gambar, video, dan dokumen javascript eksternal maka proses load dan render halaman web jadi lebih cepat.

Ada beberapa cara dalam menerapkan lazyload, setiap dokumen pastinya butuh penanganan yang berbeda², semuanya sudah saya sediakan dalam artikel ini beserta kekurangan dan kelebihan nya.

 

1. Menggunakan Deferjs

Deferjs adalah library javascript yang bisa kamu gunakan untuk membuat serangkaian penundaan pada pemanggilan dokumen eksternal seperti iframe, javascript, dan css. Deferjs juga digunakan pada template mas sugeng, karena deferjs adalah sebuah Library javascript kita tidak akan menbahasnya disini.

Library Deferjs yang sudah di minify ukuranya sangat kecil nggak lebih dari 1KB, sehingga bisa disisipkan pada dokumen HTML kamu. Keunggulan lain, deferjs tidak membutuhkan JQuery dalam kerjanya.

Cara penggunaan Library Deferjs pernah diposting oleh temanku Putri Dewi Anjani, bila tertarik kamu bisa membaca tips dan cara menggunakan deferjs berikut ini.

 

2. Menggunakan Script Lazy Onscroll

Dengan menggunakan fungsi window event dalam javascript kita bisa membuat sebuah kondisi yang dimana bisa melindungi skrip agar tidak dirender terlebih dahulu, kemudian kita bisa membuat sebuah kondisi dimana ketika user melakukan scrolling halaman maka skrip akan dieksekusi/dijalankan.

Teknik ini sudah banyak digunakan oleh berbagai situs web dengan host blogger, pengguna blogger lebih banyak menggunakan Lazyload karena blogger terdiri dari 80% JavaScript. Kamu bisa melihat contoh kode dibawah, hilangkan atributnya kamu bisa menggunakan skrip untuk kebutuhan lain.

<script>

//<![CDATA[

var lazyadsense2 = false;

window.addEventListener("scroll", function(){

if ((document.documentElement.scrollTop != 0 && lazyadsense2 === false) || (document.body.scrollTop != 0 && lazyadsense2 === false)) {

(function() { var ad = document.createElement('script'); ad.setAttribute('data-ad-client','ca-pub-xxxxxxxxxxx'); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();

lazyadsense2 = true;

  }

}, true);

//]]>

</script>

 

3. JsaOnload Menambah elemen skrip setelah halaman dimuat

Skrip fungsi jsaOnloadDownload pernah digunakan oleh Arlina Fitriyani alias arlinacode.com, skrip ini akan menambahkan kode skrip tepat sebelum tag </body> setelah halaman berhasil dimuat sepenuhnya. Tapi skrip ini tidak bisa menghindari pengukuran dari Google Page Speed Insight.

Kamu bisa menggunskan dan memodifikasi script yang saya berikan dibawah ini.

<script type="text/javascript">

function downloadJSAtOnload(){var d=document.createElement("script");d.src="//s10.histats.com/js15_as.js";document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

</script>

 

4. Menggunakan setTimeOut

Fungsi settimeout pada javascript adalah fungsi yang bisa digunakan untuk menunda eksekusi skrip lain dalam waktu yang sudah ditentukan sebelumnya. Bisa 2 detik, 3 detik atau 4 detik sesuai keinginan kamu. Tapi skrip ini tidak bisa mendeteksi apakah halaman web sudah dimuat atau belum.

<script>
// Menunda 2 menit
   setTimeOut(function(){
// LoadScript
(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);
})();
}, 2000);
</script>

 

Oke demikianlah script yang bisa saya bagikan kali ini, semoga bisa digunakan untuk Blog Blog sobat. Sebenarnya script LazyLoad ada banyak sekali, dari semua daftar diatas aku lebih merekomendasikan menggunakan Deferjs. Karena lebih flexsibel kamu hanya butuh menulis satu atau dua baris kode saja.

Deferjs Bertindak sama seperti JQuery, dia mampu melakukan penundaan terhadap Berbagai ekstenal dokumen tepat pada waktunya. Dokumen gambar akan dimuat ketika pengguna melakukan scroing hingga mencapai titik pada gambar tersebut.

Pada Blog ini menggunakan Lazyload Deferjs untuk menunda pemuatan Script Iframe Youtube, Gambar, dan Script Google Analistik.