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
    Szymon Soppa Web Developer
    Szymon Soppa Curiosum Founder & CEO

    Read more
    on #curiosum blog

    7 Reasons Why You Might Need a Custom Marketing Tool

    Managing a marketing agency or introducing a company to digital transformation in the area of marketing, requires an extraordinary focus on the tools that you should use. Usually, they facilitate the work of marketers and allow you to achieve the expected results of each project and advertising campaign you are working on.

    How to upload a file in Elixir with Waffle

    The ability to upload files is a key requirement for many todays web and mobile applications. In this tutorial, we will look at how we can accomplish file uploads to local storage and S3 server in Phoenix with the help of Waffle library.