DEV Community

Alex Spinov
Alex Spinov

Posted on

Partytown Has a Free Web Worker Library for Third-Party Scripts — Here's How to Use It

#javascript #performance #optimization #webdev

Google Analytics, Facebook Pixel, and chat widgets block your main thread. Partytown moves them to a web worker — your site stays fast while third-party scripts run in the background.

What Is Partytown?

Partytown is a library that moves resource-heavy third-party scripts off the main thread into a web worker. Your site's interactivity isn't blocked by analytics, ads, or tracking scripts.

The Problem

Third-party scripts typically:

  • Block the main thread for 200-500ms each
  • Delay Time to Interactive (TTI) by 2-5 seconds
  • Cause layout shifts and jank
  • Account for 50-70% of JavaScript execution time

Quick Start 

npm install @builder.io/partytown
Enter fullscreen mode Exit fullscreen mode

Next.js 

// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          type="text/partytown"
          dangerouslySetInnerHTML={{
            __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', 'G-XXXXXXXXXX');
            `,
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
Enter fullscreen mode Exit fullscreen mode 
// next.config.js
const { withPartytown } = require('@builder.io/partytown/next');

module.exports = withPartytown({
  // your config
});
Enter fullscreen mode Exit fullscreen mode

Any Framework 

<script>
  // Partytown config (runs on main thread)
  partytown = { forward: ['dataLayer.push', 'fbq'] };
</script>
<script src="/~partytown/partytown.js"></script>

<!-- These run in web worker, not main thread -->
<script type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=G-XXX"></script>
<script type="text/partytown">
  fbq('init', '123456789');
  fbq('track', 'PageView');
</script>
Enter fullscreen mode Exit fullscreen mode

How It Works 

Main Thread (fast, responsive)     Web Worker (background)
┌────────────────────────┐         ┌──────────────────────┐
│ Your app code          │         │ Google Analytics      │
│ React/Vue/Svelte       │  ←───→  │ Facebook Pixel       │
│ User interactions      │  proxy  │ Chat widgets         │
│ Animations             │         │ Ad scripts           │
└────────────────────────┘         └──────────────────────┘
Enter fullscreen mode Exit fullscreen mode

Partytown uses a synchronous Proxy to forward DOM operations from the worker back to the main thread.

Performance Impact

Metric Without Partytown With Partytown
TTI 4.2s 2.1s
TBT 850ms 120ms
FID 200ms 50ms
Main thread JS 1.8MB 400KB

Supported Scripts

Works with most third-party scripts:

  • Google Analytics / Tag Manager
  • Facebook Pixel
  • Segment
  • Hotjar
  • Intercom
  • HubSpot
  • Many more

Framework Support

  • Next.js, Nuxt, Astro, Remix
  • Qwik (built-in)
  • HTML (manual setup)

Get Started

Optimizing your site's performance? My Apify scrapers are built for speed. Custom solutions: spinov001@gmail.com

Top comments (0)