Menunda Pemuatan Gambar untuk Mempercepat Blog

Memiliki blog dengan akses yang cepat merupakan sesuatu yang sangat diidamkan. Banyak cara untuk mempercepat loading atau pemuatan suatu blog. Mulai dengan memakai template yang ringan, mengecilkan ukuran/size gambar, mengkompress kode blog sampai memakai script tertentu.

Template yang ringan tentu sangat disukai oleh mesin pencari, anda bisa mengecek kecepatan pemuatan blog anda dengan menggunakan PageSpeed Insight milik google atau gtmetrix. Tetapi ringan belum tentu disukai oleh pengunjung blog anda, design blog yang kuno dan cenderung membosankan membuat pengunjung blog anda segera menutup blog anda. 

Kedua, bisa dengan mengkompress ukuran gambar. Cara ini sudah sangat lumrah digunakan, tidak dipungkiri ukuran gambar yang besar tentu akan memperlambat pemuatan blog. Terakhir, mempercepat pemuatan blog bisa dibantu dengan menggunakan script tertentu. Seperti yang akan saya bagikan kali ini, script lazy load ini berfungsi untuk menunda pemuatan suatu objek pada halaman web. Ini berarti ketika pengunjung tidak melakukan scroll maka objek seperti gambar tidak akan dimuat terlebih dahulu, menunggu pengunjung blog secara aktif melakukan scroll. 

Ini tentu akan mempercepat pemuatan blog terbuka sehingga pengunjung tidak lama menunggu. Untuk pemasangannya sendiri di blog sangatlah mudah. Berikut langkah demi langkah pemasangan script lazy load untuk blog.

• Langkah pertama, tentu anda harus masuk ke dashboard blog.
• Kedua, kliklah pada menu Theme dan lakukan Edit Html. Perhatikan gambar berikut.

• Langkah selanjutnya adalah mencari kode </body>.
• Kemudian tambahkan kode berikut tepat sebelum kode </body>.

 <script type='text/javascript'> //<![CDATA[
// Fast 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5NV3nxzVD27h6KVGk5dF-Ve0U1Y6NCDzWefkC7QyyWZD9pGeryfXm4FgnGl9r3BCSeu7MPAFXeA6_kAzt5xIz9t9g1wru0dT8eYacnxpeZaX4KyTliK1xARayGXEu7NnbfFNzjZXR7tA/s1600/bisablog-loading.png",effect:"fadeIn",threshold:"-50"})}); //]]>
</script> 

• Langkah terakhir, simpanlah template anda dan lihat hasilnya dengan cek salah satu postingan yang terdapat gambar.

Gambar tersebut tidak akan dimuat sebelum pengunjung melakukan scroll mengarah ke gambar/objek tersebut. Demikian tutorial kali ini, semoga apa yang saya bagikan bisa bermanfaat bagi sahabat semua.

Rekomendasi artikel untuk anda :