Blogger, Writer, Web Developer

Module Review: Partytown

PartyTown is a lazy-loaded library to help relocate resource intensive scripts into a web worker, and off of the main thread. Its goal is to help speed up sites by dedicating the main thread to your code, and offloading third-party scripts to a web worker.

- Partytown module project page

(I'm Sorry, What Is This?)

I guess you could think of this as a new segment on my website. I'm going to do short informal reviews / overviews of Drupal modules that I've used or found useful but I don't see getting a ton of attention in the Drupal community. This is the first one!

Overview

Partytown is a module (that I happen to maintain) that provides a Drupal-native way to manage a third-party JS library by the same name.

Partytown (JS) is a tool created by Qwik that is designed to solve some of the performance issues that come with loading third-party scripts on your Drupal installation. It is platform agnostic and, thanks to this module, Drupal happens to be one of the supported ports.

What It Does

Partytown works by deferring select scripts (defined via a special MIME type) into a service worker so that they load on a parallel thread. This ensures that your first-party scripts can load on the main thread.

The Drupal module gives you a backend configuration panel that allows you to manage Partytown. You can do things like turn on debugging, identify which resources should (or should not) get included in Partytown's thread management scheme, toggle the use of Atomics, and even manage your Google Tag Manager integration using a submodule.

What It Doesn't Do

The Partytown module doesn't install the JS library for you.. You need to insert a code block in your composer.json file, or install the library by hand. If you choose a highly custom location or bundle it with your theme, you could use a setting in the backend to tell Drupal where to find and serve the library from.

Likewise, because this module is a thin wrapper for managing Partytown, you can't easily hook into Partytown's base behavior. The API defines a couple of use cases where you actually may need to consider writing some JS yourself in order to get Partytown to handle different scripts in a special way. This is especially important when you need to load a resource via a proxy.

There are a few other customizations you may need to apply by hand, like declaring storage variables that are used by your site assets (like GTM and dataLayer).

What It Does Well

Partytown is great for taking some heavy resources and loading them via parallelization. Given that Drupal doesn't always have access to these kinds of tools out of the box, this could be a great way to build a fast, efficient frontend, or improve an existing one to the point where it is even better!

The management interface has a lot of notes and links out to the documentation to help you along, which I felt was especially important because this is such a novel idea.

I think this integration works best if you're building a site from the ground up and you have the bandwidth to integrate Partytown right from the jump. Using Partytown means that you have to install and configure your assets a certain way so that they work. If you're trying to pick apart a mature frontend to integrating it with a new Parytown installation, you may be facing an uphill battle, which brings us to...

Where It Needs Work

The base library is technically still in beta, so be aware that there are some odd corner cases.

For instance, if you're migrating a fairly mature tag management strategy or frotend into Parytown, expect some breakages. Google Tag Manager, Facebook Pixel, and other analytics libraries need some extra hand holding (or a firm slap on the wrist, depending on your experience. Facebook Pixel doesn't use the right headers to allow it to be loaded on Partytown's thread without some manual intervention, for instance).

In short, third-party resources that don't like being loaded by a service worker will make that your problem.

Thankfully, the Drupal module gives you some tools for overcoming this, like the aforementioned proxying feature, and the data forwarding feature, which allows you to send data from your main thread into your Parytown thread and keep both threads in sync.

I think this is great, especially if you're relying on certain events to fire on the main thread.

Wrap Up

This is a good module for hacking your performance and clawing back some of the load time that tag managers tend to dump on users.

I think that the concept is cool, and the implementation is slick, but the JS can easily be kneecaped by one or two bad scripts that just ruin your day.

If you're clever and patient about how you build your frontend, and you avoid making extensive use of a tag manager, I think this may be just the right fit for many medium to large websites who want to improve their web vitals and load times.

Have fun, and happy Drupaling!

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang rel class> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <p class>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Webmention notify form

CAPTCHA
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Author Information

Drupal developer, blogger, NixOS package maintainer, Linux user, and experimental literature enthusiast.