Speeding up website JavaScript using Partytown!

In Engineering

21 Jun 2022

4 min read

For any software especially web applications, performance is an important metric and non-functional requirement. In today’s world where our attention span is fast decreasing (studies have found that average attention span is a measly eight seconds), a delay in page load of even a few milliseconds might cause the user to get distracted and navigate away from our application to maybe our competitors’ application, thereby causing loss of traffic which directly affects revenue. Thus, having a website which has poor performance directly affects the SEO score of the website, thereby increasing the bounce rate and reducing the time a user spends on our website.

We can optimize the code written by us to improve the performance score to some extent. However, apart from our code websites usually use third-party scripts too. Third-party scripts are the code embedded in our website and not directly under our control. These third-party scripts are added to perform a specific task like gathering and analyzing data of the visitors our website receives to get useful insights, ad tracking and tracking user behaviour and interaction. We tend to use these scripts on our website as they are battle-tested to avoid re-inventing the wheel and focus efforts on creating value for our visitors.

JS in a browser is a single-threaded language, if the third-party scripts which we use are not optimized and are large, they tend to consume a large chunk of the main thread’s precious resources. These scripts cannot be optimized for speed since they are beyond our control. There are a few tricks to reduce their upfront damaging effects, like waiting until after the page load to run these scripts, regardless, they’re still running hundreds of kilobytes (and commonly, even a few megabytes) of JavaScript on the user’s main thread. This can have a grave impact on the experience for users browsing our website on low-end mobile devices having limited resources.

Partytown is a small library (around 6 Kb) aimed at freeing the main thread off resource-intensive scripts and offloading them to a web worker. Its goal is to free main thread resources so that it can dedicatedly run code related to our business logic, sandbox and isolate third-party scripts and allow or deny their access to main thread APIs.

How does it achieve this?
Partytown utilizes web workers and service workers to achieve its goals.

You can read more about Web Workers and Service Workers on MDN web docs.

TL;DR
Web workers allow running code on background threads, they can communicate asynchronously with the main thread and do not have access to DOM.

Service workers are specialized workers and they act as a proxy between the browser and network and can intercept network requests. They too can communicate asynchronously with the main thread.

Partytown run’s the third-party script inside a web worker, to run the third-party script might need access to DOM elements which are not accessible by web workers. To solve this the worker makes a synchronous XMLHTTP request for the required resources, the worker remains blocked till it receives a response. The service worker intercepts the request made by the web worker and asynchronously communicates with the main thread to get the required resources. Once it gets the data from the main thread it returns it to the web worker and the third-party scripts can then perform their required operations with this data. The main thread does not get blocked due to this and only the web worker is blocked till it gets the required resources.