How i Tackle UI Performance Issue with Partytown

Quick overview about partytown on my previous project

Uqie Rachmadie

Uqie Rachmadie

· 11 min read

How i Tackle UI Performance Issue with Partytown

What if you’ve already optimized your UI framework as much as you can, but the page is still slow?

The discovery

One day, my colleague made a discovery on our project.

The UI itself was already pretty well optimized. We had already done quite a lot on that side, and honestly, there wasn’t much more I could squeeze out from the framework.

So I started looking somewhere else.

Then I checked the third party scripts.

And that’s where things got interesting.

The problem

The Total Blocking Time was around 12.26 seconds.

There were quite a few third party scripts running on the page. Google Ad Manager was one of them, along with a couple of other scripts for analytics, tracking, and some other stuff.

I also found a bug in one of the existing scripts that made things even worse. It was doing more work on the main thread than it actually needed to.

So at that point, optimizing the UI wasn’t really the main problem anymore.

The browser was spending a lot of time just dealing with 3rd party JavaScript.

The idea: Partytown

That’s when I started looking into Partytown.

The idea is pretty simple.

Instead of having third party scripts do all their work directly on the main thread, Partytown lets them run inside a Web Worker.

This means the main thread has more room to do the things that actually matter for the user, like rendering the UI, running our application code, and handling interactions.

The result

I tried it on the project, and tbh the result was pretty noticeable.

Before Partytown:

TBT: ~12.26s

After Partytown:

TBT: ~3.12s

That’s roughly a 75% reduction in Total Blocking Time.

The takeaway

But the interesting part for us wasn’t really just the number.

It was the fact that we were spending a lot of time trying to optimize the code we owned, while a big part of the problem was coming from code we didn’t even own.

Third party scripts are pretty easy to forget.

  • You add analytics.
  • Then some ads.
  • Then tracking.
  • Then maybe a chat widget.
  • Then another tool for experiments.

Each one doesn’t look like a huge problem by itself, but eventually they can pile up and start taking a pretty big chunk of the main thread.

That doesn’t mean Partytown is some kind of magic performance button. It isn’t.

There are trade-offs, and not every third party script will work perfectly with it. Some scripts need extra configuration, and moving things through a web worker also comes with its own overhead.

But if your UI is already in a pretty good place and the page is still spending a crazy amount of time on the main thread, I’d definitely check the third party scripts before rewriting the whole thing.

Sometimes the thing slowing down your page isn’t your UI.

It’s the stuff you added to it.

Hashtags

hashtag#softwareengineering

hashtag#partytown

hashtag#systemanalysis

hashtag#frontend

Uqie Rachmadie

Uqie Rachmadie

Software Engineer & Tech Writer. Exploring system design, AI, and modern web engineering.