Lazy Loading

Lazy loading refers to delaying resource downloading by browsers. That way only useful resources are downloaded and hence improving user experience.

We recommend only lazy loading images which are not in viewport and scripts which do not require initial attention.

Basic Understanding

We use Package @shinsenter/defer.js to lazy load our images, videos, iframes and scripts.

<script>/*<![CDATA[*/ 
/*@shinsenter/defer.js*/ !(function(o,u,s){function f(t,n,e){k?S(t,n):((e=e===s?f.lazy:e)?N:C).push(t,Math.max(e?350:0,n))}function i(t){j.head.appendChild(t)}function a(t,n){t.forEach(function(t){n(t)})}
function r(n,t,e,c){a(t.split(" "),function(t){(c||o)[n+"EventListener"](t,e||p)})}function l(t,n,e,c){return(c=n?j.getElementById(n):s)||(c=j.createElement(t),n&&(c.id=n)),e&&r(g,b,e,c),c}function d(t,n){a(q.call(t.attributes),
function(t){n(t.name,t.value)})}function h(t,n){return q.call((n||j).querySelectorAll(t))}function m(c,t){a(h("source,img",c),m),d(c,function(t,n,e){(e=/^data-(.+)/.exec(t))&&c[x](e[1],n)}),t&&(c.className+=" "+t),c[b]&&c[b]()}
function t(t,n,e){f(function(n){a(n=h(t||"script[type=deferjs]"),function(t,e){t.src&&(e=l(v),d(t,function(t,n){t!=A&&e[x]("src"==t?"href":t,n)}),e.rel="preload",e.as=y,i(e))}),(function c(t,e){(t=n[E]())&&(e=l(y),d(t,function(t,n){t!=A&&e[x](t,n)}),e.text=t.text,t.parentNode.replaceChild(e,t),e.src&&!e.getAttribute("async")?r(g,b+" error",c,e):c())})()},n,e)}
function p(t,n){for(n=k?(r(e,c),N):(r(e,w),k=f,N[0]&&r(g,c),C);n[0];)S(n[E](),n[E]())}var v="link",y="script",b="load",n="pageshow",g="add",e="remove",c="touchstart mousemove mousedown keydown wheel",w="on"+n in o?n:b,x="setAttribute",E="shift",A="type",I=o.IntersectionObserver,j=o.document||o,k=/p/.test(j.readyState),C=[],N=[],S=o.setTimeout,q=C.slice;f.all=t,f.dom=function(t,n,o,i,r){
f(function(e){function c(t){i&&!1===i(t)||m(t,o)}e=I?new I(function(t){a(t,function(t,n){t.isIntersecting&&(e.unobserve(n=t.target),c(n))})},r):s,a(h(t||"[data-src]"),function(t){t[u]||(t[u]=f,e?e.observe(t):c(t))})},n,!1)},f.css=function(n,e,t,c,o){f(function(t){(t=l(v,e,c)).rel="stylesheet",t.href=n,i(t)},t,o)},f.js=function(n,e,t,c,o){f(function(t){(t=l(y,e,c)).src=n,i(t)},t,o)},f.reveal=m,o[u]=f,k||r(g,w),t()})(this,"Defer"); 
/*]]>*/</script>

Lazy Loading images

Images can be lazy loaded by using class="lazy" and adding data-src attribute.

<img class='lazy' data-src='image_url.jpg' alt='Image'/>

Lazy Loading scripts

Scripts can also be lazy loaded by setting script types. Prime offers two ways to defer lazy loading of scripts --

<!-- [ This is a regular script ]-->
<script type='text/javascript'> .... </script>
 
<!-- [ This is a lazy loaded script ]-->
<script type='lazyscript'> .... </script>
 
<!-- [ This is a more lazy loaded script ]-->
<script type='more-lazyscript'> .... </script>

You can also use same method to lazy load external scripts and adsense code.

<script type="more-lazyscript" src="main.js"></script>

You can learn more on lazy loading from this github page (opens in a new tab).

Dropdown Nav Extra Settings