Made in Builder
Our secret to speedy webpages is now in beta and ready for the real-world! The next step is for our friends (that’s you!) to take it for a spin and share your experience so we can iterate and refine to make this the best (third-party script) party ever.
With the combination of Partytown + Qwik, we dramatically improved our homepage performance by moving all of our analytics off the main thread and into a web worker.
Throughout Partytown’s development, we've worked with ideas like these to drive performance benefits:
We’d love to discover how real-world production websites, such as an e-commerce site, can see an increase in conversions. Partytown increases site performance, which leads to better UX, and search engines notice the performance improvements. This is where you come in!
At the command line, use
npm to install Partytown:
type="text/partytown" attribute to each third-party script to run from a web worker.
Next, inline the Partytown snippet in the
<head>. How you add the snippet script to the
<head> depends on your website. While the script could be an external request, it's best for performance to inline the script since it's so small. If you're using React, we recommend using the
<Partytown/> React component.
You can find the
partytown.js script within
@builder.io/partytown/lib. See the distribution docs for more info on the
@builder.io/partytown package files.
You can find the React integration in the
@builder.io/partytown/react submodule. The following is an example of including the
<Partytown/> component in a Next.js page. Notice the
<Partytown/> component is in the
<Head>, and the example analytics script has the
We’ve worked hard to find the right balance between making it easy to integrate into your current setup, whatever that may be, while also giving you 100% control through configuration. See our installation and configuration for more information on how to add Partytown to your site.
Partytown is still in Beta, and we’ve seen its benefits already. However, to provide more real-world numbers, we need more real-world usage.
Currently, builder.io is using Partytown, and running in production has been invaluable for us to close issues and discover more scenarios that need to be handled. We’re also working with a few partners to test on other production websites, but we’d love to get more data! If you have any questions, or looking to contribute, hit us up on our Discord or Github.
At the lowest level, Partytown can work with just vanilla HTML, meaning it doesn’t need to be a part of a build process, doesn’t need a bundler, doesn’t require a specific framework, etc. Because it can integrate with any HTML page, it much easier to then create simple wrapper components or plugins for almost any ecosystem, such as Shopify, Wordpress, Next.js, and much more.
Partytown is different from most web development libraries in how it works and what’s required for its setup and configuration. With the Beta release we’ve also improved our documentation but like code, docs are a living project. If you see areas where we could build on our documentation, let us know.
Our Atomics build is already working, and it’s actually 10x faster than the service worker xhr request communication layer, and offers a smaller file size (win win). However, its cross-origin isolation header requirements are proving to be a challenge for practical sites. Meaning, if you enable Atomics on your site with the appropriate headers, there’s a good chance other requests your site requires may start to fail.
We’ll continue to work on Atomics, and we're hopeful we can find the right combination so Atomics can instead be the default. As always, if you’re interested in helping we’d love to hear from you on Discord.
It’s looking promising for Partytown, and it’s already improving our own site’s performance. We’ll continue to fix bugs as they’re found, but our next step is to collect production data outlining the before and after effects. Next, we’ll be looking to add more integrations, such as Shopify.