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.

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.