How to Increase Website Speed to 90+ (2025)

Nowadays website speed is more important than ever. Slow loading websites are becoming hard to rank in popular search engines like Google and Bing because websites with low speed take time to show the content which makes visitors away and negatively impacts search engine rankings. Whether you are running a blog, an E-commerce website or a business website improving your site speed will help you increase your website's user experience.

Front-end libraries and frameworks are the main cause of several websites that reduce their website speed. Archiving 90+ speed on tools like Google PageSpeed Insights is challenging but by following this tutorial carefully you can improve your website speed. For some of you, the low speed may be caused by your hosting, If it is then sorry we can't help you we recommend you change your hosting provider or plan. Here we provide code for on-site optimization.

In this guide we will share with you the most effective way to boost your website performance and achieve a 90+ performance score. This is one of the best technique to boost your website performance. This defer.js is a modified version of the original defer.js that doesn't load JS until it detects a scroll, touch, mouse movement, resize, click, visibility change and more. Whether you are a begginer or an experienced developer, this guide will help you improve your website performance.

How to increase your website speed?

Add the following script above the </head>

<!-- @shinsenter/defer.js -->
<script>
!(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", "scroll", "keydown", "touchstart", "wheel", "resize", "click", "dblclick", "touchmove", "pointerdown", "pointerup", "visibilitychange"], 
        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>

For Blogger Users

1. First of all, go to your Blogger dashboard
2. Click on "Theme" option on the sidebar
3. Click on drop-down-arrow-icon near "Customize"
4. Click on "Edit HTML"
5. Find </head> then paste the following javascript code 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", "scroll", "keydown", "touchstart", "wheel", "resize", "click", "dblclick", "touchmove", "pointerdown", "pointerup", "visibilitychange"], 
        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>

Usage

Add type="deferjs" or type='deferjs' inside opening script, link or style tag

Example

<!-- 🌟 Inline JavaScript Usage Example -->
  <script type="deferjs">
    alert("Hello world!");
  </script>
  

  <!-- 🚀 External JavaScript Usage Example -->
  <script type="deferjs" src="/myscript.js"></script>
  

  <!-- 🎨 Internal CSS Usage Example -->
  <style type="deferjs">
body {
 background: #000;
  color: #fff;
 }
  </style>
  

  <!-- 📁 External CSS Usage Example -->
  <link type="deferjs" href="/style.css" rel="stylesheet"/>

After doing these changes save your HTML.

Conclusion

This defer.js script work on both CSS and JS. Optimizing your website to achieve a 90+ speed require modern techniques like defer.js. Improving your website performance helps you to improve the user experience and ranking of your website. If you are using Blogger or any other, consider adding type="deferjs" to enhance your website speed without breaking its functionality.

It help you to improves First Contentful Paint and Largest Contentful Paint score. This technique is especially useful for websites with heavy javascript and CSS. Nowadays website speed is a key ranking factor. We recommend you minify the defer.js script before adding it to your website. By using defer.js you can ensures a fast, efficient and user friendly website.

After following this guide carefully you get a fully optimized website using defer.js. If you have any doubt related to this guide then please feel free to comment down below. Don't forget to share with your friends who are looking for a guide to improve their website speed.

Thanks for spending time to read this article. Have a wonderful day.