Magistic - Creative & Minimal Blogger Template

Hello everyone, Welcome here, Website speed is a required thing to improve user. experience. Increasing your website speed it helps users to visit your website even with low-speed internet connection. By increasing your website, your pages load faster. You might be finding a solution to improve your website speed then this tutorial is for you. In this tutorial, we are going to show you How to improve your website speed using defer.js. So without wasting much time let's check how to do it.

How to Improve your website speed to 90+ using defer.js in Blogger?

Before following these steps we recommend you take a backup of your Blogger template, By chance if any mistakes have been done we can undo changes using that backup.

• First of all, go to your Blogger dashboard
• Then click on the Theme option from the sidebar
• Then click on the drop-down icon near Customize option
• Then click on the Edit HTML option from the drop-down menu
• Then find </body> and paste the following JS just above it

<script>/*<![CDATA[*/ /*!@shinsenter/defer.js */
!(function(t){var n,u="Defer",i=t.document,o=t.setTimeout,f=t.IntersectionObserver,r=/p/.test(i.readyState),c=[],s=[],a=c.slice,d="load",e="pageshow",l="on"+e in t?e:d,m=["mousemove","keydown","touchstart","wheel"],h="forEach",v="setAttribute",y="shift";function p(e,t,n){r?o(e,t):(void 0===n&&p.lazy||n?s:c).push(e,t)}function g(e){i.head.appendChild(e)}function b(e,t){a.call(e.attributes)[h](t)}function E(e,t,n,o){return o=(t?i.getElementById(t):o)||i.createElement(e),n&&(o.onload=n),t&&(o.id=t),o}function I(e,t){return a.call((t||i).querySelectorAll(e))}function w(n,e){I("source,img",n)[h](w),b(n,function(e,t){(t=/^data-(.+)/.exec(e.name))&&n[v](t[1],e.value)}),"string"==typeof e&&(n.className+=" "+e),d in n&&n[d]()}function N(e,t,n){p(function(o){o=I(e||"[type=deferjs]"),(function e(t,n){(t=o[y]())&&(t.parentNode.removeChild(t),n=E(t.nodeName),b(t,function(e){"type"!=e.name&&n[v](e.name,e.value)}),n.text=t.text,n.src&&!n.getAttribute("async")?(n.onload=n.onerror=e,g(n)):(g(n),e()))})()},t,n)}function j(e){t.addEventListener(e,n)}function x(e){t.removeEventListener(e,n)}p.all=N,p.dom=function(e,t,i,r,c){p(function(n){function o(e){r&&!1===r(e)||w(e,i)}n=!!f&&new f(function(e){e[h](function(e,t){e.isIntersecting&&(n.unobserve(t=e.target),o(t))})},c),I(e||"[data-src]")[h](function(e){e.setAttribute('lazied',''),e[u]!=p&&(e[u]=p,n?n.observe(e):o(e))})},t,!1)},p.css=function(t,n,e,o,i){p(function(e){(e=E("LINK",n,o)).rel="stylesheet",e.href=t,g(e)},e,i)},p.js=function(t,n,e,o,i){p(function(e){(e=E("SCRIPT",n,o)).src=t,g(e)},e,i)},p.reveal=w,t[u]=p,n=function(e,t){for(t=l==e.type?(x(l),N(),r=p,m[h](j),c):(m[h](x),s);t[0];)o(t[y](),t[y]())},r||j(l)})(this),(function(e,t){t=e.defer=e.Defer,e.deferimg=e.deferiframe=t.dom,e.deferstyle=t.css,e.deferscript=t.js})(this); Defer.lazy = true;/*]]>*/</script>

Then click on the save icon to Save the HTML.

How to Improve your website speed to 90+ using defer.js?

• First of all, open your index.html file
• Then find </body> and paste the following JS just above it

<script>/*<![CDATA[*/ /*!@shinsenter/defer.js */
!(function(t){var n,u="Defer",i=t.document,o=t.setTimeout,f=t.IntersectionObserver,r=/p/.test(i.readyState),c=[],s=[],a=c.slice,d="load",e="pageshow",l="on"+e in t?e:d,m=["mousemove","keydown","touchstart","wheel"],h="forEach",v="setAttribute",y="shift";function p(e,t,n){r?o(e,t):(void 0===n&&p.lazy||n?s:c).push(e,t)}function g(e){i.head.appendChild(e)}function b(e,t){a.call(e.attributes)[h](t)}function E(e,t,n,o){return o=(t?i.getElementById(t):o)||i.createElement(e),n&&(o.onload=n),t&&(o.id=t),o}function I(e,t){return a.call((t||i).querySelectorAll(e))}function w(n,e){I("source,img",n)[h](w),b(n,function(e,t){(t=/^data-(.+)/.exec(e.name))&&n[v](t[1],e.value)}),"string"==typeof e&&(n.className+=" "+e),d in n&&n[d]()}function N(e,t,n){p(function(o){o=I(e||"[type=deferjs]"),(function e(t,n){(t=o[y]())&&(t.parentNode.removeChild(t),n=E(t.nodeName),b(t,function(e){"type"!=e.name&&n[v](e.name,e.value)}),n.text=t.text,n.src&&!n.getAttribute("async")?(n.onload=n.onerror=e,g(n)):(g(n),e()))})()},t,n)}function j(e){t.addEventListener(e,n)}function x(e){t.removeEventListener(e,n)}p.all=N,p.dom=function(e,t,i,r,c){p(function(n){function o(e){r&&!1===r(e)||w(e,i)}n=!!f&&new f(function(e){e[h](function(e,t){e.isIntersecting&&(n.unobserve(t=e.target),o(t))})},c),I(e||"[data-src]")[h](function(e){e.setAttribute('lazied',''),e[u]!=p&&(e[u]=p,n?n.observe(e):o(e))})},t,!1)},p.css=function(t,n,e,o,i){p(function(e){(e=E("LINK",n,o)).rel="stylesheet",e.href=t,g(e)},e,i)},p.js=function(t,n,e,o,i){p(function(e){(e=E("SCRIPT",n,o)).src=t,g(e)},e,i)},p.reveal=w,t[u]=p,n=function(e,t){for(t=l==e.type?(x(l),N(),r=p,m[h](j),c):(m[h](x),s);t[0];)o(t[y](),t[y]())},r||j(l)})(this),(function(e,t){t=e.defer=e.Defer,e.deferimg=e.deferiframe=t.dom,e.deferstyle=t.css,e.deferscript=t.js})(this); Defer.lazy = true;/*]]>*/</script>

• Then Save the file.

How to lazyload JS and CSS using defer.js?

For lazyload JS and CSS you need to add a simple thing to it. You need to just add type="deferjs"

The example is given below:-

<script type="deferjs">

You can follow the same steps for link, and style tags also.

Conclusion

Hope this tutorial will help you to improve your website speed. If it is useful to you, please share it with your friends, If you have any doubts related to this tutorial ask me. Comment. Thanks for visiting, Hava a nice day!