Improving the Performance of Nuxt Apps with PartyTown

PartyTown is a JavaScript library that helps move resource intensive scripts (often third-party scripts) into and out of the main thread to a web worker. It speeds up our site by freeing up the main thread to run our code.

Web workers are a simple means of running scripts for web content in background threads. The worker thread can perform tasks without interfering with the user interface. In addition, they can perform I/O using XMLHttpRequest (although the responseXML and channel attributes are always null) or Fetch (without such restrictions). Once created, a worker can send a message to the JavaScript code that created it by posting the message to the event handler specified by that code (and vice versa).

If you want to know more about Web Workers, visit here

The main thread is where a browser processes user events and paints. By default, the browser uses a single thread to run all the JavaScript in your page, as well as to perform layout, reflow, and garbage collection. This means that long-running JavaScript functions can block threads, leading to an unresponsive page and poor user experience.

main thread

If you want to know more about the main thread, see here

PartyTown doesn’t come bundled with the rest of the JavaScript on your site. Instead, it is intentionally kept separate from your code so that it can run within a webworker.

Commendable – our third party code to customize

Admirable is lightweight and open source web analytics. No cookies and fully compliant with GDPR, CCPA and PECR. Built and hosted in the EU, powered by a European-owned cloud infrastructure

commendable

After registering and providing your domain you will get a script code like the one below:

<script defer data-domain="nuxt-partytown.vercel.app" src="https://plausible.io/js/plausible.js"></script>
enter fullscreen mode

exit fullscreen mode

In the next section we will adapt this script using PartyTown.

code

At any time, if you’ll feel lost, check out the GitHub repository I’ve prepared for you https://github.com/Baroshem/nuxt-partytown.

I ended up building a plain Nuxt 3 project that should look more or less like this:

next 3 projects

I will add the plausible script to the global head Tags of our app:

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    app: {
        head: {
            script: [
                {
                    defer: true,
                    src: 'https://plausible.io/js/plausible.js',
                    'data-domain': 'nuxt-partytown.vercel.app'
                }
            ]
        }
    }
})
enter fullscreen mode

exit fullscreen mode

And deploy our app to Versailles.

If we did all the steps correctly, we should see the same result in browser dev tools:

compatible in browser

Now, we will deliver the script to the web worker using PartyTown. To make it work we will be using the official NeXT module for integration with Partytown developed by Daniel Roe (congratulations sir for the wonderful work!)

To move our fan script to the web worker we will need to add some configuration to our nuxt.config.ts file:

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: ["@nuxtjs/partytown"],
  partytown: {
    forward: ["$plausible", "$plausible.push"],
  },
  app: {
    head: {
      script: [
        { children: "window.$plausible = [];" },
        // Update this
        {
          src: "https://plausible.io/js/script.js",
          defer: true,
          type: "text/partytown",
          "data-domain": "nuxt-partytown.vercel.app",
        },
      ],
    },
  },
});
enter fullscreen mode

exit fullscreen mode

When we check the browser of both our Nuxt app and Placeable Analytics, we can see that we’re getting live data while our fanciful script is moved from the main thread to the web worker.

Fantastic and Partytown in Naxté

Also, when we compare our Network tabs in both cases, we’ll also be able to see the result of moving the appreciable script to the web worker (the first tab is using PartyTown, while the second isn’t):

Network tab with and without PartyTown

This approach works for many other third party scripts that you can check out here.

summary

Great! You just adapted your third party scripts to make the Nuxt app more performant.

Resource

Leave a Comment