Partytown - Why you should use it to speed up your website
Tue Jan 17 2023776 words
Partytown is a JavaScript library that allows you to offload scripts from the main thread to a web worker. Partytown was created to optimize the performance of the main thread by keeping it solely for website code, and any third party scripts not related to the rendering of the page are offloaded to a web worker. Partytown is maintained by Builder.io.
- Why use Partytown?
- How to install Partytown
- Updating scripts to use Partytown
- Forwarding calls to Partytown
Why use Partytown?
Most websites will have scripts related to analytics, marketing, A/B testing etc. Some of these scripts can be quite large and when combined they can lead to a large performance penalty.
Using partytown to load these scripts can lead to a serious performance boost as its essentially stops them blocking any rendering of the page by offloading them to a web worker and keeping the main thread for website code. If you want to achieve the maximum page speed score possible or you just want to generally improve the performance of a website - use partytown.
How to install Partytown
Partytown can be installed as an npm package.
npm install @builder.io/partytownThe partytown JavaScript need to be included in your pages. There are a couple of ways to do this.
Linking to the Partytown JavaScript file
Once you install partytown you can add a command to package.json to copy the partytown files into a public directory that your pages can link to. This can be automated as part of a build step using webpack etc.
"partytown": "partytown copylib public/~partytown",Link to the partytown main file as early in the head of your page as possible.
<head>
<script src="/~partytown/partytown.js"></script>
</head>Inlining the Partytown JavaScript
To save a network request you can inline the partytown JavaScript code instead of linking to it in a file. The code snippet can be imported through the package and then just needs to be inlined within a JavaScript tag in the head.
import { partytownSnippet } from '@builder.io/partytown/integration';
const partytown = partytownSnippet();<head>
<script>
{{ snippet }}
</script>
</head>Using Partytown with Vue
The inlining of the partytown JavaScript can be automated as part of a build process. The following is an example configuration in vue.config.js when using Vue & Webpack to make the snippet accessible in index.html
const { partytownSnippet } = require('@builder.io/partytown/integration');
module.exports = {
chainWebpack: (config) => {
config.plugin('html').tap((args) => {
args[0].partytown = partytownSnippet()
return args
})
}
}<head>
<script>
<%= htmlWebpackPlugin.options.partytown %>
</script>
</head>Updating scripts to use Partytown
You can offload any scripts to partytown by adding a type="text/partytown" attribute to the script tag.
<script type="text/partytown" src="/analytics.js"></script>Or you can add the attribute to inline scripts.
<script type="text/partytown">
...
</script>Forwarding calls to Partytown
Any calls to code executed in the web worker should be forwarded to the web worker. For instance if loading Google Tag Manager through partytown, calls to push to the dataLayer should be forwarded to partytown
<script>partytown = {
forward: ['dataLayer.push'],
};
</script>
<script type="text/partytown">
...tag manager snippet
</script>Fore more information about partytown and the caveats around using it see the official partytown site here:
