Cara Mempercepat Loading Blog dengan Lazy Load Gambar

Pada kesempatan kali ini saya akan  memberikan sebuah tutorial Cara Mempercepat Loading Blog dengan Lazy Load Gambar di Blogger.

Salah satu permasalahan yang sering kita temukan dan selalu menjadi keluhan blogger  adalah kecepatan loading halaman blog.

Mereka sering memunculkan sebuah pertanyaan-pertanyaan bagaimana sih caranya untuk mempercepat loading blognya? Hampir beberapa para mastah menyarankan untuk menghapus CSS dan JavaScript yang tidak digunakan / sama sekali tidak berguna untuk blog kamu.

Kecepatan blog kamu sangat berpengaruh untuk visitor / pengunjung kamu, Kenapa? Karena dengan mempunyai kecepatan yang bagus visitor pun menjadi nyaman berkunjung di blog kamu.

Lalu bagaimana sih cara meringankan blog tanpa harus berkorban banyak untuk elemen-elemen dalam blog tersebut?

Apa Itu Lazy Load ?

Lazy Load adalah sebuah teknik yang menunda pemuatan blog dari resource yang tidak penting pada waktu pemuatan halaman.

Biasanya lazy Load ini hanya memuat iklan dan gambar apabila seorang pengunjung menscrool kebawah. Beberapa kasus kenapa blog kita menjadi berat, dan pastinya beberapa penyebab yang sering terjadi pada kasus yang demikian.

Berikut ini beberapa faktor yang menyebabkan loading blog menjadi lelet, diantaranya sebagai berikut :

• Halaman terlalu banyak gambar
• Gambar pada halaman ukurannya terlalu besar, sehingga membutuhkan waktu untuk dimuat
• Ada resource eksternal yang harus dimuat (misal : Framework, Iframe, CSS, atau JS)
• Struktur halaman tidak valid, maksudnya tag html yang dimuat tidak sesuai format yang seharusnya. Misal salah meletakkan tag penutup pada heading, atau tag tidak disertai penutup.
• Faktor eksternal (seperti bandwith hosting, storage hosting, internet down, dll)

Pada 2 poin terakhir ini jarang sekalikita menemukannya terjadi, namun pada poin-poin sebelumnya sangatlah sering terjadi contohnya di blog kamu sendiri.

Cara Mempercepat Loading Blog dengan Lazy Load Gambar

1. Silahkan buka dashboard blogger dan Login dengan menggunakan Email.

2. Masuk ke menu Tema > Klik Edit HTML

3.  Selanjutnya, cari kode </body> dan pasang kode dibawah ini sebelum kode </body>

<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/AVvXsEiQEUWDreKe-nM2D7xMtjzFMzB_StWGV6DH-jlyLW_9sEl4oUxbVX36bN9Pf3Mb2Bv7_nj845N5wZOxO5wRrAFQVrkBkLQ-0qpfmcNE9DgAxYZVYRE54UKaR76UxOcz3sNRIypSbrizoRfn/s640/arlinadesign.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

4. Kalau sudah silahkan klik Simpan dan selesai

Perubahan akan terlihat setelah kamu meng-refresh halaman kamu dan lihatlah perubahannya. Semoga bermanfaat bagi kamu yang memiliki blog yang memiliki kecepatan yang lambat.

 

Share Share Tweet Share Share Share

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi Anda membantu Admin untuk lebih giat lagi dalam membagikan template blog yang berkualitas. Terima kasih.