Cara memperbaiki error defer offscreen image diblogger

by

helmy

Selamat Datang di Blog Orang IT. Akhir-akhir ini saya cukup sibuk mengurusi pekerjaan didunia nyata apalagi ketika berhadapan dengan client yang menyebalkan, yahh namanya juga pelayanan publik jadi harus mendengar segala kritikan masyarakat meski itu memuakkan
Oke , peringatan untuk mendefer gambar / image pada postingan blog sering muncul saat pengguna menguji struktur blognya pada layanan google pagespeed insight versi terbaru . Hal ini menjadi perhatian penting karena ukuran gambar yang besar akan mempengaruhi kecepatan loading sebuah halaman blog
Cara memperbaiki defer offscreen image diblogger
Saat anda mengunggah gambar dengan ukuran 1 Mb maka web browser akan mendownload gambar tersebut dalam ukuran yang sebenarnya barulah dicompress oleh web browser agar sesuai dengan perangkat pengguna
Itulah sebabnya para blogger memberi saran agar mengcompress ukuran gambar secara manual sebelum diupload kedalam postingan , sementara bagi pengguna wordpress saat pengguna mengunggah gambar secara otomatis gambar tersebut akan digandakan menjadi 4 ukuran berbeda yakni dekstop , gadget , tab dan seluler
Gambar menjadi element penting untuk melengkapi informasi artikel dan membunuh rasa bosan saat membaca artikel teks yang panjang
Pada awalnya saran untuk mendefer gambar saya abaikan begitu saja tapi lama-kelamaan mulai penasaran juga bagaimana sih cara memperbaikinya?
Saya berfikir bahwa mengaplikasikan saran yang diberikan oleh alat penguji page speed insight akan membuat halaman saya ramah pencari
Saya memang memiliki beberapa postingan tutorial yang menyisipkan lebih dari 10 gambar , bisa anda bayangkan sendiri jika tipe gambar .PNG dan diunggah dalam kondisi originalnya pasti sangat membuat halaman lemot
Ada beberapa cara untuk mendefer gambar , anda tau situs medium? mereka menggunakan progressive images loader
Sayangnya blogger tidak menyediakan plugin otomatisasi seperti itu jadi pengguna blogger harus menambahkan secara manual kedalam template blog
Trik ini didapatkan dari blog kompiajaib tentang metode defer menggunakan lazy load . Yaa dulu penggunaan lazy load menjadi pro kontra dikalangan blogger namun setelah pagespeed insight menyarankan lazy load kini semua orang menggunakannya baik blogger atau wordpress
Silahkan copy paste script ini kedalam template blog dan letakkan tepat sebelum tag </body>

<script> //<![CDATA[ /*! lazysizes – v4.1.5 */ !function(a,b){var c=b(a,a.document);a.lazySizes=c,”object”==typeof module&&module.exports&&(module.exports=c)}(window,function(a,b){“use strict”;if(b.getElementsByClassName){var c,d,e=b.documentElement,f=a.Date,g=a.HTMLPictureElement,h=”addEventListener”,i=”getAttribute”,j=a[h],k=a.setTimeout,l=a.requestAnimationFrame||k,m=a.requestIdleCallback,n=/^picture$/i,o=[“load”,”error”,”lazyincluded”,”_lazyloaded”],p={},q=Array.prototype.forEach,r=function(a,b){return p[b]||(p[b]=new RegExp(“(\s|^)”+b+”(\s|$)”)),p[b].test(a[i](“class”)||””)&&p[b]},s=function(a,b){r(a,b)||a.setAttribute(“class”,(a[i](“class”)||””).trim()+” “+b)},t=function(a,b){var c;(c=r(a,b))&&a.setAttribute(“class”,(a[i](“class”)||””).replace(c,” “))},u=function(a,b,c){var d=c?h:”removeEventListener”;c&&u(a,b),o.forEach(function(c){a[d](c,b)})},v=function(a,d,e,f,g){var h=b.createEvent(“Event”);return e||(e={}),e.instance=c,h.initEvent(d,!f,!g),h.detail=e,a.dispatchEvent(h),h},w=function(b,c){var e;!g&&(e=a.picturefill||d.pf)?(c&&c.src&&!b[i](“srcset”)&&b.setAttribute(“srcset”,c.src),e({reevaluate:!0,elements:[b]})):c&&c.src&&(b.src=c.src)},x=function(a,b){return(getComputedStyle(a,null)||{})[b]},y=function(a,b,c){for(c=c||a.offsetWidth;c<d.minSize&&b&&!a._lazysizesWidth;)c=b.offsetWidth,b=b.parentNode;return c},z=function(){var a,c,d=[],e=[],f=d,g=function(){var b=f;for(f=d.length?e:d,a=!0,c=!1;b.length;)b.shift()();a=!1},h=function(d,e){a&&!e?d.apply(this,arguments):(f.push(d),c||(c=!0,(b.hidden?k:l)(g)))};return h._lsFlush=g,h}(),A=function(a,b){return b?function(){z(a)}:function(){var b=this,c=arguments;z(function(){a.apply(b,c)})}},B=function(a){var b,c=0,e=d.throttleDelay,g=d.ricTimeout,h=function(){b=!1,c=f.now(),a()},i=m&&g>49?function(){m(h,{timeout:g}),g!==d.ricTimeout&&(g=d.ricTimeout)}:A(function(){k(h)},!0);return function(a){var d;(a=!0===a)&&(g=33),b||(b=!0,d=e-(f.now()-c),d<0&&(d=0),a||d<9?i():k(i,d))}},C=function(a){var b,c,d=99,e=function(){b=null,a()},g=function(){var a=f.now()-c;a<d?k(g,d-a):(m||e)(e)};return function(){c=f.now(),b||(b=k(g,d))}};!function(){var b,c={lazyClass:”lazyload”,loadedClass:”lazyloaded”,loadingClass:”lazyloading”,preloadClass:”lazypreload”,errorClass:”lazyerror”,autosizesClass:”lazyautosizes”,srcAttr:”data-src”,srcsetAttr:”data-srcset”,sizesAttr:”data-sizes”,minSize:40,customMedia:{},init:!0,expFactor:1.5,hFac:.8,loadMode:2,loadHidden:!0,ricTimeout:0,throttleDelay:125};d=a.lazySizesConfig||a.lazysizesConfig||{};for(b in c)b in d||(d[b]=c[b]);a.lazySizesConfig=d,k(function(){d.init&&F()})}();var D=function(){var g,l,m,o,p,y,D,F,G,H,I,J=/^img$/i,K=/^iframe$/i,L=”onscroll”in a&&!/(gle|ing)bot/.test(navigator.userAgent),M=0,N=0,O=0,P=-1,Q=function(a){O–,a&&a.target&&u(a.target,Q),(!a||O<0||!a.target)&&(O=0)},R=function(a,c){var d,f=a,g=”hidden”==x(b.body,”visibility”)||”hidden”!=x(a.parentNode,”visibility”)&&”hidden”!=x(a,”visibility”);for(F-=c,I+=c,G-=c,H+=c;g&&(f=f.offsetParent)&&f!=b.body&&f!=e;)(g=(x(f,”opacity”)||1)>0)&&”visible”!=x(f,”overflow”)&&(d=f.getBoundingClientRect(),g=H>d.left&&G<d.right&&I>d.top-1&&F<d.bottom+1);return g},S=function(){var a,f,h,j,k,m,n,p,q,r,s,t,u=c.elements;if((o=d.loadMode)&&O<8&&(a=u.length)){for(f=0,P++,r=!d.expand||d.expand<1?e.clientHeight>500&&e.clientWidth>500?500:370:d.expand,s=r*d.expFactor,t=d.hFac,N<s&&O<1&&P>2&&o>2&&!b.hidden?(N=s,P=0):N=o>1&&P>1&&O<6?r:M;f<a;f++)if(u[f]&&!u[f]._lazyRace)if(L)if((p=u[f][i](“data-expand”))&&(m=1*p)||(m=N),q!==m&&(y=innerWidth+m*t,D=innerHeight+m,n=-1*m,q=m),h=u[f].getBoundingClientRect(),(I=h.bottom)>=n&&(F=h.top)<=D&&(H=h.right)>=n*t&&(G=h.left)<=y&&(I||H||G||F)&&(d.loadHidden||”hidden”!=x(u[f],”visibility”))&&(l&&O<3&&!p&&(o<3||P<4)||R(u[f],m))){if($(u[f]),k=!0,O>9)break}else!k&&l&&!j&&O<4&&P<4&&o>2&&(g[0]||d.preloadAfterLoad)&&(g[0]||!p&&(I||H||G||F||”auto”!=u[f][i](d.sizesAttr)))&&(j=g[0]||u[f]);else $(u[f]);j&&!k&&$(j)}},T=B(S),U=function(a){s(a.target,d.loadedClass),t(a.target,d.loadingClass),u(a.target,W),v(a.target,”lazyloaded”)},V=A(U),W=function(a){V({target:a.target})},X=function(a,b){try{a.contentWindow.location.replace(b)}catch(c){a.src=b}},Y=function(a){var b,c=a[i](d.srcsetAttr);(b=d.customMedia[a[i](“data-media”)||a[i](“media”)])&&a.setAttribute(“media”,b),c&&a.setAttribute(“srcset”,c)},Z=A(function(a,b,c,e,f){var g,h,j,l,o,p;(o=v(a,”lazybeforeunveil”,b)).defaultPrevented||(e&&(c?s(a,d.autosizesClass):a.setAttribute(“sizes”,e)),h=a[i](d.srcsetAttr),g=a[i](d.srcAttr),f&&(j=a.parentNode,l=j&&n.test(j.nodeName||””)),p=b.firesLoad||”src”in a&&(h||g||l),o={target:a},p&&(u(a,Q,!0),clearTimeout(m),m=k(Q,2500),s(a,d.loadingClass),u(a,W,!0)),l&&q.call(j.getElementsByTagName(“source”),Y),h?a.setAttribute(“srcset”,h):g&&!l&&(K.test(a.nodeName)?X(a,g):a.src=g),f&&(h||l)&&w(a,{src:g})),a._lazyRace&&delete a._lazyRace,t(a,d.lazyClass),z(function(){(!p||a.complete&&a.naturalWidth>1)&&(p?Q(o):O–,U(o))},!0)}),$=function(a){var b,c=J.test(a.nodeName),e=c&&(a[i](d.sizesAttr)||a[i](“sizes”)),f=”auto”==e;(!f&&l||!c||!a[i](“src”)&&!a.srcset||a.complete||r(a,d.errorClass)||!r(a,d.lazyClass))&&(b=v(a,”lazyunveilread”).detail,f&&E.updateElem(a,!0,a.offsetWidth),a._lazyRace=!0,O++,Z(a,b,f,e,c))},_=function(){if(!l){if(f.now()-p<999)return void k(_,999);var a=C(function(){d.loadMode=3,T()});l=!0,d.loadMode=3,T(),j(“scroll”,function(){3==d.loadMode&&(d.loadMode=2),a()},!0)}};return{_:function(){p=f.now(),c.elements=b.getElementsByClassName(d.lazyClass),g=b.getElementsByClassName(d.lazyClass+” “+d.preloadClass),j(“scroll”,T,!0),j(“resize”,T,!0),a.MutationObserver?new MutationObserver(T).observe(e,{childList:!0,subtree:!0,attributes:!0}):(e[h](“DOMNodeInserted”,T,!0),e[h](“DOMAttrModified”,T,!0),setInterval(T,999)),j(“hashchange”,T,!0),[“focus”,”mouseover”,”click”,”load”,”transitionend”,”animationend”,”webkitAnimationEnd”].forEach(function(a){b[h](a,T,!0)}),/d$|^c/.test(b.readyState)?_():(j(“load”,_),b[h](“DOMContentLoaded”,T),k(_,2e4)),c.elements.length?(S(),z._lsFlush()):T()},checkElems:T,unveil:$}}(),E=function(){var a,c=A(function(a,b,c,d){var e,f,g;if(a._lazysizesWidth=d,d+=”px”,a.setAttribute(“sizes”,d),n.test(b.nodeName||””))for(e=b.getElementsByTagName(“source”),f=0,g=e.length;f<g;f++)e[f].setAttribute(“sizes”,d);c.detail.dataAttr||w(a,c.detail)}),e=function(a,b,d){var e,f=a.parentNode;f&&(d=y(a,f,d),e=v(a,”lazybeforesizes”,{width:d,dataAttr:!!b}),e.defaultPrevented||(d=e.detail.width)&&d!==a._lazysizesWidth&&c(a,f,e,d))},f=function(){var b,c=a.length;if(c)for(b=0;b<c;b++)e(a[b])},g=C(f);return{_:function(){a=b.getElementsByClassName(d.autosizesClass),j(“resize”,g)},checkElems:g,updateElem:e}}(),F=function(){F.i||(F.i=!0,E._(),D._())};return c={cfg:d,autoSizer:E,loader:D,init:F,uP:w,aC:s,rC:t,hC:r,fire:v,gW:y,rAF:z}}});  for(var imgEl=document.getElementsByTagName(“img”),i=0;i<imgEl.length;i++)imgEl[i].getAttribute(“src”)&&(imgEl[i].setAttribute(“data-src”,imgEl[i].getAttribute(“src”)),imgEl[i].className+=” lazyload”,imgEl[i].setAttribute(“src”,”data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=”));$(document).ready(function(){$(‘iframe[src*=”youtube.com”]’).wrap(‘<div style=”position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%”></div>’).css({position:”absolute”,top:”0″,left:”0″,width:”100%”,height:”100%”,border:”0″}).addClass(“lazyload”).each(function(){$(this).attr(“data-src”,$(this).attr(“src”)),$(this).removeAttr(“src”,””)})}); //]]> </script>

Script diatas sudah saya uraikan dalam format script yang lengkap , tetapi jika anda ingin menghostingnya menjadi script pemanggilan eksternal silahkan copy seluruh script yang saya berikan kemudian unggah dihost favorit anda
Tetapi jika anda tidak ingin menghostingnya dengan pertimbangan memperlambat loading blog , langsung saja tempel seluruh sript diatas tepat diatas tag </body>
Selain bermanfaat untuk mendefer gambar , fungsi script diatas juga bisa mendefer video yang di embed kedalam postingan blog

Simpan template 
Buka situs pagespeed insight kemudian cek url blog anda sekali lagi , seharusnya saran defer gambar tidak akan muncul lagi karena script diatas sudah berhasil anda terapkan
Demikian postingan mengenai cara mendefer gambar pada blogger semoga bermanfaat dan apabila ada yang ingin ditanyakan jangan sungkan. Sekian dan terimakasih telah membaca artikel di blog www.helmykediri.com jangan lupa baca artikel menarik lainya

Related Post