In some situations, you may experience slow loading speeds of a calculator when embedded on a website. The goal of this article is to explain why this is and how to get around this.
Although ConvertCalculator's script is not super tiny, we optimized its size quite a bit and we follow best practices to make the calculator load as fast as possible. We've also reduced friction from server load times as much as possible to reduce loading times.
Despite all of this, it sometimes feels a calculator can load pretty slowly when embedded on a website. There is one simple reason this happens and it's got to do with the way a browser loads a page. Basically, the following happens:
- A request is made when a link is clicked or URL is entered in the address bar.
- The page and its resources (files) are downloaded.
- The web browser uses the page resources to build the page.
- The page then is rendered (displayed) to the user.
- ConvertCalculator's embed script is loaded
- The calculator is rendered to the user
You can find more information about how a page is loaded here.
We designed our widget in such a way that it only starts loading after step 4, so after the page is rendered to the user. We do this because otherwise, it takes longer to load a page, which is not desirable most times. The consequence is that if it takes a long to perform steps 1 to 4, it takes an even longer time to perform 5 and 6; to render the calculator to the user.
So in other words, the root cause a calculator loads slowly is because the page loads slowly. So fixing overall page speed is super important. Not only for a snappy calculator but also for general user experience.
The first thing you should do is to instruct the browser to load the calculator embed script before the page is loaded by adding a preload link.
Make sure you add the following code inside the
markup><head></head> of your page: