Artikel menarikCara Memasang Lazy Load Gambar Agar Blog Semakin Fast Loading - Black Exotic - Hallo friend Black Exotic, Pada kesempatan ini, friend akan membaca Artikel yang dengan judul Artikel menarikCara Memasang Lazy Load Gambar Agar Blog Semakin Fast Loading - Black Exotic, tim kami telah mengemas artikel ini dengan baik untuk anda simak dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Artikel menarikCara Memasang Lazy Load Gambar Agar Blog Semakin Fast Loading - Black Exotic
link : Artikel menarikCara Memasang Lazy Load Gambar Agar Blog Semakin Fast Loading - Black Exotic

Artikel menarikCara Memasang Lazy Load Gambar Agar Blog Semakin Fast Loading - Black Exotic

Selain iklan (bagi yang memasang iklan), elemen lain dalam blog yang seringkali menjadi penghambat laju pemuatan halaman saat diakses sehingga kecepatan blog menjadi lambat adalah elemen gambar. Selain dengan rasa, kita bisa mengetahui hal itu misalnya dengan mengukur kecepatan blog menggunakan tool-tool penganalisa kecepatan web seperti gtmetrix dan semacamnya. Hasilnya, gambar pun menjadi salah satu yang cukup berpengaruh dalam persoalan loading. 

Bagi anda yang banyak menggunakan gambar sebagai ilustrasi dalam postingan blog, tentunya hal ini menjadi problem serius yang harus segera ditangani agar tidak berdampak buruk bagi blog. Betapa tidak, Google sendiri sejak tahun 2010 telah memasukkan kecepatan website sebagai salah satu indikator penilaian untuk SEO. Artinya, blog anda bisa jadi akan semakin susah ditemukan oleh pengunjung jika loading blog anda lemot dan lama saat diakses. 

Untuk mengatasi hal tersebut, cara yang paling tepat yaitu dengan mengatur kembali pengelolaan gambar pada blog dengan lebih efisien secukupnya saja. Kita bisa mengurangi jumlah gambar atau juga memperkecil ukuran gambar dengan cara mengkompresnya agar gambar menjadi lebih cepat saat dimuat. Jika hal itu sudah anda lakukan, cara lainnya yaitu gunakan lazy load image agar loading blog anda semakin cepat. 

Lazy load adalah kode javascript yang berfungsi untuk mempercepat loading blog dengan cara menunda penampilan gambar atau iklan yang ada di sebuah situs. Dengan menerapkan trik ini, maka blog akan lebih cepat saat loading awal karena tidak merender semua gambar atau iklan yang ada. Gambar atau iklan baru akan muncul setelah kita menggulir halaman hingga sampai pada tempat di mana elemen tersebut berada. 

Pada artikel terdahulu, pernah saya ulas mengenai cara pemasangan lazy load pada blog untuk iklan adsense (baca: Memasang Lazy Load Adsense Agar Loading Blog Menjadi Cepat). Nah, pada kesempatan kali ini, akan saya bahas tentang cara pemasangan lazy load untuk versi gambar (image). Bagaimana caranya?, simak tutorial di bawah ini. 

Cara Memasang Lazy Load Image Agar Loading Blog Makin Cepat

1. Buka akun blogger anda.

2. Pilih thema dan klik edit html.

3. Cari kode </body> kemudian letakkan kode berikut ini di atasnya.

<script type='text/javascript'>//<![CDATA[

(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://i22.servimg.com/u/f22/15/42/72/40/grey10.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>

4. Simpan kembali template anda.

Silahkan anda bisa mengetesnya untuk melihat hasilnya. Kalau tampilan gambar menjadi muncul belakangan dengan indahnya ketika halaman digulir ke bawah, maka script di atas berarti telah bekerja dengan baik seperti yang diharapkan. Anda juga bisa mengecek kembali kecepatan blog anda menggunakan gtmetrix untuk melihat perbedaannya. Skornya pun menjadi lebih baik bukan!. Demikian. Semoga bermanfaat.

Demikianlah Artikel Artikel menarikCara Memasang Lazy Load Gambar Agar Blog Semakin Fast Loading - Black Exotic

Cukup sampai disini artikel Artikel menarikCara Memasang Lazy Load Gambar Agar Blog Semakin Fast Loading - Black Exotic kali ini, semoga dapat memberi manfaat untuk friend semua. baiklah, jangan lupa membaca artikel lainnya.

Artikel yang sedang anda baca Artikel menarikCara Memasang Lazy Load Gambar Agar Blog Semakin Fast Loading - Black Exotic dengan alamat link https://blackexotic.blogspot.com/2020/11/artikel-menarikcara-memasang-lazy-load.html

Share this post