Tutorial Cara Mempercepat Loading Blog Menggunakan Lazy Load

Baca Juga Artikel Berikut Ini

Cara mempercepat loading blog menggunakan lazy load - Gambar merupakan salah satu penyebab lambatnya loading suatu situs blog. Penggunaan gambar yang salah pada blog terkadang menjadi penyebab blog Anda semakin berat loadingnya. Terkadang walaupun kita telah memperkecil ukuran gambar yang ada pada blog kita, namun nyatanya permasalahan tersebut belum sepenuhnya bisa teratasi. Lalu bagaimana cara mempercepat loading gambar pada blog kita?

Cara Mempercepat Loading Blog Gambar

Sebelumnya anda harus tau, bahwa penggunaan lazy load ini sangat cocok digunakan bagi anda yang menggunakan banyak gambar pada blognya. Script lazy load ini bekerja setelah loading blog benar-benar selesai.

Baca juga : Mempercepat Loading Blog

Bagaimana maksudnya?

Jadi gambar akan di load ketika loading blog sudah selesai 100%, tidak bersamaan dengan loading blog, gambar akan di load ketika pengunjung menscroolnya ke bawah.

Namun perlu diingat bahwa script ini tidak bisa bekerja di semua template. Jadi Anda harus memback up template terlebih dahulu sebelum menerapkan cara ini agar ketika terjadi sesuatu yang tidak diinginkan pada blog anda bisa dikembalikan lagi ke asalnya.

Memasang Script Lazy Load

• Pertama-tama silahkan buka blogger anda kemudian pilih template ---> Edit HTML
• Kemudian masukkan kode berikut pada HTML template tersebut diatas kode </body> atau jika anda tidak menemukan kode body yang seperti itu carilah yang seperti ini : &lt;/body&gt;&lt;textarea readonly disabled style=&#39;display:none&#39;&gt;&lt;!--</body>--&gt;&lt;/textarea&gt;

Berikut Script Lazy Loadnya (Script ini bukan buatan saya, tetapi milik dari Mbak Arlina pemilik blog arlinadzgn.com)

<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(){$(".post img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaqUoApb39j_aVvnp3p-Gz7xuNoitmShf55GWG9uqymTxrdAYCXqLNs2p9AMNuB3e9Fx4w37Xe41GlQlOEjYxpm8NPyKrJZzAxcy3ee_72R-dPlyVrIIb72KLpJgzZ1VTUJk6DEPdxRxZT/s640/arlinadesign.gif",effect:"fadeIn",threshold:"0"})});var _0xb5d7=["\x67\x65\x74\x42\x6F\x75\x6E\x64\x69\x6E\x67\x43\x6C\x69\x65\x6E\x74\x52\x65\x63\x74","\x74\x6F\x70","\x63\x6C\x61\x73\x73\x4E\x61\x6D\x65","\x20\x6D\x61\x6B\x65\x73\x74\x69\x63\x6B\x69\x6E\x67","\x77\x69\x64\x74\x68","\x73\x74\x79\x6C\x65","\x70\x78","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x64\x69\x76","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x69\x6E\x73\x65\x72\x74\x42\x65\x66\x6F\x72\x65","\x70\x61\x72\x65\x6E\x74\x4E\x6F\x64\x65","\x6F\x66\x66\x73\x65\x74\x57\x69\x64\x74\x68","\x20\x6D\x61\x6B\x65\x73\x74\x69\x63\x6B\x79","\x73\x63\x72\x6F\x6C\x6C","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x68\x65\x61\x64\x65\x72\x73\x74\x69\x63\x6B\x79"];function makemeSick(_0x2b31x2){function _0x2b31x3(){var _0x2b31x2=_0x2b31x5[_0xb5d7[0]]();_0x2b31x2[_0xb5d7[1]]<0?(_0x2b31x4[_0xb5d7[2]]=_0x2b31x7+_0xb5d7[3],_0x2b31x4[_0xb5d7[5]][_0xb5d7[4]]=_0x2b31x6+_0xb5d7[6]):_0x2b31x4[_0xb5d7[2]]=_0x2b31x7}var _0x2b31x4=document[_0xb5d7[7]](_0x2b31x2),_0x2b31x5=document[_0xb5d7[9]](_0xb5d7[8]);_0x2b31x4[_0xb5d7[11]][_0xb5d7[10]](_0x2b31x5,_0x2b31x4);var _0x2b31x6=_0x2b31x4[_0xb5d7[12]],_0x2b31x7=_0x2b31x4[_0xb5d7[2]]+_0xb5d7[13];window[_0xb5d7[15]](_0xb5d7[14],_0x2b31x3,!1)}makemeSick(_0xb5d7[16])
//]]>
</script>

• Lalu Klik Simpan

Apakah cara tersebut berhasil membuat loading blog terutama pada gambar menjadi lebih ringan? Jika tidak Coba terapkan cara ini :

Cara ini sebenarnya butuh sekali kesabaran karena harus mengubah setiap tag <img pada blog kita. Tag <img merupakan kode gambar yang di tampilkan di blog kita. Disini kita melakukan  pemasangan class 'lazy' pada tag img tersebut agar loading setiap gambar yang ada di blog kita semuanya bisa diterapkan secara lazy load

Bagaimanakah Caranya?

• Langkah pertama yang harus dilakukan adalah anda harus mencari tag <img pada template blog Anda. (Penambahan kode ini dilakukan di HTML template bukan di HTML postingan).  Contoh tag image yang dimaksud yaitu :

 <img expr:alt='data:post.title' expr:data-src='data:post.thumbnail' expr:height='data:thumbnailSize' expr:title='data:post.title' expr:width='data:thumbnailSize'/> 

maka ubahlah menjadi :
 <img class='lazy' expr:alt='data:post.title' expr:src='data:post.thumbnail' expr:height='data:thumbnailSize' expr:title='data:post.title' expr:width='data:thumbnailSize'/>

• Selain menambah class='lazy' kita juga perlu merubah beberapa kode seperti : mengubah expr:src menjadi expr:data-src, dan mengubah kode src menjadi data-src 

Seperti berikut ini contohnya

Merubah src menjadi data-src :

<img src='https://img1.blogblog.com/img/icon_delete13.gif'/>
Diubah menjadi 
<img class='lazy' data-src='https://img1.blogblog.com/img/icon_delete13.gif'/>

Merubah expr:src menjadi expr:data-src

                    <img class='lazy' expr:alt='data:post.title' expr:data-src='data:post.thumbnail' expr:height='data:thumbnailSize' expr:title='data:post.title' expr:width='data:thumbnailSize'/>
Diubah menjadi 
                    <img class='lazy' expr:alt='data:post.title' expr:data-src='data:post.thumbnail' expr:height='data:thumbnailSize' expr:title='data:post.title' expr:width='data:thumbnailSize'/>

• Setelah semua kode itu telah diubah dan di pasang, maka template bisa anda simpan dan lihatlah hasilnya.

Memperingan loading blog terutama pada gambar tidaklah susah, memang perlu sedikit kesabaran dalam melakukannya. Juga perlu ketelitian agar kode img dan src pada template tersebut tidak ada yang terlewatkan. Jika untuk kenyamanan pengunjung setidaknya kita harus berkorban bukan?

Sekian artikel tentang cara mempercepat loading blog menggunakan lazy load semoga membawa manfaat bagi yang membacanya.