Memasang Lazy Load Image Untuk Mempercepat Loading Blog

Hi, selamat siang, sesi kali ini akan menjelaskan tentang blogging tips Memasang Lazy Load Image Untuk Mempercepat Loading Blog simak selengkapnya 

Renovasi Otak - Gambar merupakan hal terutama dalam faktor kecepatan blog, ntah itu sebuah banner, logo, maupun gambar produk pemasaran atau thumbnail. Apa jadinya jika suatu blog tak memiliki gambar? pasti tak pernah terbayangkan tentang itu.

Sayangnya, gambar dalam bentuk besar merupakan aspek yang mempengaruhi kecepatan pada blog tersebut.

Pada pertemuan kali ini, admin hendak membahas tentang Lazy Load Image. Sebuah teknik yang membantu meningkatkan waktu pencantuman halaman, mengurangi bentuk 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 pencantuman gambar pada suatu jerambah web. Maksudnya, gambar yang tak dibutuhkan di awal, tak hendak dimuat dini terjadi scrolling pada jerambah tersebut.

Ilustrasi

Pada gambar diatas, (perhatikan artikel berwarna Hijau) Gambar yang berada di kotak tersebut hendak dimuat lebih dahulu, karena gambar tersebut berada di tampilan awal pada halaman.

Sedangkan, (perhatikan artikel berwarna biru) Gambar yang berada dibawah, tak hendak dimuat dini ada scrolling yang membidikkan ke gambar bagian bawah.

Mengapa Lazy Load Image

Lazy Load Image bisa membatasi pencantuman gambar yang tak diperlukan di jerambah awal. Sebuah gambar yang tak terlihat akibat pengguna era jerambah dimuat, hendak dimuat nanti ketika pengguna menggulir(scroll). Jika pengguna tak pernah menggulir, gambar yang tak terlihat akibat pengguna tak hendak pernah dimuat.

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

Cara Memasang Lazy Load Image

Untuk memakai lazy load image, caranya relativ mudah dan sederhana.

• Pada jerambah dashbor blogger, pergi ke Template ➤ Edit HTML
• CTRL+F buat 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.leftofbegin(this,c))else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c))a(this).trigger("appear")elseif(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.rightoffold(b,c))if(c.placeholder)a(b).attr("src",c.placeholder)elsea(b).removeAttr("src")b.loaded=falseelseb.loaded=truea(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)c.container===window)var d=a(window).height()+a(window).scrollTop()elsevar 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===undefinedelsevar d=a(c.container).offset().left+a(c.container).width()return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c)elsevar d=a(c.container).offset().topreturn d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c)elsevar d=a(c.container).offset().leftreturn 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 memakai lazy load image buat 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 memakai 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

DONASI VIA PAYPAL Bantu berikan bantuan jika artikel bermanfaat. Donasi hendak digunakan seelok mungkin buat kepentingan renovasi-otak.blogspot.com. Terimakasih.

Sekian penjelasan perihal Memasang Lazy Load Image Untuk Mempercepat Loading Blog semoga tulisan ini bermanfaat salam

Artikel ini diposting pada kategori blogging tips, bloggers, , tanggal 27-09-2019, di kutip dari https://renovasi-otak.blogspot.com/2019/08/lazy-load-image.html