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.
Why does my calculator load slowly?
Although ConvertCalculator's script is not super tiny, we optimized it's 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 a browser loads a page. Basically, the following happens:
- A request is made when a link is clicked or URL is entered in 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 to perform step 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,
Solutions for improving loading speed of a calculator
Improve page load speed with preload
The first thing you should to is 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
<head></head> of your page:
<link rel="preload" href="https://app.convertcalculator.co/embed.js" as="script" />
Currently only Microsoft Edge and Chrome support preloading, but Firefox and Safari will probably follow suit soon.
Optimize website loading times
What you can do to improve the loading performance of your website depends greatly on what website builder or CMS you are using. Wix, Weebly, Shopify, Squarespace, Webflow and Carrd, will give you a very good loading performance out of the box and if you don't run a custom template on it you can skip most of these best considerations as they are likely implemented already. When you run Drupal, WordPress, CraftCMS, ExpressionEngine, Magento, or another CMS these considerations are for you!
- Reduce page weight
- Use a Content Delivery Network (CDN) like CloudFlare
- Use a Cache Layer (e.g. WP Super Cache on WordPress)
- Disable unnecessary plugins
- Use lazy loading for images (e.g. LazyLoad on Wordpress)
These considerations are not that specific since they are implemented differently on every CMS. It's best to consult your webdesigner to implement these considerations. We've listed some guides for the most popular CMS's: