Dramatically improve website speed with Partytown

Key Takeaways

on the web performance is everything if your website is slow and janky you are going to lose money that's a fact that's been proven by science what sucks is that it's often not your fault that your website is slow what happens is your first boss tells you you need to add Google analytics then your second boss wants to add Facebook pixel and boss number three wants to add an intercom chat widget all these tools require JavaScript and will clog up the main thread on the initial page load when you run a lighthouse report you'll get a very high blocking time because all these scripts are competing to work on the main thread and sadly the person who gets blamed for this poor performance is you the developer while your bosses get nice big Christmas bonuses luckily though there's a new open source Library called Party Town that can make everybody happy by running these scripts synchronously in a web worker and in this video you'll learn exactly how to use it to get started I want to demonstrate the problem very clearly as you can see here I have an HTML page with a script in the body you can imagine this script as a third-party resource that will harvest the personal information of your users in order to serve them advertisements that will more effectively separate rate them from their money in the script we have a while loop that does nothing for a while and what you'll notice is that if 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 actually a really Insidious performance problem because what happens is the page content will load but nothing is interactive that means if people try to click on buttons that require JavaScript they just won't work it's like a zombie website and by the way Party Town comes from the same team behind the quick framework and those guys are absolutely obsessed with performance the way it works is it designates scripts that are not essential to the initial page load such as marketing tools like Google tag manager and Facebook pixel or optional widgets like intercom and moves them over to a webworker you see JavaScript is single threaded which means it can only do so much at one time webworkers are a way to take non-essential things and run them in the background on a totally separate thread let's go ahead and see it in action I'm running a vanilla JS project here with Veet and the first thing I'll do is install the party town library once that's done we can find any scripts that we don't want to block the main thread and change them to type text Party Town this is how you designate what should run in a webworker once that's done they have integration guides for all kinds of different Frameworks like nexjs next and spill kit so you'll want to follow the guide for your framework in my case though I'm using vanilla JS now one thing that's unique about this library is that it uses a service worker which means it can't be hosted on an external CDN that means you'll need to copy and host its JavaScript code alongside your website luckily it provides a utility to simplify this process if we go into the package Json file we can create a script called Party Town that runs this copy lib command that will copy all the necessary code into the public directory go ahead and run that command from the terminal and you should now see all the Party Town files in the public directory and that brings us to our final step where we actually run Party Town it recommends that you inline the script directly into your code again there are Integrations for all the major Frameworks but in vanilla.js what I'm doing is creating a module script then importing the Party Town snippet from the library that's the code we want to inline so I'm creating a new script element in the Dom then using the snippet as the inner text and finally we append that script to the body to run it that takes care of that and I'll also point out that if you want to add any config options to Party Town you can create an additional script above it to handle things like forwarding for Google tag manager and now if we run the application through another Lighthouse performance analysis you can see we get a nearly perfect score with zero milliseconds of blocking JavaScript that's great news for the end user but even better news for you the developer because now people will stop blaming you for those horrible performance scores thanks for watching and I will see you in the next one