{"id":31915,"date":"2025-06-13T10:19:23","date_gmt":"2025-06-13T15:19:23","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=31915"},"modified":"2025-06-27T14:05:38","modified_gmt":"2025-06-27T19:05:38","slug":"boost-next-js-performance-by-offloading-third-party-scripts-with-partytown","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/","title":{"rendered":"Boost Next.js Performance by Offloading Third-Party Scripts with PartyTown \ud83c\udf89"},"content":{"rendered":"\n<p>I spent a number of years working in the WordPress agency space, and during that time, we frequently received requests from clients asking us to improve their website performance. They would run Lighthouse audits and come to us concerned that their sites weren&#8217;t meeting the performance standards they wanted.<\/p>\n\n\n\n<p>We\u2019d dive into their custom codebase and find optimizations, but often, the biggest culprits weren\u2019t their code\u2014they were third-party scripts like Google Analytics, Google Tag Manager, Intercom chat widgets, advertising networks, and so on. We\u2019d report our findings and hear, \u201cOh, well, we have to have those\u2026but can\u2019t we make it faster anyway?\u201d<\/p>\n\n\n\n<p>That tension\u2014between essential third-party functionality and website speed\u2014is a challenge many web developers face. Fortunately, there\u2019s a compelling solution that helps strike a balance: <strong><a href=\"https:\/\/partytown.qwik.dev\/\">Partytown<\/a><\/strong>.<\/p>\n\n\n\n<p>This article will cover:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The performance issues that can be caused by third-party scripts<\/li>\n\n\n\n<li>What PartyTown is and how it can alleviate those issues<\/li>\n\n\n\n<li>An example Next.js application to demonstrate the impact PartyTown can have<\/li>\n\n\n\n<li>How you can implement PartyTown in your own Next.js app<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>A video version of this content is also available here:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Boost Next.js Performance by Offloading Third-Party Scripts with PartyTown \ud83c\udf89\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/MW1KgUi9k5w?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<p>To benefit from this article, you should be familiar with the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JavaScript fundamentals<\/li>\n\n\n\n<li>The basics of how web browsers load and execute scripts<\/li>\n\n\n\n<li>Tools like <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/\">Lighthouse<\/a> for performance auditing<\/li>\n\n\n\n<li>The structure of a Next.js project (specifically using the <a href=\"https:\/\/nextjs.org\/docs\/app\">App Router<\/a>)*<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>* Even if you\u2019re not using Next.js, you can still learn the core concept of Partytown from this article and integrate it into your preferred framework using one of Partytown\u2019s <a href=\"https:\/\/partytown.qwik.dev\/integrations\/\">Integration Guides<\/a>.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Understanding the Problem: Main Thread Overload<\/h2>\n\n\n\n<p>In modern web applications, the browser\u2019s <strong>main thread<\/strong> is where critical tasks like rendering, user interaction, and layout updates occur. But third-party scripts often hog this thread, leading to sluggish performance.<a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/performance\/mainthread-work-breakdown\/\"> Chrome\u2019s Lighthouse documentation<\/a> breaks down how script execution dominates the main thread, especially from third-party code.<\/p>\n\n\n\n<p>These scripts can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Block rendering<\/li>\n\n\n\n<li>Cause input delay<\/li>\n\n\n\n<li>Significantly impact metrics like FID (First Input Delay) and TTI (Time to Interactive)<br><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>While some optimization techniques help\u2014like adding <code>async<\/code> or <code>defer<\/code> attributes to <code>&lt;script&gt;<\/code> tags (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/script\">MDN reference<\/a>), or using tools like<a href=\"https:\/\/www.npmjs.com\/package\/@next\/third-parties\"> @next\/third-parties<\/a>\u2014they\u2019re often not enough.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Meet Partytown<\/h2>\n\n\n\n<p><a href=\"https:\/\/partytown.builder.io\/\"><strong>Partytown<\/strong><\/a> is an open-source library from Builder.io that offloads third-party scripts to a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Web_worker\"><strong>web worker<\/strong><\/a>, freeing up the main thread. This means your app\u2019s critical work (like rendering UI and responding to user input) can continue smoothly while third-party scripts run in isolation.<\/p>\n\n\n\n<p>Partytown is currently in beta and actively developed. While it doesn&#8217;t support every use case yet, it provides a powerful way to boost site performance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Why is it called &#8220;Partytown&#8221;?<\/h3>\n\n\n\n<p>The name \u201cPartytown\u201d is a playful metaphor:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <strong>main thread<\/strong> = your app\u2019s \u201cdowntown,\u201d where essential work happens.<\/li>\n\n\n\n<li><strong>Third-party scripts<\/strong> = noisy neighbors cluttering up your downtown.<br><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Partytown moves those noisy neighbors out to the suburbs\u2014a separate part of town\u2014so they can \u201cparty\u201d without disturbing downtown\u2019s flow! \ud83d\ude04 In other words, they\u2019re offloaded to a <strong>web worker<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Before You Reach for Partytown<\/h2>\n\n\n\n<p>Before integrating Partytown, consider these best practices:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add <code>async<\/code> or <code>defer<\/code> to third-party <code>&lt;script&gt;<\/code> tags so they don&#8217;t block rendering. Learn more on<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/script\"> MDN<\/a>.<\/li>\n\n\n\n<li>Use the<a href=\"https:\/\/nextjs.org\/docs\/app\/guides\/scripts\"> @next\/third-parties<\/a> package for smarter loading in Next.js projects (experimental as of this writing).<\/li>\n\n\n\n<li>Follow performance tips on<a href=\"https:\/\/web.dev\/articles\/efficiently-load-third-party-javascript\"> web.dev<\/a> to minimize script impact.<\/li>\n\n\n\n<li>Use Next.js\u2019s<a href=\"https:\/\/nextjs.org\/docs\/app\/api-reference\/components\/script\"> &lt;Script&gt; component<\/a> with a <code>strategy<\/code> prop:\n<ul class=\"wp-block-list\">\n<li><code>beforeInteractive<\/code> \u2014 for critical scripts<\/li>\n\n\n\n<li><code>afterInteractive<\/code> \u2014 for non-blocking scripts<\/li>\n\n\n\n<li><code>lazyOnload<\/code> \u2014 loads during idle time<\/li>\n\n\n\n<li><code>worker<\/code> \u2014 (experimental) loads in a worker using Partytown, but <strong>only works with Pages Router<\/strong> for now, not the App Router (<a href=\"https:\/\/nextjs.org\/docs\/app\/guides\/scripts\">Next.js script docs<\/a>).<br><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>I recommend implementing these best practices first to optimize third-party scripts, then running a Lighthouse audit to test the site\u2019s performance, paying particular attention to the &#8220;<a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/performance\/mainthread-work-breakdown\/\">Minimize main-thread work<\/a>&#8221; and &#8220;<a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/performance\/third-party-summary\/\">Reduce the impact of third-party code<\/a>&#8221; sections of the report. Then, if you find that third-party scripts are still an appreciable performance issue, consider using Partytown to offload them from the main thread to web workers.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Testing Partytown\u2019s Impact<\/h2>\n\n\n\n<p>Next, let\u2019s run a few Lighthouse performance audits on a <a href=\"http:\/\/next.js\">Next.js<\/a> project that uses several third-party scripts. We\u2019ll run one test with Partytown disabled and a second one with it enabled to measure its impact.<\/p>\n\n\n\n<p>To get started, you can clone<a href=\"https:\/\/github.com\/kellenmace\/partytown-nextjs\"> this example repository<\/a> that demonstrates Partytown in action. Once you clone it, you can run&nbsp; <code>npm install<\/code> to install its dependencies, then <code>npm run dev<\/code> to get it running locally at <a href=\"http:\/\/localhost:3000\">http:\/\/localhost:3000<\/a>.<\/p>\n\n\n\n<p>This example project loads these third-party scripts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/cdn.jsdelivr.net\/gh\/kellenmace\/partytown-nextjs\/third-party-scripts\/slow-script.js\">slow-script.js<\/a>: a generic script I wrote for testing that blocks the main thread for 300ms<\/li>\n\n\n\n<li><a href=\"https:\/\/cdn.jsdelivr.net\/gh\/kellenmace\/partytown-nextjs\/third-party-scripts\/fake-ads.js\">fake-ads.js<\/a>: a script I wrote that simulates advertisement scripts that block the thread, inject iframes, and load large images<\/li>\n\n\n\n<li>Google Tag Manager<\/li>\n\n\n\n<li>Intercom chat widget<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Test 1: Without Partytown<\/h3>\n\n\n\n<p>You can disable Partytown in the example project by commenting out the <code>&lt;Partytown debug={true} forward={[\"dataLayer.push\"]} \/&gt;<\/code> line and removing <code>type=\"text\/partytown\"<\/code> from each of the scripts in <code>src\/app\/layout.tsx<\/code>.<\/p>\n\n\n\n<p>Running a Lighthouse performance audit from the Chrome DevTools should then yield a result like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"910\" height=\"1024\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/without-partytown-910x1024.png\" alt=\"\" class=\"wp-image-31917\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/without-partytown-910x1024.png 910w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/without-partytown-267x300.png 267w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/without-partytown-768x865.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/without-partytown-1365x1536.png 1365w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/without-partytown-1819x2048.png 1819w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/without-partytown.png 1862w\" sizes=\"auto, (max-width: 910px) 100vw, 910px\" \/><\/figure>\n\n\n\n<p>Note that the overall performance score is only 70\/100, and that two of the main culprits are the \u201cMinimize main-thread work\u201d and \u201cReduce the impact of third-party code\u201d items on the list.<\/p>\n\n\n\n<p>If you open the Chrome DevTools and view the <code>Sources<\/code> tab, you can confirm that the main thread (labeled \u201ctop\u201d) is doing all the work required by the third-party scripts:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"416\" height=\"1024\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/sources-without-partytown-416x1024.png\" alt=\"\" class=\"wp-image-31916\" style=\"width:340px;height:auto\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/sources-without-partytown-416x1024.png 416w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/sources-without-partytown-122x300.png 122w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/sources-without-partytown.png 570w\" sizes=\"auto, (max-width: 416px) 100vw, 416px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Test 2: With Partytown<\/h3>\n\n\n\n<p>Now, restore the <code>&lt;Partytown debug={true} forward={[\"dataLayer.push\"]} \/&gt;<\/code> line and the <code>type=\"text\/partytown\"<\/code> prop for each of the <code>Script<\/code> components. This will enable Partytown.<\/p>\n\n\n\n<p>Run another Lighthouse performance audit to see a result like this:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"949\" height=\"1024\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/with-partytown-949x1024.png\" alt=\"\" class=\"wp-image-31918\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/with-partytown-949x1024.png 949w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/with-partytown-278x300.png 278w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/with-partytown-768x829.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/with-partytown-1423x1536.png 1423w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/with-partytown.png 1836w\" sizes=\"auto, (max-width: 949px) 100vw, 949px\" \/><\/figure>\n\n\n\n<p>Note that the performance score is now 99\/100, and that the&nbsp; \u201cMinimize main-thread work\u201d and \u201cReduce the impact of third-party code\u201d are no longer present on the list of issues. Vastly improved!<\/p>\n\n\n\n<p>If you open the Chrome DevTools and view the <code>Sources<\/code> tab, you can see that the main thread (labeled \u201ctop\u201d) is still taking care of rendering the page, but that a new \u201cPartytown \ud83c\udf89\u201d web worker has been added to the list. This \u201cPartytown \ud83c\udf89\u201d web worker is now doing the work required by the third-party scripts:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"386\" height=\"1024\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/sources-with-partytown-386x1024.png\" alt=\"\" class=\"wp-image-31919\" style=\"width:338px;height:auto\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/sources-with-partytown-386x1024.png 386w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/sources-with-partytown-113x300.png 113w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/sources-with-partytown.png 566w\" sizes=\"auto, (max-width: 386px) 100vw, 386px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">The Takeaway<\/h3>\n\n\n\n<p>Take a step back and remember that for both the \u201cWithout Partytown\u201d and \u201cWith Partytown\u201d tests we ran, the browser had to download, parse, compile, and execute <strong>exactly the same third-party JavaScript code<\/strong>. The difference is that in the first test, the browser\u2019s main thread had to do all of that work in addition to rendering the page, but in the second test, the third-party JS work was done by web workers running in a separate thread instead.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Implementing Partytown in a Next.js App Router Project<\/h2>\n\n\n\n<p>You can follow the steps below to implement Partytown in your own <a href=\"http:\/\/next.js\">Next.js<\/a> App Router projects.<\/p>\n\n\n\n<p>\u26a0\ufe0f Be aware of trade-offs when using Partytown. Some scripts may not behave identically in a web worker. Review<a href=\"https:\/\/partytown.builder.io\/trade-offs\"> Partytown\u2019s trade-offs<\/a> before deploying to production.<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Steps to Add Partytown<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Install Partytown<\/strong>:<br><\/li>\n<\/ol>\n\n\n\n<p><code>npm install @builder.io\/partytown<\/code><\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Add a command to copy Partytown scripts<\/strong><br>Add the script below to the <code>scripts<\/code> object in your <code>package.json<\/code> file, save it, then run <code>npm run partytown<\/code> to run the script and copy Partytown\u2019s scripts into your <code>public<\/code> directory.<\/li>\n<\/ol>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-string\">\"scripts\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\u00a0\u00a0<span class=\"hljs-comment\">\/\/ ...<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u00a0\u00a0<span class=\"hljs-attr\">\"partytown\"<\/span>: <span class=\"hljs-string\">\"partytown copylib public\/~partytown\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>},\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Optionally, you can also add this <code>partytown<\/code> command to the <code>dev<\/code> and\/or <code>build<\/code> scripts to copy Partytown\u2019s files whenever the development server starts or the production app is built. Example:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-string\">\"scripts\"<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\u00a0\u00a0<span class=\"hljs-comment\">\/\/ ...<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u00a0\u00a0<span class=\"hljs-attr\">\"dev\"<\/span>: <span class=\"hljs-string\">\"npm run partytown &amp;&amp; next dev --turbopack\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\u00a0\u00a0<span class=\"hljs-attr\">\"build\"<\/span>: <span class=\"hljs-string\">\"npm run partytown &amp;&amp; next build\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\u00a0\u00a0<span class=\"hljs-attr\">\"partytown\"<\/span>: <span class=\"hljs-string\">\"partytown copylib public\/~partytown\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>},\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Load Partytown in your <code>RootLayout<\/code><\/strong><\/li>\n<\/ol>\n\n\n\n<p>In <code>src\/app\/layout.tsx<\/code>, add this line to import the Partytown component:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { Partytown } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@qwik.dev\/partytown\/react\"<\/span>;\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Then render it inside the <code>&lt;head&gt;<\/code> element, like this:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u00a0 \u00a0 \/\/ ...\n<\/span><\/span><span class='shcb-loc'><span>\u00a0 \u00a0 <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Partytown<\/span> <span class=\"hljs-attr\">forward<\/span>=<span class=\"hljs-string\">{&#91;<\/span>\"<span class=\"hljs-attr\">dataLayer.push<\/span>\"]} \/&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Partytown\u2019s <a href=\"https:\/\/partytown.qwik.dev\/configuration\/\">Configuration<\/a> page lists all the options that can be passed to the Partytown component. Included among them is a <code>debug<\/code> option you can enable with <code>debug={true}<\/code> if you encounter any issues and need to debug them.<\/p>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>Add <code>type=\"text\/partytown\"<\/code> to Scripts<\/strong><\/li>\n<\/ol>\n\n\n\n<p>Pass a <code>type=\"text\/partytown\"<\/code> prop to the scripts you\u2019d like to load via Partytown. If you have a script you want to remain on the main thread instead, simply omit the <code>type=\"text\/partytown\"<\/code> prop for that script.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Script<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">  <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/...\/slow-script.js\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">  <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/partytown\"<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-tag\">\/&gt;<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>Here\u2019s what the full root layout file might look like:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> Script <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"next\/script\"<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { Partytown } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"@qwik.dev\/partytown\/react\"<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">RootLayout<\/span>(<span class=\"hljs-params\">{<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-function\"><span class=\"hljs-params\">  children,<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-function\"><span class=\"hljs-params\">}: Readonly&lt;{<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-function\"><span class=\"hljs-params\">  children: React.ReactNode;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-function\"><span class=\"hljs-params\">}&gt;<\/span>) <\/span>{\n<\/span><\/span><span class='shcb-loc'><span>  <span class=\"hljs-keyword\">return<\/span> (\n<\/span><\/span><span class='shcb-loc'><span>    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\">      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Partytown<\/span> <span class=\"hljs-attr\">forward<\/span>=<span class=\"hljs-string\">{&#91;<\/span>\"<span class=\"hljs-attr\">dataLayer.push<\/span>\"]} \/&gt;<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        {children}<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        {\/* Slow third-party script *\/}<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Script<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/cdn.jsdelivr.net\/gh\/kellenmace\/partytown-nextjs\/third-party-scripts\/slow-script.js\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">          <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\/partytown\"<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">        \/&gt;<\/span><span class=\"handlebars\"><span class=\"xml\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"handlebars\"><span class=\"xml\">      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"handlebars\"><span class=\"xml\"><span class=\"hljs-tag\">    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"handlebars\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">  );<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"handlebars\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"handlebars\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p><\/p>\n\n\n\n<p>After implementing this, open Chrome DevTools and check the <code>Sources<\/code> tab. You\u2019ll see the third-party scripts now load in a web worker (rather than under the main \u201ctop\u201d frame), confirming that Partytown is working, just as we did in our tests.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Third-party scripts are necessary, but they can be performance killers. Partytown offers a creative, effective way to keep them around without dragging down your app\u2019s speed. By offloading them to a web worker, your main thread stays responsive and users get a faster experience.<\/p>\n\n\n\n<p>As web developers, it\u2019s up to us to make smart trade-offs. And when it comes to performance vs. functionality, Partytown helps us have our cake and eat it too.<\/p>\n\n\n\n<p>To learn more, check out:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/partytown.builder.io\/\">Partytown Docs<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/partytown.qwik.dev\/nextjs\/\">Partytown + Next.js Guide<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/nextjs.org\/docs\/app\/guides\/scripts\">Next.js Scripts Guide<br><\/a><\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Happy coding, and enjoy the party (out of town)! \ud83c\udf89<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I spent a number of years working in the WordPress agency space, and during that time, we frequently received requests from clients asking us to improve their website performance. They [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-31915","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Boost Next.js Performance by Offloading Third-Party Scripts with PartyTown \ud83c\udf89 - Builders<\/title>\n<meta name=\"description\" content=\"Learn how to integrate Partytown in a Next.js project to offload third-party scripts to a web worker and improve performance.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Next.js with Partytown\" \/>\n<meta property=\"og:description\" content=\"Learn how to integrate Partytown in a Next.js project to offload third-party scripts to a web worker and improve performance.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2025-06-13T15:19:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-27T19:05:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/nextjs-partytown.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kellen Mace\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kellen Mace\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/\"},\"author\":{\"name\":\"Kellen Mace\",\"@id\":\"https:\/\/wpengine.com\/builders\/#\/schema\/person\/e6e62698d757a8421cc9723ffa8b1be3\"},\"headline\":\"Boost Next.js Performance by Offloading Third-Party Scripts with PartyTown \ud83c\udf89\",\"datePublished\":\"2025-06-13T15:19:23+00:00\",\"dateModified\":\"2025-06-27T19:05:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/\"},\"wordCount\":1478,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/wpengine.com\/builders\/#organization\"},\"image\":{\"@id\":\"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/without-partytown-910x1024.png\",\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/\",\"url\":\"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/\",\"name\":\"Boost Next.js Performance by Offloading Third-Party Scripts with PartyTown \ud83c\udf89 - Builders\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/builders\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/without-partytown-910x1024.png\",\"datePublished\":\"2025-06-13T15:19:23+00:00\",\"dateModified\":\"2025-06-27T19:05:38+00:00\",\"description\":\"Learn how to integrate Partytown in a Next.js project to offload third-party scripts to a web worker and improve performance.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/#primaryimage\",\"url\":\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/without-partytown.png\",\"contentUrl\":\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/without-partytown.png\",\"width\":1862,\"height\":2096},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/builders\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Boost Next.js Performance by Offloading Third-Party Scripts with PartyTown \ud83c\udf89\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/builders\/#website\",\"url\":\"https:\/\/wpengine.com\/builders\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\/\/wpengine.com\/builders\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/builders\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/wpengine.com\/builders\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\/\/wpengine.com\/builders\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/wpebuilders\",\"https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/builders\/#\/schema\/person\/e6e62698d757a8421cc9723ffa8b1be3\",\"name\":\"Kellen Mace\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/builders\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/00afaa4d1d51e8714e55d744cdf68de3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/00afaa4d1d51e8714e55d744cdf68de3?s=96&d=mm&r=g\",\"caption\":\"Kellen Mace\"},\"description\":\"Kellen Mace is the Manager of the Developer Relations team at WP Engine. He likes building modern web apps with SvelteKit, TypeScript, Tailwind, and AI tools.\",\"url\":\"https:\/\/wpengine.com\/builders\/author\/kellen-macewpengine-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Boost Next.js Performance by Offloading Third-Party Scripts with PartyTown \ud83c\udf89 - Builders","description":"Learn how to integrate Partytown in a Next.js project to offload third-party scripts to a web worker and improve performance.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/","og_locale":"en_US","og_type":"article","og_title":"Next.js with Partytown","og_description":"Learn how to integrate Partytown in a Next.js project to offload third-party scripts to a web worker and improve performance.","og_url":"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/","og_site_name":"Builders","article_published_time":"2025-06-13T15:19:23+00:00","article_modified_time":"2025-06-27T19:05:38+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/nextjs-partytown.png","type":"image\/png"}],"author":"Kellen Mace","twitter_card":"summary_large_image","twitter_creator":"@wpebuilders","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Kellen Mace","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/"},"author":{"name":"Kellen Mace","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/e6e62698d757a8421cc9723ffa8b1be3"},"headline":"Boost Next.js Performance by Offloading Third-Party Scripts with PartyTown \ud83c\udf89","datePublished":"2025-06-13T15:19:23+00:00","dateModified":"2025-06-27T19:05:38+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/"},"wordCount":1478,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"image":{"@id":"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/without-partytown-910x1024.png","articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/","url":"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/","name":"Boost Next.js Performance by Offloading Third-Party Scripts with PartyTown \ud83c\udf89 - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/#primaryimage"},"image":{"@id":"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/without-partytown-910x1024.png","datePublished":"2025-06-13T15:19:23+00:00","dateModified":"2025-06-27T19:05:38+00:00","description":"Learn how to integrate Partytown in a Next.js project to offload third-party scripts to a web worker and improve performance.","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/#primaryimage","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/without-partytown.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2025\/06\/without-partytown.png","width":1862,"height":2096},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/boost-next-js-performance-by-offloading-third-party-scripts-with-partytown\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"Boost Next.js Performance by Offloading Third-Party Scripts with PartyTown \ud83c\udf89"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/e6e62698d757a8421cc9723ffa8b1be3","name":"Kellen Mace","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/00afaa4d1d51e8714e55d744cdf68de3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/00afaa4d1d51e8714e55d744cdf68de3?s=96&d=mm&r=g","caption":"Kellen Mace"},"description":"Kellen Mace is the Manager of the Developer Relations team at WP Engine. He likes building modern web apps with SvelteKit, TypeScript, Tailwind, and AI tools.","url":"https:\/\/wpengine.com\/builders\/author\/kellen-macewpengine-com\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/31915","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=31915"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/31915\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=31915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=31915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=31915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}