Introducing Partytown. Offload third-party scripts to web workers

• What is Partytown?
• How does Partytown work?
• Advantages of Partytown
• Implementing Partytown
• Using Partytown
• Common services to use
• Alternatives

In the ever-evolving landscape of web development, performance optimization is key. One such innovative tool designed to address this is Partytown, a library aimed at relocating your resource-intensive third-party scripts to a web worker, thus improving the loading speed and overall performance of your web pages.

¶What is Partytown?

Partytown is an open-source JavaScript library that helps to offload your third-party scripts and other performance-sapping tasks from the main thread to a web worker. Created by the team at Builder.io, Partytown reduces main thread tasks, helping you to achieve a better, smoother user experience and a significant improvement in core web vitals.

¶How does Partytown work?

The essence of Partytown lies in its innovative use of web workers. In essence, it leverages web workers to handle the processing of third-party scripts. This way, the main thread, which handles user interactions and other critical tasks, is not blocked by the loading and execution of these scripts.

This approach contrasts with the traditional one where third-party scripts are loaded and executed on the main thread, often resulting in slower web pages, janky animations, and overall negative user experiences due to high CPU usage.

¶Advantages of Partytown

• Performance Enhancement: By offloading tasks to a web worker, Partytown frees up the main browser thread, leading to smoother animations and scrolling, and generally a more responsive site.
• Improved Core Web Vitals: By reducing the impact of third-party scripts, Partytown can help improve the metrics that Google uses in its ranking algorithm, like Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).
• Seamless Integration: Partytown works seamlessly with most third-party scripts and libraries, making it a versatile tool in your performance optimization toolkit.
• Increased Battery Life: By reducing unnecessary main thread work, Partytown can help users' devices consume less energy, leading to longer battery life.

¶Implementing Partytown

Using Partytown is simple. First, install the library via npm:

npm install @builder.io/partytown

Next, import and initialize Partytown in your main JS file:

import { init } from '@builder.io/partytown';

init();

Lastly, you have to include the following script in your HTML to point to the Partytown web worker:

<script async src="/path/to/partytown/partytown.js"></script>

¶Using Partytown

Now, when loading a third party add type="text/partytown" to the script tag. This tells the browser not to process it as it doesn't recognise the type, but it gives us a selector for partytown to do its thing.

<script type="text/partytown">...</script>

You can also dynamically create scripts:

const script = document.createElement('script');
script.type = 'text/partytown';
script.innerHTML = `console.log("New partytown script!")`;
document.head.appendChild(script);

window.dispatchEvent(new CustomEvent('ptupdate'));

More on this on Partytown's docs.

¶Common services to use

Partytown, in theory, works with any script tag, but there are plenty of caveats with using a service like this.

However, Partytown does maintain a list of common services which are tried-and-tested.

Just be aware that using a service like GTM with Partytown can be complex, as GTM effectively loads other third-parties, which can lead to a chaining of scripts being loaded and it not being clear which are run in the web worker.

¶Alternatives

The main alternative to Partytown is Zaraz, run by Cloudflare. Zaraz is a slightly different offering to Partytown.

Zaraz is actually a tag manager like GTM, but the tags it loads are run in web workers and benefits from being loaded from Cloudflare's edge network. We've written a fairly comprehensive guide on Zaraz vs GTM which is worth a read.