Reducing the performance impact of third-party scripts by using PartyTown 🎉

Published in

Trendyol Tech

5 min readDec 5, 2023

Trendyol is the most visited e-commerce website in Türkiye. Our website experiences high traffic. We are currently grappling with performance issues as our primary concern. Unfortunately, Our mobile website performance score was very low.

our initial performance score before any improvements

We’ve tried to increase our page’s performance related to JavaScript by using some way. Some of them were optimizing script load sequence, bundle splitting, importing scripts on interaction, etc.

After all this optimization we were still not where we wanted to be. Because third-party scrips affect our page load performance extremely, as you know, third-party scripts like marketing, tag manager, advertising, analytics scripts, etc. can provide extra functionality and can badly affect performance, security, and page behavior.

This was our main problem

We needed to do something else to reduce third-party scripts' performance impact on our mobile website.

And We met with PartyTown 🎉

What is 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.

Their philosophy is that the main thread should be dedicated to your code, and any scripts that are not required by the critical path can be sandboxed and isolated to a web worker. Partytown allows you to configure access to the main thread APIs such as cookies, localStorage, userAgent, etc. API calls may also be logged with arguments to better understand what the scripts do.

JavaScript proxies and a service worker handle communication between the web worker and the main thread.

How can you use

Install the NPM package via npm install @builder.io/partytown

Each third-party script that can execute in a web server should set the type attribute of its opening script tag to text/partytown as follows.

<script type="text/partytown">
    // load third-party analytics scripts
    // This script works on web worker, not the main thread
</script>OR<script type="text/partytown"src="analytics.js"></script>

Afterward, the partytown configuration must be added within the head tag or externally as shown below.

// Recommended
<head>
  <script>
    /* Inlined Partytown Snippet */
  </script>
</head>OR<head>
  <script type="text/partytown" src="/partytown.js"></script>
</head>

Configuration

Simple configuration can be like that. See the configuration docs for your needs.

<script>
    partytown = {
      debug: false,
      lib: "/partytown/",
      swPath: "partytown-sw.js",
      forward: ["dataLayer.push", "fbq"],
      resolveUrl: function (url, location, type) {
         if (type === 'script') {
           var proxyUrl = new URL('https://my-reverse-proxy.com/');
           proxyUrl.searchParams.append('url', url.href);
           return proxyUrl;
         }
         return url;
      }
    };
</script>

And then you should serve javascript assets of Partytown like below.

@builder.io/partytown/lib/
├── partytown-atomics.js
├── partytown-media.js
├── partytown-sw.js
└── partytown.js// Debugging purpose
@builder.io/partytown/lib/debug/
├── partytown-atomics.js
├── partytown-media.js
├── partytown-sandbox-sw.js
├── partytown-sw.js
├── partytown-ww-atomics.js
├── partytown-ww-sw.js
└── partytown.js

Note that Partytown scripts must be self-hosted on the same server as the HTML documents. Since Partytown is using a service worker, these files must be served from the same origin as your site, and cannot be hosted from a CDN.

Results

We used Partytown on our mobile-web specific pages and you can see how it affects the overall performance as follows.

You can see in the images below how the metrics improved after the effect of 3rd party scripts blocking the main thread decreased.

Browser Support

Partytown works to ensure that all browsers can still run third-party scripts, whether they have support for service workers, atomics, or neither. This means if you’re supporting legacy browsers such as IE11, the scripts should continue to work as if Partytown wasn’t being used.

At its core, Partytown uses Service Workers or Atomics to do its synchronous communication from the web worker to the main thread. However, when a browser does not support either of those, it’ll fall back to running the scripts the traditional way (the way it works today without Partytown).

Conclusion

Partytown is still in beta and not useful for all scripts furthermore if you want to implement it make sure your user's browser compatibility requirements. As a fallback, you can initiate your third-party scripts for legacy browsers. Partytown brings a new and smart approach to the web development ecosystem. It will be more stable and a standard with the growing community and the next releases.

Also, we strongly recommend to read this document. If you’ve optimized everything and you are still looking to use Partytown, you should read FAQ and trade-offs pages as well before using Patytown.

We are happy with the result; it was a great journey to implement it from POC to production. We have been using it since last year and we didn’t face any issues. If you like to try new approaches like Partytown and want to make the web fast you can contact us with our career page. 👩‍💻

Thanks for your reading! Feel free to give us feedback 🚀

https://giphy.com