Belajar: Memasang 4 Jenis Lazyload JavaScript Blogger
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 " Lazy Load " yang mana peran dari lazyload ini adalah untuk menahan beban loading suatu objek.
Apa itu Lazyload?
Banyak peranan penting dari yang namanya lazyload ini, namun kebanyakan lazyload hanya digunakan untuk mengoptimasi sebuah file gambar / foto yang berada disebuah blog.Ada 3 fungsi yang bisa kita lakukan untuk menggunakan script Lazyload ini.
- Lazyload untuk memaksimalkan sebuah objek Foto | Gambar.
- Mengoptimasi bagian Video menggunakan lazyload.
- Lazyload kusus JavaScript, untuk menahan beban JavaScript / jQuery
Keuntungan Mengunakan Lazyload
Menggunakan lazyload adalah saran terbaik yang dianjurkan oleh Google sendiri.
Sebab tidak ada cara lain yang terbaik untuk mendapatkan kecepatan situs selain memasang lazyload ini.
Dari segi keuntungan yang didapat jika memakai lazyload ini adalah sebagai berikut :
- Mempercepat pemuatan halaman blog untuk segi gambar & video.
- Memberikan nilai angka hijau disetiap alat cek kecepatan situs.
- Mendapatkan nilai tambahan dari sisi SEO.
- Mengurangi masalah kehilangannya pengunjung situs.
- Tampilan lebih dinamis dan segar.
Dipembahasan kali ini, mari kita pelajari bagaimana cara memasang lazyload kusus di blogspot. Jadi ini hanya berlaku buat pengguna blogger.com saja tidak berlaku bagi WordPress.
Sebab WordPress cukup memasang sebuah plugin maka otomatis lazyload akan berfungsi sendirinya.
Ada 4 cara yang saya bahas dalam tulisan ini, mulai dari segi yang paling mudah sampai tahap paling sulit.
Semua panduan ini saya buatkan dengan sepenuh hati dengan harapan membantu teman-teman semua dalam mengomptimalkan kecepatan loading blog yang di kelola.
4+ Memasang Lazyload di Blogger
Cara pertama adalah cara yang paling mudah dan simple yang saya jelaskan dibawah ini.
Lazyload JavaScript Otomatis
- Salin / Copy kode
JavaScript
dibawah ini./*! lazyload blogger v1.0.0 - Copyright (c) 2019 reedniv */ (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
Memasang Lazyload Manual
Cara kedua ini adalah cara sedikit sulit, 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>
dalam template.Namun dengan menerapkan cara kedua ini, lebih efektif untuk menerapkan fungsi lazyload buat kecepatan blog kamu.
JavaScript Lazyload Efek Scroll
- 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
menjadiexpr:data-src
- Lagi tambahkan tulisan
src
dengan kode gambar inidata: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.
JavaScript Lazyload Menggunakan CSS
- Silahkan salin kode jQuery dibawah ini.
<script type='text/javascript'>//<![CDATA[ $('img').each(function(){var url = $(this).attr('data-src');$(this).attr('src',url);$(this).removeAttr('data-src')});$('.lazy-load').each(function(){var url = $(this).attr('data-src');$(this).attr('style','background-image:url("'+url+'");');$(this).removeAttr('data-src');$(this).removeClass('lazy-load')}); //]]></script>
Catatan: Pastikan didalam template kamu sudah terpasang jQuery versi berapapun.
- Salin lagi kode CSS dikolom bawah ini.
<style>.lazy-load {position: relative;display: block;background-color: #f5f6f7; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 1;} </style>
- Letakan kode yang disalin tadi di atas
</head>
|</body>
- Langkah berikutnya adalah mengedit bagian HTML template, cari kode dengan CTRL+F
<b:includable id='postFeaturedImage' var='post'>
ini dalam template, bisa disesuaikan dengan kode thumbnail template kamu masing-masing. - Kurang lebih nanti kodenya seperti contoh milik saya dibawah ini.
<div class='post-image-wrap item_image'> <a class='post-image-link' expr:href='data:post.url'> <b:if cond='data:post.featuredImage'> <img class='lazy-load post-thumb' expr:alt='data:post.title' expr:data-src='data:post.featuredImage resizeImage 300'/> <b:else/> <img class='lazy-load post-thumb' data-src='https://4.bp.blogspot.com/-O3EpVMWcoKw/WxY6-6I4--I/AAAAAAAAB2s/KzC0FqUQtkMdw7VzT6oOR_8vbZO6EJc-ACK4BGAYYCw/w680/nth.png' expr:alt='data:post.title'/> </b:if> </a> </div>
- Silahkan tambahkan kode
lazy-load
dibagian<img class='
dan juga bagian kodesrc
dengan menambahkan textdata-
menjadidata-src
- Ubah kode
<img
menjadi<span
| kode langkapnya<span class='lazy-load post-thumb' expr:alt='data:post.title' expr:data-src='data:post.featuredImage resizeImage 300'/>
- Jika sudah, Klik
SIMPAN
Kode HTML thumbnail diatas, saya ambil dari kode terbaru template blogger, akan terlihat berbeda jika template yang kamu gunakan masihversi lama.
jQuery Lazyload Scroll Menggunakan CSS
Cara ini kurang lebih sama halnya seperti cara nomor tiga menggunakan CSS, Hanya beda dibagian kode JavaScript saja.
- Salin kode JavaScript dibawah ini.
<script> //<![CDATA[ !function(b){$(".lazyload").each(function(){var e=b(this),f=e.attr("data-image"),g=Math.round(e.width()),h=Math.round(e.height()),a="w"+g+"-h"+h+"-p-k-no-nu",c="";if(f.match("/s72-c")){c=f.replace("/s72-c","/"+a)}else{if(f.match("/w72-h")){c=f.replace("/w72-h72-p-k-no-nu","/"+a)}else{if(f.match("=w72-h")){c=f.replace("=w72-h72-p-k-no-nu","="+a)}else{c=f}}}b(window).on("load resize scroll",d);function d(){var k=b(window).height(),i=b(window).scrollTop(),j=e.offset().top;if(i+k>j){var l=new Image();l.onload=function(){e.attr("style","background-image:url("+this.src+")").addClass("show-hjn")},l.src=c}}d()})}(jQuery); //]]> </script>
- Salin lagi kode CSS dikolom bawah ini.
<style> .post-thumb {position: relative;display: block; background-color: #f5f6f7; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 1; opacity: 0; transition: opacity .35s ease;} .post-thumb.lazyload {opacity:1} </style>
- Letakan kedua kode jQuery & CSS yang disalin tadi diatas kode
</head>
- Masih dalam mode edit HTML template, cari kode HTML thumbnail
<img class='
- Jika ketemu ganti
<img class=''
dengan kode<span class='post-thumb lazyload'
danexpr:src
ganti menjadiexpr:data-image
lalu kolomnya isi denganresizeImage(data:post.featuredImage, 72, "1:1")
<span class='post-thumb lazyload' expr:alt='data:post.title' expr:src='resizeImage(data:post.featuredImage, 72, "1:1")'/>
- Selanjutnya klik SIMPAN | SAVE
Bonus Lazyload Scroll Google AdSense
Tidak banyak yang perlu kamu lakukan, cukup salin kode JavaScript dibawah ini.
<script> // Lazy Load AdSense var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0); //]]></script>Letakan diatas
</head>
dan klik
Selanjutnya silahkan kamu cek berbagai tool online untuk cek kecepatan loading blog.
- GTMetrix - Rekomedasi
- Google PageSpeed
- Pingdom
Masih kurang dengan panduan diatas? Silahkan tulis dikolom komentar tentang pengoptimalan kecepatan bagian apa lagi yang di inginkan.
Yang nantinya sebisa mungkin admin bantu untuk merangkumnya.
Akhir Kata
Jika ada pertanyaan atau juga ada bagian belum di mengerti, jangan ragu untuk menulis pertanyaan dikolom komentar blog ini, yang nantinya akan saya bantu menjawabnya.12 komentar untuk "Belajar: Memasang 4 Jenis Lazyload JavaScript Blogger"
Kami memiliki kebijakan dalam berkomentar di Blog ini :
— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan
NB :Komentar yang melanggar tidak akan ditampilkan
Kebijakan komentar yang bisa Anda temukan selengkapnya disini
Dukungan :
Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini
Tumben pakai yang simple sekarang
BalasHapusWkwkwkwk Lbh enak aja kalau simple mah, gk ribet dipandang!
HapusJangan memberikan tag -img- yang berada ditulisan kamu / halaman artikel, sebab tidak bagus buat SEO / Penulusuran gambar Goolge.
BalasHapusMaksud dari kata ini apa mas? Penempatannya yang lebih detail, maaf kurang paham tag conditional. Saya tdk paham... Mohon penjelasannya
Terima kasih atas komentar dan pertanyaan nya.
HapusJadi setiap kita bikin postingan di blogger, kita pasti menggunakan gambar.
Contohnya gambar dalam artikel. Ini tidak perlu dikasih tag <div img class="lazyload"
Jadi yang perlu dikasih tag class "lazyload" itu cukup gambar-gambar yang ada dalam file template saja, untuk gambar dalam halaman artikel tidak perlu.
moon maaf mbak saya coba pakai cara pertama memang sedikit mengurangi speed tapi dilain sisi muncul malasah encode image di page speed .Mohon bantuanya
BalasHapusMaksudnya bagian fotonya yang tidak terlihat atau gimana?
HapusBisa jelaskan lebih rinci masalahnya?
Como corrigir o erro rg.xml.sax.SAXParseException
BalasHapusBicara yang jelas bambang!
HapusHalo min BosHjn, saya suka template blog ini. Bagiamana cara beli template ini?
BalasHapusTema yang dipakai blog ini tidak dijual, kalo tertarik bisa cari tema blogger di temabanua
HapusHmmm leh juga nih teknik lazy load nya.
BalasHapusBtw, apakah lazy load otomatis dan lazy load scroll adsense nya bisa dipakai di WP juga?
Atau harus ada tambahan atau diubah?
Script diatas sama saja fungsinya mau di WP Blogger bisa, dengan syarat mengetahui letak posisi folder script di tema WordPress.
HapusJika di blogger cukup HTML saja untuk bagian tag setiap gambar, beda hal lagi dengan WordPress yang mana biasanya memakai php untuk bagian gambar.