A fun location for your third-party scripts to hang out
Performance is always top of mind for any website or web app. Itβs of no surprise that a...
For further actions, you may consider blocking this person and/or reporting abuse
This is such an intriguing, simple and yet so innovative idea. Thanks for doing this and sharing it with the community all along. I have always loved your work at Ionic and looking forward how you innovate at Builder.io
Love this idea! It's high time we aandboxed those pesky scripts.
But where are the actual numbers? What performance boost did you exactly get with this approach?
Isn't DOM accessing and modifying itself is the most expensive part? Does profit of moving everything else except that to a web-worker really worth it?
Also moving data from the main thread to a web-worker and back takes resources as well (for instance, serialization/deserialization).
We've seen a single third party script for analytics drop a lighthouse score by 20 points. Analytics in particular is a high priority use case as it does not need constant read/write with the main thread (aka it's not needing to constantly serialize/dserialize), it just needs to not throw errors if it tries to run something like
if (window.something) { ... }.With projects like Qwik, Astro, Marko, React server components, everyone is trying to remove (or even eliminate) needing to run JS on the main thread to initialize a site or app, but what we immediately find is your hard work is quickly negated by the amount of 3rd party services that eat the main threads resources that are background oriented anyway (e.g. analytics). Partytown aims to solve for this use case by moving those expensive scripts to the worker and free up the main thread for just your code
Our next step is to gather production data and performance impact of running 3rd party scripts (on real websites) vs not (in partytown or eliminating entirely) to quantify the impact of these scripts more. Will share when we have the data available, so stay tuned :)
Sounds great!
Are there only specific use cases for this approach or it may be useful for most of the third party libs?
Absolutely - right now weβre mostly focused on analytics like google tag manager, google analytics, conversion tracking JS, etc.
Love this idea! Haven't thought of a polyfill to run scripts like amplitude, branch, datadog, or segment off the main thread. Makes total sense, and would be awesome for wider support for ancillary eventing libraries to clear their queues after a user has bounced from your site.
github.com/yisar/fard/tree/master/...
A long time ago, I used a similar method to run fre to the worker, but it only has 1KB and does not need to simulate dom.
Very curious to see where this goes. There's definitely some things I'd love to take off the main thread, and this seems like a good non-destructive way of achieving it.
This is a fantastic awesome idea really love it! I cannot wait to implement it
I like this A LOT A LOT!! ππππππππ₯³
Love it!
Wow
Moving third party scripts off the main thread to a service worker is very progressive! Love the concept.
Hey Adam!
Great article I was wondering if this will allow script tags to be easily added or removed from dom tree. Iβm currently working with an SPA and handling those third party ser a nightmare since you canβt control what gets injected.
Thanks!
I wonder how much better is this compared to delayed script injection? What I did before for the same purpose was pushing those 3rd party into the DOM, say, 1 sec after window's "load" event. That way, I saw no negative performance impact and the only downside was that a hit would not be captured by analytics if the user leaves the page too soon. Nevertheless, great technique!
great ideaοΌhopelly it will soon work on production
Partytown can use with the other third party libraries like moment, single-spa for React.
How can we set the forward config for those libraries? Can please share the sample code for that?
The below is the Partytown forward config for GTM, I want to set the same for toehr libraries.
import { Partytown } from '@builder.io/partytown/react';
export function Head() {
return (
<>
</>
);
}
Awesome Idea!
Love to learn more about this.
Would this work for jquery? I want to render jquery library and not let it block page render. Defer tag does not work.
Yes it should be able to work, however, the goals of Partytown may not be the same of why you'd like jquery to run in the web worker. If rendering your webpage is dependent on jquery working immediately, then Partytown may not be the best for this. However, if jquery is only handling click events, then it could be worth experimenting with. Please test it out and let us know how it goes on the the repo issues! Thanks
Love this idea! But how do I run jQuery functions for gtag using window.addEventListener on partytown?
Will this be worth or even working for banner ads as well?