Improve load speed

Learn how to improve the load speed of your calculator

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 it.

Why does my calculator load slowly?

Although ConvertCalculator's script is not super tiny, we optimized its size quite a bit. 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:

  1. A request is made when a link is clicked or a URL is entered in the address bar.
  2. The page and its resources (files) are downloaded.
  3. The web browser uses the page resources to build the page.
  4. The page is then rendered (displayed) to the user.
  5. ConvertCalculator's embed script is loaded
  6. 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 time 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 of a calculator loading slowly is that 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 the loading speed of a calculator

Improve page load speed with preload

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 <head></head> of your page:

HTML
<link rel="preload" href="https://scripts.convertcalculator.com/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 which 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. If you don't run a custom template on it, you can skip most of these considerations as they are likely implemented already. When you run Drupal, WordPress, CraftCMS, ExpressionEngine, Magento, or another CMS these considerations are for you!

  1. Reduce page weight
  2. Use a Content Delivery Network (CDN) like CloudFlare
  3. Use a Cache Layer (e.g. WP Super Cache on WordPress)
  4. Remove unnecessary JavaScript
  5. Disable unnecessary plugins
  6. 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 web designer to implement these considerations. We've listed some guides for the most popular CMS's:

Related articles

Learn more about improve load speed in one of the following articles