Cara Memasang Scrip Kode Lazy Load Gambar dan Iklan AdSense

Tutorial ini merupakan lanjutan dari tutorial pembahasan cara mengatasi loading blog lambat dan berat akibat banyak mengandung konten gambar dan iklan. Pada tutorial ini saya akan membagikan cara bagaimana memasang scrip kode lazy load gambar sekaligus scrip kode lazy load Iklan Google AdSense yang terbukti dapat meningkatkan kecepatan load halaman blog.

Untuk cara kerja script lazy load ini secara singkatnya adalah dimana gambar baru akan ditampilkan secara berangsur ketika pengguna mulai menjelajahi isi koten dari halaman awal menuju inti dan penutup. Secara otomatis beban load halaman akan berkurang karena keseluruhan gambar dan banner iklan tidak secara langsung ditampilkan dalam satu periode waktu.

Yang pertama Memasang Script Lazy Load Google AdSense

Script ini selain berfungsi untuk mencegah banner iklan ditampilkan secara bersamaan ketika suatu halaman blog baik home page maupun halaman konten, juga berfungsi untuk mengurangi jumlah kode javascript iklan. Pada umumnya setiap banner iklan mengandung kode javascript, tentunya ketika anda menerapkan banyak banner iklan akan banyak pula kodejavascript iklan mengikuti jumlah banner iklan yang dipasang. Dengan Scrip Lazy Load Google AdSense, anda hanya perlu memasang satu kode javascript saja, itu pun sudah dimodifikasi sedemikian rupa sehingga tidak murni berbentuk kode javascript sehingga tidak memberikan beban dan mempengaruhi kecepatan load blog.

Salin kode Script Lazy Load berikut ini:

 
<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;error_page&quot;} and not data:blog.searchQuery'>
<!-- Kode ini untuk lazyload adsense dan untuk kode auto ad, silahkan sesuaikan kode google_ad_client -->
<script>
//<![CDATA[
var lazyadsense = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) {
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
document.body.className += " sticky";
lazyadsense = true;
  }
}, true);

     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-1012461088863319",
          enable_page_level_ads: true
     });
//]]>
</script>
</b:if>

Tempelkan kode di bawah <body> atau di bawah atas </body> kemudian klick Simpan Tema untuk menerapkan, untuk lebih jelasnya perhatikan screenshot berikut ini:

Yang kedua Memasang Script Lazy Load Gambar suport Halaman https://

Script ini berfungsi untuk mencegah gambar-gambar yang ada di dalam konten ditampilkan secara bersamaan dalam periode satu waktu seperti cara kerja Lazy Load AdSense.

Salin kode Script Lazy Load gambar berikut ini:

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

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].removeAttribute("src"),imgEl[i].className+=" lazyload");

//]]>
</script>

Tempelkan kode di bawah atas <body> atau di bawah atas </body> kemudian klick Simpan Tema untuk menerapkan, untuk lebih jelasnya perhatikan screenshot berikut ini:

Sampai disini Anda sudah berhasil memasang dan menerapkan kode Lazy Load Gambar dan Iklan Google AdSense untuk mempercepat load halaman konten serta meningkatkan kecepatan load blog. Untuk melihat hasil atau perbedaan sebelum dan sesudah menerapkan metode ini lakukan check kecepatan load halaman blog melalui website checker page speed online. Want to subscribe to the Latest Post Update Notification? Please Join with Us Berbagi Tutorial Online WhatsApp Grup or Blogger SEO Knowledge On Google News