Percepat Loading Blog Anda dengan Metode Berikut ini

Semua blogger pasti risih kalau blog yang di kelola ternyata Lola (loading lama). Yang punya blog saja risih apalagi pengunjung coba....

Mungkin bisa membuat pengunjung tidak betah lama - lama di blog yang di kunjungi ternyata loadingnya lama. Otomatis trafik turun pastinya.

Lantas bagaimana solusinya ?
Banyak cara untuk mengoptimasi loading blog agar Fast Loading tentunya. Tapi disini saya cuma membahas solusi Percepat Loading Blog dengan menggunakan "Lazy Load".

Apa fungsi dari "Lazy Load"?
Kalau menurut review saya setelah memakai sih, Kegunaanya sendiri ialah untuk menunda loading image,contohnya jika anda membuka artikel yang imagenya banyak otomatis akan meloading atau memuat image (gambar) sampai selesai. Image (gambar) juga salah satu penyakit yang mempengaruhi loading blog anda menjadi lama,apalagi jika kualitas image(gambar) tersebut kualitas tinggi atau dengan jumlah yang banyak.  Nah jika anda menggunakan Lazy Load, maka loading image akan ditunda dulu sampai anda menscrol kebawah untuk melihat image (gambar) selanjutnya.

Bagaimana Menggunakan "Lazy Load"?
Cukup mudah untuk menerapkan di blog anda. Ikuti langkah - langkah berikut:
Pastinya buka edit html pada template anda,selanjutnya cari kode </body>, jika sudah ketemu, copy pasti kode Lazy Load berikut diatas kode </body> pada template anda.
<script type='text/javascript'>
//<![CDATA[
// Lazy Load
!function(e){e.fn.lazyload=function(o){var t={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};o&&e.extend(t,o);var i=this;return"scroll"==t.event&&e(t.container).bind("scroll",function(){var o=0;i.each(function(){if(e.abovethetop(this,t)||e.leftofbegin(this,t));else if(e.belowthefold(this,t)||e.rightoffold(this,t)){if(o++>t.failurelimit)return!1}else e(this).trigger("appear")});var n=e.grep(i,function(e){return!e.loaded});i=e(n)}),this.each(function(){var o=this;void 0==e(o).attr("original")&&e(o).attr("original",e(o).attr("src")),"scroll"!=t.event||void 0==e(o).attr("src")||t.placeholder==e(o).attr("src")||e.abovethetop(o,t)||e.leftofbegin(o,t)||e.belowthefold(o,t)||e.rightoffold(o,t)?(t.placeholder?e(o).attr("src",t.placeholder):e(o).removeAttr("src"),o.loaded=!1):o.loaded=!0,e(o).one("appear",function(){this.loaded||e("<img />").bind("load",function(){e(o).hide().attr("src",e(o).attr("original"))[t.effect](t.effectspeed),o.loaded=!0}).attr("src",e(o).attr("original"))}),"scroll"!=t.event&&e(o).bind(t.event,function(){o.loaded||e(o).trigger("appear")})}),e(t.container).trigger(t.event),this},e.belowthefold=function(o,t){if(void 0===t.container||t.container===window)var i=e(window).height()+e(window).scrollTop();else var i=e(t.container).offset().top+e(t.container).height();return i<=e(o).offset().top-t.threshold},e.rightoffold=function(o,t){if(void 0===t.container||t.container===window)var i=e(window).width()+e(window).scrollLeft();else var i=e(t.container).offset().left+e(t.container).width();return i<=e(o).offset().left-t.threshold},e.abovethetop=function(o,t){if(void 0===t.container||t.container===window)var i=e(window).scrollTop();else var i=e(t.container).offset().top;return i>=e(o).offset().top+t.threshold+e(o).height()},e.leftofbegin=function(o,t){if(void 0===t.container||t.container===window)var i=e(window).scrollLeft();else var i=e(t.container).offset().left;return i>=e(o).offset().left+t.threshold+e(o).width()},e.extend(e.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://lh3.googleusercontent.com/-Y8zjI5vI8I8/AAAAAAAAAAI/AAAAAAAAABo/dXlGX2ekfqY/photo.jpg",effect:"fadeIn",threshold:"-50"})});
$(document).ready(function(){$(".pl").click(function(){$("#share-menu").slideToggle("fast")})});
//]]>
</script>
https://lh3.googleusercontent.com/-Y8zjI5vI8I8/AAAAAAAAAAI/AAAAAAAAABo/dXlGX2ekfqY/photo.jpg bisa diganti dengan foto atau animasi yang tidak berat pastinya.

Jika sudah maka klik simpan dan cek hasilnya, untuk melihat perubahan coba buka artikel yang memakai gambar banyak, maka setiap gambar yang belum terlihat atau yang berada dibawah akan digantikan gambar yang ada pada kode diatas.
Share This :

Artikel terkait : Percepat Loading Blog Anda dengan Metode Berikut ini

Posting Lebih Baru Posting Lama

0 komentar: