Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Mempercepat Loading Blog Dengan jQuery Lazy Load

fast speed load blog Mempercepat Loading Blog Dengan jQuery Lazy Load – melanjutkan pembahasan sebelumnya mengenai tips trik mempercepat loading blog tidak hanya dilakukan dengan menggunakan satu cara saja, namun untuk lebih memaksimalkan loading blog kita bisa menerapkan beberapa cara. Dengan memanfaatkan jQuery Lazy Load untuk meningkatkan loading blog agar proses load image bisa semaksimal mungkin merupakan salah satu usaha yang cukup untuk membantu halaman blog tampil lebih cepat dari sebelumnya. Waktu yang biasanya digunakan untuk menunggu proses loading untuk memuat gambar yang biasanya tampil lebih lama, maka setidaknya jQuery Lazy Load bisa meminimalisir kemungkinan tersebut untuk memunculkan gambar yang terlihat pada halaman blog akan nampak lebih awal sedangkan load gambar yang lainnya akan bekerja apabila pada halaman tersebut kita scroll. Sehingga pada dasarnya jQuery Lazy Load memiliki cara kerja untuk menayangkan bagian gambar yang terlihat dari halaman blog terlebih dahulu untuk meningkatkan page load. Seperti apa langkah-langkahnya untuk menerapkan kedalam blog, berikut tutorialnya untuk cara Mempercepat Loading Blog Dengan jQuery Lazy Load.

1. Login ke akun blogger.
2. Masuk menu Template dan pilih Edit HTML.
3. Selanjutnya copy kode berikut ini lalu paste di atas kode </head>
<script type='text/javascript'>//<![CDATA[
(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://lh5.googleusercontent.com/-20YhsQ_Xw9Y/UjHQlUIi0UI/AAAAAAAAGIo/6_etIYcweEQ/h120/lazy+image.gif",effect:"fadeIn",threshold:"-50"})})//]]></script>
4. Langkah terakhir Simpan Template.

Setelah terpasang kini beban load image menjadi lebih ringan dan waktu page load juga meningkat, sekian tutorial cara Mempercepat Loading Blog Dengan jQuery Lazy Load.

Berlangganan artikel via email

41 Response to "Mempercepat Loading Blog Dengan jQuery Lazy Load"

Pertamanya mas..makin kenceng aja blognya mas

Balas

Hmmm njajal dulu kalo yg ini... tp di blog yg laen..

Balas

cocok ni sob, bagi para sobat yang blognya bertemakan komik, bisa seperti google img, thks untuk sharenya master

Balas
avatar
Anonymous

Udah saya coba mas Andes lumayan agak cepat sekarang, saya cek pake pagespeed insights ada penambahan walaupun nggak terlalu banyak, thanks Mas Andes :)

Balas

nah ini yang di sebt the flast hehe

Balas

nah ini baru saya ngerti dan mencobanya mas..
kalau mas kasih tutorial seperti ini terus saya mendoakan sampean tambah ganteng satu tahun deh mas, hihihihi

Balas
avatar
Anonymous

keren nih, menayangkan bagian gambar yang terlihat dari halaman blog terlebih dahulu.

Balas

Keren Mas artikelnya...
Memang untuk bisa membuat Pengunjung senang kita harus Mempercepat waktu loading blog kita..

Balas

Wah..pantesan blog nya mas Andes loadingnya kayak orang pas mau ambil gaji...
Ngebuttt...trus ya mas..hehe :)

Balas

Sedikit2...lama2 jd bukit mas :)

Balas
avatar
Anonymous

kira-kira ini bahaya ga buat blog mas?

Balas

Iya mas Budi, lumayanlah ada peningkatan :)

Balas

iya ternyata pake code di atas jadi blognya ngebut yah mas...

Balas
avatar
Anonymous

efek sampingnya bannya cepet gundul mas hehe...

Balas
avatar
Anonymous

wah keren ni pasti bakal jadi kaya blognya mas andes ya....ngebuuut ga pake rem :D

Balas

Memang benar-benar manjur tutorial nya mas. Saya sudah coba terapkan trik diatas dengan pasang kode jquery lazy load diatas kode haed. Langsung bisa lumayan cepat loading nya. Terimakasih banyak master atas ilmunya :)

Sangat bermanfaat untuk pemula seperti saya :)

Balas

kapan2 coba deh gannnnnn

Balas

hadir mas andes,,,,,,

Balas

Kalau untuk blog yang berbasis wordpress caranya gimana ya gan? terima kasih atas jawabannya.
Salam kenal
Indra

Balas
avatar
Anonymous

TERNYATA SIMPEL JUGA YA MAS, ... OH IYA BELOG MAS ANDES MAKIN KENCENG SAJA... WUUUUUUSSSS... IZIN PRAKTEK MAS

Balas

Saya juga mau praktek dulu ah :D

Balas

nyimak.. nyimak... langsung praktekin dah

Balas

siiipp, udah aq praktekin ke blogku dan berhasil, makasih bnyak sob...
hehehe

Balas

Kalau orang mau ambil gaji, bukan ngebut lagi mas. Tapi pada rebutan wkwkwkwk :D

Blog nya siapa dulu? Mas Andes getu loch ^_+

Kalau blog nya ngebut, kira-kira yang punya blog juga ikut-ikutan ngebut nggak ya? :)

Balas

Nggak ada efek samping nya kok. Kan kode CSS ini bukan obat wkwkwk :D

Balas

Sepertinya Mas Budi sukanya yang berbukit-bukit nich :D

Balas

Kenapa nggak sekarang aja mas? wkwkwk :D

Balas

Saya nitip absen ya jenk ^_+

Balas

sama aja mas kyak biasa :)

Balas

hah.. jadi pengen yang berbukit bukit juga nih jadinya :D

Balas

saya malah baru tau the flast kang :D

Balas

biar ganteng permanen gimana mas :)

Balas

kalo yang punya blog suka yang pelan2 aja mbak biar lebih terasa :D ahaha..

Balas

bahaya mas kalo sambil blogging di tengah jalan :)

Balas

mbak eka sukanya merendah nih :)

Balas

emang ada apa di bukit mas hehe...

Balas

emang the flast itu apa yah?

Balas

iya kapan-kapan mah keburu lupa deh hehe...

Balas

terima kasih mas infonya, akan dicoba, salam kenal ..kunjungan perdana

Balas

Udah ane pasang di blog ane gan, dan hasilnya lumayan efektif..

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Mempercepat Loading Blog Dengan jQuery Lazy Load" ini bermanfaat, share ke jejaring sosial.
Konversi Kode