Boost Your Website’s Performance with Party town
Performance is critical for web applications. If your website is slow and unresponsive, you will lose customers — that’s a fact proven by research. Unfortunately, it’s often not your fault that your website is slow. This can happen when your boss asks you to add Google Analytics, then your second boss wants to add the Facebook pixel, and boss number three wants to add an Intercom chat widget. All these tools require JavaScript and can clog up the main thread on the initial page load.
When you run a lighthouse report, you’ll likely see a very high blocking time because all these scripts are competing to work on the main thread. The developer is usually the one who gets blamed for this poor performance, while the bosses receive nice bonuses.
There is a solution to this problem, however. The open-source library called Party Town can make everyone happy by running these scripts synchronously in a web worker. In this article, you’ll learn how to use Party Town to improve your website’s performance.
First, let’s demonstrate the problem. I have created a static HTML page with vite vanilla javascript. In the following example HTML page.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Landing Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Welcome to my landing page</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<div class="container">
<p>This is a sample landing page with a minimalist color scheme.</p>
<div class="image-container">
<img src="https://source.unsplash.com/random" alt="Random Image from Unsplash">
<p>This is a random image from Unsplash.</p>
</div>
</div>
</main>
<footer>
<p>Copyright 2023</p>
</footer>
</body>
<script>
console.log("3rd party script loading start")
let i = 999999999
while (i--) {
//mimic 3rd party script loading
}
console.log("3rd party script loading complete")
</script>
</html>I have a script in the body. Imagine this script as a third-party resource like google analytics code, facebook pixel, or any third-party scripts that we may use in our website/web apps. In the script, we have a while loop that does nothing for a while. When we run a lighthouse report, everything looks good except for this one render-blocking activity. It says we need to reduce the JavaScript execution time. This is a serious performance issue because the page content will load, but nothing is interactive. This means that if users try to click on buttons that require JavaScript, they just won’t work. It’s like a zombie website.
Party Town was developed by the same team behind the Quick framework, and they are extremely focused on performance. Party Town designates scripts that are not essential to the initial page load, such as marketing tools like Google Tag Manager and the Facebook pixel and other optional widgets, and moves them to a web worker. JavaScript is single-threaded, which means it can only do so much at one time. Web workers allow you to take non-essential tasks and run them in the background on a separate thread.
To get started with Party Town, first install the library.
npm i @builder.io/partytown
One thing to note about Party Town is that it uses a service worker, which means it can’t be hosted on an external CDN. You’ll need to copy and host its JavaScript code alongside your website.In the package.json file, create a script called “party-town” that runs the “copy-lib” command. This will copy all the necessary code into the public directory.
“partytown”: “partytown copylib public/~partytown”
Then, find any scripts that you don’t want to block the main thread and change their type to “text/party-town”.
Run yarn partytown or npm run partytown command from the terminal, and you should now see all the Party Town files in the public directory.
This is how you designate what should run in a web worker. Party Town provides integration guides for various frameworks, such as Next JS, Nuxt js, Next js, and Sveltekit. Follow the guide for your framework. In this case, we are using vanilla JS.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Landing Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Welcome to my landing page</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<div class="container">
<p>This is a sample landing page with a minimalist color scheme.</p>
<div class="image-container">
<img src="https://source.unsplash.com/random" alt="Random Image from Unsplash">
<p>This is a random image from Unsplash.</p>
</div>
</div>
</main>
<footer>
<p>Copyright 2023</p>
</footer>
</body>
<script type="module">
import { partytownSnippet } from '@builder.io/partytown/integration';
const snippetText = partytownSnippet()
const el = document.createElement('script')
el.innerText = snippetText
document.body.appendChild(el)
</script>
<script type="text/partytown">
console.log("3rd party script loading start")
let i = 999999999
while (i--) {
//mimic 3rd party script loading
}
console.log("3rd party script loading complete")
</script>
</html>To run Party Town, it is recommended that you inline the script directly into your code. Again, there are integrations for the major frameworks, but in vanilla JS, we can create a module script and import the Party Town snippet from the library. This is the code we want to inline. To do this, we create a new script element in the DOM, use the snippet as the inner text, and finally append that script to the body to run it.
That takes care of that! Now, when we run a lighthouse report, we see that the blocking time has been significantly reduced. The page content is interactive, and our users can click on buttons without any issues.
In summary, Party Town is a useful open-source library that can improve the performance of your website by running non-essential scripts in a web worker. It is easy to set up and integrate with various frameworks. If you’re struggling with poor performance due to third-party scripts, give Party Town a try and see the difference it can make.
