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
<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.
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 web designer to implement these considerations. We've listed some guides for the most popular CMS's: