Dapatkan diskon: Template 50% hanya bulan ini! Beli sekarang! Harga diskon Template: 50% hanya bulan ini!

Cara Memasang Lazyload Paling Mudah di Blogspot

Cara Memasang Lazyload Paling Mudah di Blogspot Images @rian_seo
BOSHJN.ID - Pernahkah kamu mengunjungi sebuah blog yang kecepatannya lumayan cepat dari blog biasanya, kususnya blog yang bernaung di blogspot? Jika iya, maka tahukah kamu tema yang mereka gunakan biasanya adalah tema yang sudah di optimasi segi kecepatannya.

Seperti apa template blog yang sudah di optimasi itu? Jawabannya cukup simple, mereka hanya menggunakan sedikit tambahan javascript yang bernama " Lazyload " yang mana peran dari lazyload ini adalah untuk menahan beban loading suatu objek.

Banyak peranan penting dari yang namannya lazyload ini, namun kebanyakan lazyload ini hanya digunakan untuk mengoptimasi sebuah file gambar / foto yang berada disebuah blog.

Cara Memasang Lazyload Paling Mudah di Blogspot

Ada 2 fungsi yang bisa kita lakukan untuk menggunakan script Lazyload ini.
  1. Lazyload untuk memaksimalkan sebuah objek foto / gambar
  2. Lazyload kusus JavaScript, untuk menahan beban JavaScript / JQurey
Namun yang sering kita kenal, adalah lazyload untuk sebuah foto yang berguna membuat loading blog kita menjadi lebih ringan dan cepat daripada sebelumnnya.

Nah dipembahasan kali ini, mari kita pelajari bagaimana cara memasang Lazyload kusus di blogspot. 

Jadi ini hanya berlaku buat pengguna blogspot saja, tidak berlaku bagi WordPress, sebab wordpress cukup memasang sebuah plugin maka otomatis lazyload akan berfungsi sendirinya.

Cara Memasang Lazyload di Blogger


Cara pertama, adalah cara yang paling mudah dan simple yang saya bagikan kali ini.

Salin / Copy kode JavaScript dibawah ini.
/*!
 * lazyload blogger v1.0.0
 * Copyright (c) 2019 reedniv
 * Licensed under the MIT license
*/

(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:"data:image/gif;base64,R0lGODlhAQABAIABAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAICTAEAOw==",effect:"fadeIn",threshold:"-50"})});

Buka Blogger > Template / Theme > Edit HTML > CTRL+F masukan tulisan " </body> " dikolom pencarian dan klik " ENTER "

Tempelkan / Paste kode JavaScript yang sudah disalin tadi, tepat dibagian atas kode </body>.

Klik " SIMPAN "

Lazyload akan otomatis berjalan tanpa harus kamu atur bagian-bagian tertentunya!
NB : Warna yang saya seleksi itu adalah gambar saat gambar  terload di blog kamu, Jika kamu tidak menyukai akan tampilannya bisa ubah gambar dengan milik kamu sendiri
Cara kedua ini adalah langkah tambahan, Jika kamu tidak ingin rebit cukup melakukan cara pertama diatas saja.

Untuk cara kedua ini, lumayan sedikit susah bagi yang awam akan kode HTML. Sebab disini kamu harus menambahkan tag class= disetiap bagian tag <img =.

Namun dengan menerapkan cara kedua ini, lebih efektif untuk menerapkan fungsi lazyload buat kecepatan blog kamu.

Cara Memasang Lazyload Terbaru di Blogspot


Buka Blogger > Template / Theme > Edit HTML

Cari kode tag <img> / <img = setiap kode thumbanil template biasanya berbeda-beda, jadi bisa kamu cari yang tag <img> dengan berkaitan tulisan thumbanil.
<img expr:alt='data:post.title' expr:title='data:post.title'expr:src='resizeImage(data:post.firstImageUrl, 225, "225:170")'/>
Jika sudah ketemu dengan kode tag <img> thumbanil, langkah selanjutnya adalah merubah kode sebelumnya menjadi seperti dibawah ini.

- Tambahkan tulisan class='lazy setiap tag <img class='lazy

- Ubah kode tulisan exprc:src menjadi expr:data-src

- Lagi tambahkan tulisan src dengan kode gambar ini  data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

Kurang lebih kode lengkapnya seperti dikolom bawah ini.
<img class='lazy' expr:alt='data:post.title' expr:title='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 225, "225:170")' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
Apabila tag <img class=' sudah terisi sebelumnya, bisa kamu buat tulisan lazy di tag class yang sudah terisi dengan menekan spasi saja, Contohnya.
<img class='thumbanil lazy'
Langkah selanjutnya adalah menyalin kode JavaScript dibawah ini, dan meletakannya diatas kode </body>.
<script type='text/javascript'>//<![CDATA[
function crotLazyLoad(){eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('u B(){Y(v e=o.1r("B"),t=0;t<e.1q;t++)Q(e[t])&&(e[t].N=e[t].1p("1n-N"))}u Q(e){v t=e.1t();Z t.1x>=0&&t.1w>=0&&t.1v<=(y.1u||o.T.1m)&&t.1k<=(y.1c||o.T.1b)}v b=["\\r\\m\\m\\D\\G\\a\\f\\c\\M\\n\\p\\c\\a\\f\\a\\k","\\h\\f","\\r\\c\\c\\r\\l\\A\\D\\G\\a\\f\\c","\\g\\h\\r\\m","\\p\\l\\k\\h\\g\\g","\\V\\1a\\1e\\R\\h\\f\\c\\a\\f\\c\\M\\h\\r\\m\\a\\m","\\w\\p\\a\\1l\\p\\c\\k\\n\\l\\c","\\r","\\1f\\w\\a\\k\\L\\1j\\a\\g\\a\\l\\c\\h\\k\\W\\g\\g","\\g\\a\\f\\q\\c\\A","\\w\\p\\a\\k\\W\\q\\a\\f\\c","\\c\\a\\p\\c","\\m\\h\\l\\w\\F\\a\\f\\c\\D\\g\\a\\F\\a\\f\\c","\\1i\\h\\m\\L","\\l\\g\\n\\l\\1g","\\p\\l\\k\\h\\g\\g\\1h\\h\\J","\\c\\h\\J","\\q\\a\\c\\S\\h\\w\\f\\m\\n\\f\\q\\R\\g\\n\\a\\f\\c\\1z\\a\\l\\c","\\A\\k\\a\\X","\\a\\1y\\a\\l","\\q\\a\\c\\D\\g\\a\\F\\a\\f\\c\\S\\L\\1F\\m","\\p\\l\\k\\h\\g\\g\\U\\a\\n\\q\\A\\c","\\n\\f\\f\\a\\k\\U\\a\\n\\q\\A\\c","\\J\\k\\a\\G\\a\\f\\c\\V\\a\\X\\r\\w\\g\\c","\\n\\c\\a\\F"];u I(d,j){y[b[0]]?y[b[0]](d,j):y[b[2]](b[1]+d,j)}I(b[3],B),I(b[4],B),o[b[0]](b[5],u(){b[6];Y(v d=o[b[8]](b[7]),j=d[b[9]],s=/1D|1B/i[b[11]](1G[b[10]])?o[b[12]]:o[b[13]],C=u(d,j,s,C){Z(d/=C/2)<1?s/2*d*d*d+j:s/2*((d-=2)*d*d+2)+j};j--;){d[b[1C]](j)[b[0]](b[14],u(d){v j,E=s[b[15]],x=o[b[1A]](/[^#]+$/[b[19]](1H[b[18]])[0])[b[17]]()[b[16]],z=s[b[1d]]-y[b[1s]],O=z>E+x?x:z-E,K=1o,H=u(d){j=j||d;v x=d-j,z=C(x,E,O,K);s[b[15]]=z,K>x&&P(H)};P(H),d[b[1E]]()})}});',62,106,'||||||||||x65|_0x1b5d|x74|_0xdd48x2||x6E|x6C|x6F||_0xdd48x3|x72|x63|x64|x69|document|x73|x67|x61|_0xdd48x4||function|var|x75|_0xdd48x7|window|_0xdd48x8|x68|lazy|_0xdd48x5|x45|_0xdd48x6|x6D|x76|_0xdd48xb|registerListener|x70|_0xdd48xa|x79|x4C|src|_0xdd48x9|requestAnimationFrame|isInViewport|x43|x42|documentElement|x48|x44|x41|x66|for|return|||||||||||x4F|clientWidth|innerWidth|21|x4D|x71|x6B|x54|x62|x53|left|x20|clientHeight|data|900|getAttribute|length|getElementsByClassName|22|getBoundingClientRect|innerHeight|top|right|bottom|x78|x52|20|trident|24|firefox|23|x49|navigator|this'.split('|'),0,{}));} eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('j 4=["\\7\\9\\9\\e\\d\\a\\b\\8\\i\\g\\h\\8\\a\\b\\a\\k","\\f\\c\\7\\9","\\7\\8\\8\\7\\m\\l\\e\\d\\a\\b\\8","\\c\\b\\f\\c\\7\\9"];5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;5[4[0]]?5[4[0]](4[1],6,!1):5[4[2]]?5[4[2]](4[1],6):5[4[3]]=6;',23,23,'||||_0xdfb4|window|crotLazyLoad|x61|x74|x64|x65|x6E|x6F|x76|x45|x6C|x69|x73|x4C|var|x72|x68|x63'.split('|'),0,{}));
//]]></script>
Klik " SIMPAN " Template.
NB: Setiap tag <img> bisa kamu tambahkan class='lazy', jadi bukan hanya tag <img> thumbanil saja.
Jangan memberikan tag <img> yang berada ditulisan kamu / halaman artikel, sebab tidak bagus buat SEO / Penulusuran gambar Goolge.

Selanjutnya silahkan kamu cek berbagai tool online untuk cek kecepatan loading blog.
  1. GTMetrix - Rekomedasi
  2. Google PageSpeed
  3. Pingdom
Jika ada pertanyaan atau juga ada bagian belum di mengerti, jangan ragu untuk menulis komentarnya dikolom blog ini, yang nantinya akan saya bantu menjawabnnya.
Bagaimana reaksi Anda tentang artikel ini?
Previous article
Next article

2 Comment to "Cara Memasang Lazyload Paling Mudah di Blogspot"

  1. Tumben pakai yang simple sekarang

    ReplyDelete
    Replies
    1. Wkwkwkwk Lbh enak aja kalau simple mah, gk ribet dipandang!

      Delete

Kami memiliki kebijakan dalam berkomentar di blog ini :

- Dilarang promosi suatu barang
- Dilarang memasang link aktif di komentar
- Dilarang promosi iklan yang berbau judi, pornografi dan kekerasan
- Dilarang menulis komentar yang berisi sara atau cemuhan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan subscribe blog ini

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Subscribe now

Signup now to my exclusive newsletter