Home
Blogger

How to increase Blogger website speed to 90+ using defer.js

Hello everyone, welcome to Shiva Technic World, You may be facing fewer page speed issue cause of large-size JS, jQuery,  AdSense, or any other third-party scripts, So we find a solution for it with a JS that can fix these problems.

For this, we are going to use @shinsenter defer.js, using it we can easily improve speed, It defers third-party JS including jQuery, image, and AdSense, And it also works with third-party CSS too.

So without wasting much time let's check how to improve Blogger website speed!

How to increase Blogger website speed to 90+ using defer.js

We do not test on every theme but it worked on Median UI v1.6, iMagz v1.25, and Fletro v6.1!


  • First, go to your Blogger dashboard
  • Then click on the Theme option
  • Then click on the drop-down icon near Customize option
  • Then click on the Edit HTML option
  • Then find </head> and paste the following defer.js above it


    • <script>/*<![CDATA[*/ /*!@shinsenter/defer.js@3.1.0*/
    !(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>


    How to use it?


    You can use it by adding type='deferjs' in the third-party script or image, an example is given below

    Before


    <script src='/externalscript.min.js'/>

    After


    <script src='/externalscript.min.js' type='deferjs'/>

    For the latest JagoDesain theme users


    This script is already there in JagoDesain themes like iMagz, Median UI, and Fletro you need to replace that defer.js script with this one, you can find it by searching defer.js in HTML

    Extra AdSense users' tip


    When you place an ad code from the AdSense website remove <script>.....</script> tag from the code, it will help to improve the speed
    Watch tutorial

    Conclusion


    Hope this How to increase Blogger website speed to 90+ using defer.js tutorial will be useful to you, if you have any doubts related to this tutorial ask me in the comments, and do share with your friends, Thanks for visiting, and have a nice day!