Cara Memasang Lazyload Image Dengan Efek Animasi

Memasang Lazyload Image Dengan Efek Animasi - Mempunyai sebuah blog yang memiliki pagespeed yang sangat cepat saya rasa adalah idaman dari semua blogger. Sebab, pada dasarnya memang kecepatan blog sangat mempengaruhi kenyamanan dari para pengunjung blog.

Semakin cepat loading blog kita, maka semakin nyaman para pengunjung membaca artikel kita.

Lantas, bagaimana sih membuat loading blog kita menjadi lebih cepat? Tentu dengan melakukan beberapa optimasi pada tema dan juga tampilan blog kita. Berikut sedikit tips untuk melakukan optimasi agar blog kamu memiliki loading yang cepat.

Cara Mempercepat Loading Blog di Blogger

Untuk kita yang masih menggunakan platform blogger, sebenarnya tidak banyak yang bisa lakukan. Kenapa? Ya, karena disini kita masih 'menumpang' di server google maka secara otomatis akses kita menjadi lebih tebatas untuk melakukan optimasi tersebut. Tapi jangan khawatir, berikut yang bisa kamu lakukan untuk optimasi pada blog kamu.

1. Pilih Template atau Tema yang Tepat

Dimasa sekarang, banyak sekali tema yang bisa kamu pilih dengan berbagai model dan tampilan yang menarik. Tapi perlu kamu ingat, dalam memilih tema blog, selain memiliki tampilan yang menarik, tema kamu juga harus responsif dan memiliki loading yang cukup cepat. Jika kamu salah dalam memilih tema, maka kamu akan kesulitan untuk melakukan optimasi yang lainnya.

2. Memperkecil Ukuran CSS pada Tema

Optimasi selanjutnya yang bisa kamu lakukan untuk mempercepat loading blog kamu adalah dengan memperkecil ukuran dari css yang kamu gunakan. Dengan cara ini, kamu bisa memperkecil ukuran css yang kamu gunakan agar lebih ringan, dan hal ini secara tidak langsung akan membuat loading blog kamu juga menjadi lebih cepat.

Untuk memperkecil ukuran css, kamu bisa menggunakan tool online CSS Compressor berikut:

1. http://www.csscompressor.com
2. http://cssoptimiser.com
3. http://imabblog.com/cssoptimizer/compress.html

3. Jangan Terlalu Banyak Memasang Widget

Memasang terlalu banyak widget diblog hal ini tentu akan membuat loading blog kamu menjadi lebih lambat, oleh sebab itu jangan memasang widget terlalu banyak. Pilihlah widget yang memang benar-benar diperlukan, pilih widget dengan tepat dan bijak.

Karena semakin banyak widget, maka request yang dibebankan kepada server pun akan menjadi lebih berat. Sebaiknya gunakan widget secukupnya saja jangan terlalu berlebihan.

4. Kompres Gambar Sebelum di Upload

Setiap blog tentu memiliki gambar, baik itu untuk gambar postingan, backgrounds, ataupun header dan lain sebagainya. Disini salah satu yang bisa kamu lakukan untuk melakukan optimasi pada gambar di blog kamu kamu adalah dengan melakukan kompres setiap gambar sebelum di upload di blog kamu.

Sebenarnya cara ini sedikit ribet, tapi mau bagaimana lagi jika kamu mau memiliki blog yang memiliki loading yang cepat, kompresi gambar adalah salah satu optimasi yang harus kamu lakukan. Untuk melakukan kompresi gambar, kamu bisa memanfaatkan tool online berikut ini.

1. https://compressjpeg.com/
2. https://imagecompressor.com/
3. https://tinyjpg.com/

5. Memasang Script Lazyload Pada Gambar

Setelah kamu melakukan kompresi pada gambar, optimasi lain yang bisa kamu lakukan pada gambar diblog kamu untuk membuat loading blog menjadi lebih cepat adalah dengan menggunkan script lazyload.

Lazy load berfungsi untuk menunda (delay) terhadap request yang dibutuhkan. Mungkin dibeberapa blog kamu pernah menemukan halaman yang menggunakan lazy load ini, seperti halnya yang digunakan oleh facebook. Menggunkan lazyload seperti sekarang ini, sudah banyak digunakan oleh para blogger untuk meringankan loading blog.

Cara Memasang Lazyload Image Dengan Animasi

Dengan menempatkan script lazyload diblog, kamu tidak perlu melakukan edit kembali semua gambar yang sudah di upload, karena script ini sudah otomatis menyatu pada semua gambar yang ada di blog kamu. Untuk kamu yang mau memasang script Lazyload di blog kamu, silahkan ikuti langkah-langkah dibawah ini.

1. Masuk ke akun blogger
2. Edit html tema
3. Copy dan paste script dibawah ini, tepat diatas kode </body>
4. Simpan tema.

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0aV2gv_EA1b-xl71F7whlsUwOkOPg_z2DLuN3PHiaZjt8TCu3eErYvT-LtfnNpwHBL1scbGPcnAiVndjZbiv9QXNQLC-N1vEhsYJCsL75I3zhjEsO4YsigS_8_O3sdxULyei7eH0P7vo/s1600/image-loader.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Nah itulah sedikit optimasi dan 'Cara Memasang Lazyload Image Dengan Efek Animasi' yang bisa saya bagikan. Jika tips diatas dirasa masih belum cukup, kamu juga masih bisa melakukan optimasi lain untuk membuat loading blog kamu menjadi lebih cepat lagi tentunya.

Jika kamu memiliki tips optimasi lainnya untuk membuat loading blog menjadi lebih cepat, jangan sungkan untuk berbagi ilmu dan pengalamannya dikolom komentar dibwah ini ya. Terima kasih.