We’re often asked by our clients if our Enterprise Highlighting service will slow down the loading time of their website. This is a question of great importance and we encourage more website owners to spend more time optimizing their website, thus giving their users a better experience when visiting the website. In this post, I’m going to explain why Enterprise Highlighting only has a minimal impact on the loading time.

What is website loading time?

First, we have to agree on what “loading time” means. The loading time can be described in two ways:

  • The time it takes until everything on the webpage is loaded.
  • The time it takes before a user can see and interact with the content of the webpage.

I believe the most important one is the time it takes before users can see and interact with the content of the website because this is the loading time that users experience even if everything is not loaded at that point. That’s also the loading time that we’ll be focusing on in this blog post. There are several aspects that could affect the loading time on a website:

  • The size of the files that are loaded (CSS files, JavaScripts, images, etc.) and the amount of HTML code.
  • The code that has to be executed (only relevant for JavaScripts).
  • If the file is loaded asynchronously or if the browser has to finish loading the file before continuing with the next item.
  • Response time (how long it takes before a server responds on a request).
  • Server bandwidth (with what speed a server can send a file to the user).
  • User bandwidth (with what speed a user can receive files from the server).

I’m going to cover the first three aspects of loading time, but it’s important to take the other aspects into consideration as well.

How is loading time affected by adding ReadSpeaker Enterprise Highlighting?

Traditionally, many website owners look at the size of the files (CSS files, JavaScripts, images, etc.) to be loaded and the time it takes to load them. However, it’s very important to also consider that a browser has to stop and execute a JavaScript before it moves on to the next file. When implementing Enterprise Highlighting, a JavaScript is added to the HTML code of the website. The script is called ReadSpeaker.js and it loads together with the rest of the page content. The size of this script is only 10 kB. We can compare that size to the logo of a website that is considered minimalistic and fast, namely google.com, where the size of the logo is around 19 kB (almost twice the size as our script). Once the main JavaScript (ReadSpeaker.js) is loaded, the other necessary JavaScript components will be loaded at the same time as the rest of the page content. This method is called asynchronous loading and it’s the same method that newer implementations of Google Analytics use to speed up the time it takes before a user can see and interact with the page content. Find out more about the difference between asynchronous and synchronous loading in the section below. Once all JavaScript components are loaded, the service is ready to be used. This can happen before the rest of the page has finished loading or after the rest of the page has finished loading since it’s not dependent on when other content on the page is loaded. If a click on the Listen button occurs before all components are ready, the service will hold the click until all components are ready and then start the player. The components are usually ready before the page content since it only takes a few seconds for them to load and execute.

Synchronous vs. Asynchronous loading

Asynchronous loading is much faster than synchronous loading because browsers don’t have to stop and execute each individual JavaScript when loading the page content. When using asynchronous loading the browser will load and execute scripts in the background and continue loading the rest of the page content at the same time. Synchronous loading, on the other hand, means that JavaScripts load together with other content in a queue like fashion, thus adding to the loading time. The JavaScripts have to be executed along the way, which is why we don’t use synchronous loading for our JavaScript components. sync-vs-async

Conclusion

Thanks to the method that we use for loading the script components (asynchronous loading), the loading time of a website is barely affected. The difference in loading time with our service on the page compared to not having our service on the page is minimal since the only script that really affects the loading time is the 10 kB main script. Yes, we still use bandwidth when loading our scripts and it could also affect the loading time of a page. However the effect of asynchronous loading would be so small that it’s hard to measure unless a user has a really low bandwidth. [speech-enabling_websites]