How to Lazy-Load external scripts for better page speed?

Nowadays, with an ever-growing number of web services, we tend to overload Web apps with external resources. As a result, it decreases page load speed and affects SEO score. There is a pretty easy solution for that.

Table of contents

    Let's assume that you'd like to use the chatbot on your website. Fetching all resources might take in this case, for example, 2 seconds (which is not that unusual - trust me).

    Even if your website is fully optimized to load fast, users will still have to wait 2 more seconds for full interaction.

    In this case, if you don't need a chatbot to appear immediately, you can lazy-load the script:

    setTimeout(function () {
      var d = document,
        s = d.createElement("script");
      s.src = "path-to-js-script";
      d.body.appendChild(s);
    }, 5000);

    That's it. After 5 seconds, a chatbot will be fetched and attached to the body of your website.

    It's important to use a time interval that is long enough to run after the page is fully loaded. In this example, I used 5s interval, but you should use the one that match to your specific case.

    Download our ebook
    Sign to our Newsletter
    Szymon Soppa Web Developer
    Szymon Soppa Curiosum Founder & CEO

    Read more
    on #curiosum blog