How to Lazy-Load external scripts for better page speed?
Join Elixir newsletter
Subscribe to receive Elixir news to your inbox every two weeks.
Expand your skills
Download free e-books, watch expert tech talks, and explore open-source projects. Everything you need to grow as a developer - completely free.
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.
Work with a team that keeps learning and building better software every day.
Related posts
Dive deeper into this topic with these related posts
You might also like
Discover more content from this category
The macro mechanism in Elixir is not only an interesting metaprogramming feature - in fact, it is at the language's very core. And the more awesome fact is that, using macros, you can override the algorithm of defining functions itself!
If you ever had to count occurrences of values in Elixir's list, this short post might be helpful for you!
Hey! Have you ever wondered about tests running inside the IEx shell? For a long time, I was convinced that it’s not really possible. And as it turns out - that’s not really straightforward. You won’t easily find information about that in the documentation.