Cara mempercepat loading blog memakai 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 dapat teratasi. Lalu bagaimana cara mempercepat loading gambar pada blog kita?
Sebelumnya anda harus tau, bahwa penggunaan lazy load ini sangat cocok dipakai bagi anda yang memakai banyak gambar pada blognya. Script lazy load ini bekerja sesudah loading blog benar-benar selesai.
Namun perlu diingat bahwa script ini tidak dapat bekerja di semua template. Kaprikornus Anda harus memback up template terlebih dahulu sebelum menerapkan cara ini biar saat terjadi sesuatu yang tidak diinginkan pada blog anda dapat dikembalikan lagi ke asalnya.
Cara ini sebetulnya butuh sekali kesabaran alasannya harus mengubah setiap tag <img pada blog kita. Tag <img merupakan isyarat gambar yang di tampilkan di blog kita. Disini kita melakukan pemasangan class 'lazy' pada tag img tersebut biar loading setiap gambar yang ada di blog kita semuanya dapat diterapkan secara lazy load
Cara Mempercepat Loading Blog Gambar
Sebelumnya anda harus tau, bahwa penggunaan lazy load ini sangat cocok dipakai bagi anda yang memakai banyak gambar pada blognya. Script lazy load ini bekerja sesudah loading blog benar-benar selesai.
Baca juga : Mempercepat Loading Blog
Bagaimana maksudnya?
Kaprikornus gambar akan di load saat loading blog sudah simpulan 100%, tidak bersamaan dengan loading blog, gambar akan di load saat pengunjung menscroolnya ke bawah.Namun perlu diingat bahwa script ini tidak dapat bekerja di semua template. Kaprikornus Anda harus memback up template terlebih dahulu sebelum menerapkan cara ini biar saat terjadi sesuatu yang tidak diinginkan pada blog anda dapat dikembalikan lagi ke asalnya.
Memasang Script Lazy Load
- Pertama-tama silahkan buka blogger anda lalu pilih template ---> Edit HTML
- Kemudian masukkan isyarat berikut pada HTML template tersebut diatas isyarat </body> atau jikalau anda tidak menemukan isyarat body yang ibarat itu carilah yang ibarat ini : </body><textarea readonly disabled style='display:none'><!--</body>--></textarea>
Berikut Script Lazy Loadnya (Script ini bukan buatan saya, tetapi milik dari Mbak Arlina pemilik blog arlinadzgn.com)
<script type='text/javascript'>
//<;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/AVvXsEiwUsgXDfiv7bzBjEEizY6EnG5VaVWKhs-72woJJ_xRglF1JjbTa2s3h6_1uRRp2oHf8H1TnLX7UM-rjcL50rb4BhlaNiwCIKwBvhMFPtJN0SwtXbf9rO5nWf0tDv7o1SrQqve5G88Jg5CX/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
Cara ini sebetulnya butuh sekali kesabaran alasannya harus mengubah setiap tag <img pada blog kita. Tag <img merupakan isyarat gambar yang di tampilkan di blog kita. Disini kita melakukan pemasangan class 'lazy' pada tag img tersebut biar loading setiap gambar yang ada di blog kita semuanya dapat diterapkan secara lazy load
Bagaimanakah Caranya?
- Langkah pertama yang harus dilakukan yaitu anda harus mencari tag <img pada template blog Anda. (Penambahan isyarat 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 isyarat ibarat : mengubah expr:src menjadi expr:data-src, dan mengubah isyarat src menjadi data-src
Seperti berikut ini contohnya
Merubah src menjadi data-src :
<img src='https://img1.blogblog.com/img/icon_delete13.gif'/>Merubah expr:src menjadi expr:data-src
Diubah menjadi
<img class='lazy' data-src='https://img1.blogblog.com/img/icon_delete13.gif'/>
<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 isyarat itu telah diubah dan di pasang, maka template dapat anda simpan dan lihatlah hasilnya.
Memperingan loading blog terutama pada gambar tidaklah susah, memang perlu sedikit kesabaran dalam melakukannya. Juga perlu ketelitian biar isyarat img dan src pada template tersebut tidak ada yang terlewatkan. Jika untuk kenyamanan pengunjung setidaknya kita harus berkorban bukan?
Sekian artikel ihwal cara mempercepat loading blog memakai lazy load semoga membawa manfaat bagi yang membacanya.
