Optimasi Loading Blog dengan Lazy Load Image - Recommended!

Optimasi Loading Blog dengan Lazy Load Image - Recommended! - Gambar merupakan hal terpenting dalam faktor kecepatan blog, ntah itu sebuah banner, logo, maupun gambar produk pemasaran atau thumbnail. Apa jadinya jika suatu blog tidak memiliki gambar? pasti tidak pernah terbayangkan tentang itu.

Sayangnya, gambar dalam ukuran besar merupakan faktor yang mempengaruhi kecepatan pada blog tersebut.
Memasang Lazy Load Image

Pada pertemuan kali ini, admin akan membahas tentang Lazy Load Image. Sebuah teknik yang membantu meningkatkan waktu pemuatan halaman, mengurangi ukuran halaman, dan tetap mempertahankan semua gambar pada halaman.
  1. Apa itu Lazy Load Image?
  2. Mengapa Lazy Load Image?
  3. Cara Memasang Lazy Load Image

Apa Itu Lazy Load Image

Lazy Load Image atau jika diartikan malas memuat gambar, merupakan teknik menunda pemuatan gambar pada suatu halaman web. Maksudnya, gambar yang tidak dibutuhkan di awal, tidak akan dimuat sebelum terjadi scrolling pada halaman tersebut.
Ilustrasi
Mempercepat loading blogger
Pada gambar diatas, (perhatikan tulisan berwarna Hijau) Gambar yang berada di kotak tersebut akan dimuat lebih dahulu, karena gambar tersebut berada di tampilan awal pada halaman.

Sedangkan, (perhatikan tulisan berwarna biru) Gambar yang berada dibawah, tidak akan dimuat sebelum ada scrolling yang mengarahkan ke gambar bagian bawah.

Mengapa Lazy Load Image

Lazy Load Image dapat membatasi pemuatan gambar yang tidak diperlukan di halaman awal. Sebuah gambar yang tidak terlihat oleh pengguna saat halaman dimuat, akan dimuat nanti ketika pengguna menggulir(scroll). Jika pengguna tidak pernah menggulir, gambar yang tidak terlihat oleh pengguna tidak akan pernah dimuat.

Pastinya teknik ini akan membuat performa blog anda jauh lebih baik dalam kinerja dan kecepatan loading nya.

Cara Memasang Lazy Load Image

Untuk memasang lazy load image, caranya relativ mudah dan sederhana.
  • Pada halaman dashbor blogger, pergi ke Template ➤ Edit HTML
  • CTRL+F untuk mencari kode </body>, dan letakkan kode berikut tepat diatasnya
<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(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://www.spruko.com/demo/pinlist/demo/img/loader.svg",effect:"fadeIn",threshold:"-50"})});
//]]></script>
Tersebut adalah cara memasang lazy load image untuk mempercepat loading blog. Setelah melakukan cara diatas, periksa kecepatan blog anda, apakah ada perubahan?
Incoming Search Terms
  • apa itu lazy load image
  • pengertian lazy load image
  • cara memasang lazy load image di blog
  • cara mempercepat loading blog dengan script
  • mempercepat loading blog terbaru
  • memasang lazy load di blog
  • apa itu lazy load
  • mengenal lazy load image
  • membuat blog loading cepat
Nando
Anda di sini hanya untuk persinggahan yang singkat. Jangan terburu, jangan khawatir. Yakinlah bahwa Anda menghirup wangi bunga sepanjang perjalanan.

Luangkan sedikit waktu Anda untuk membagikan "Optimasi Loading Blog dengan Lazy Load Image - Recommended!" kepada teman-teman Anda. Hanya dengan menekan Tombol Sosial Media di bawah ini:

Related Posts

Post a Comment

Berlangganan Gratis!

Daftarkan email anda untuk mendapatkan pemberitahuan setiap update artikel terbaru, dan jangan lupa untuk IKUTI Blog kami