Learn how to use Partytown to run non-essential scripts with a webworker and dramatically improve your websites speed and rendering performance. partytown.builder.io #javascript #webdevelopment
Web Workers can't interact with the DOM, but it looks like they're using a data channel to pass all DOM calls though. States on their site "may not be suited for UI intensive scripts". Worth a look. Thanks for the video.
Web workers aren't allowed to interact with the DOM because otherwise it will create race conditions between worker and main thread. And that can become very messy and cause difficult to find bugs.
"In order to serve them advertisements that will more effectively separate them from their money" - the humour in Fireship videos doesn't get appreciated enough
I've been watching this package for 8 months. I checked in on it yesterday. I thought it was dead. Glad to see an update but the periodic dead times makes me weary of adopting it. Even though there's nothing quite like it on the market and is sorely needed by a lot of marketing sites out there.
You really don't need this package at all. Browsers have web workers built in, hell you can make it faster than partytown by running each API on its own webworker thread asynchronously.
@@myartikool What are you talking about? everything you need to google is in the comment he made, if you need someone to pick out the terms for you maybe programming in general just isn't for you, or using a computer for that matter
I think it won't work for scripts loaded using CSP nonce values. Can you please cover about Content Security Policies and using them with HA Proxy and similar proxies?
I learned about this tool from your other channel and we tried to use this but ran into a problem. I don't remember the error exactly, but I think it was something like: Variables that those analytics scripts relied on were not available inside the web worker.
@@calimio6 I suspected as such, but @2:06 he has _document.body.appendChild_ which seems to be working fine. Maybe it has to do with what Yuri suggested, and we should look into that more...
Or these giant companies like Intercom could just write performant JavaScript and save us all the bother. You can just use an onload setTimeout to add the Intercom (or any other script) initialiser too.
I thought something similar, but setTimeout will keep it on the main thread and may not be as performant as executing in another thread via a web worker (which is what Partytown uses under the hood). But it's not guaranteed, since as many here have pointed out, it adds a lot of complexity and even the marshalling between threads may not be worth the price, depending on how often it has to communicate with the main thread.
@@ibgib I add a script tag in the setTimeout so whilst it's still executed on the main thread, it's not blocking interaction until it's called, which can be whenever you want. I don't need intercom at page load. Unless I've misinterpreted your meaning.
@@toxaq Oh very cool on the dynamic adding of the tag. I am speaking of the nuances of the JS event loop which will run the setTimeout task as soon as the current execution of the main thread is done. So if for some reason you have some other tasks, e.g. microtasks from async calls still ongoing in your main thread, the setTimeout script loading callback may be executed prematurely. If you were able to shift the work to a web worker and work on another thread, then it may be more suitable. These are all of course general statements and it entirely depends on the total context. Also, it seems that there is additional marshalling magic in Partytown that seems to add complexity which many here are complaining about, but the additional magic somehow improves beyond simple web worker functionality. It sounds like I'm not telling you anything you don't know, I just can't tell for sure if you understand the event loop aspect of what I'm talking about. It was magic for me for a long time, and of course since I don't work with its internals every day, is still somewhat magical.
@@ibgib appreciate the reply. Understood on the event loop. I investigated partytown but it seemed like I would then be responsible for breakages if at any time Intercom changed something that wasn't compatible and as such the delayed loading seemed like the best option in terms of not owning the responsibility but getting enough of the benefits.
Introducing a dependency on service workers would certainly be a dealbreaker for those already getting significant benefits from keeping their JS in their CDN
Really wanted this to work, but just couldn't get it working with tag manager or analytics snippets. Believe it was a cors error and had to give it up. Would be great if it worked!
So what I think but it might be not true is that it if u have lot of people on your website and u have lot of these requests it might be expensive for the server to work if I'm not wrong worker's work in the background which means in the server
You can't use 3rd party scripts on webworkers. For security reasons it won't work. That said, this is as same amount of work as optimising and offloading things to delayed execution with deferred js. Just another fancy way to pollute html in reality- real world dependencies would be far smaller except JS bloat of trackers, plugins and unnecessary code that gets bundled without tree shaking in some cases.
could you get a similar effect by having window.DOMcontentloaded event insert those non-critical scripts into tags and insert those into the body after all the important UX stuff is done, obviously if react or whatever is also doing stuff based on that event you would need some kind of managment object that knows the order of events. I don’t think workers can really help you in this situation since the key part does have to interact with the DOM, I guess what I’m not understanding is what work is done by the workers exactly?
Deferring doesn't prevent it from still causing JS blocking time, because lighthouse waits for *all* javascript to load before concluding the test. And async calls would just add more time onto that.
Actually, the mentioned example scripts shouldn't block the Initial Page Load at all if they are loaded with 'defer' which is standard. What partytown is for is clearing the main JS thread and helping with performance while the user is interacting with the website, not so much with initial Page Load and SEO.
@@379rale defer will make the script load after the html has been parsed, but will still block any interaction. Partytown will execute the entire script on another thread not impacting the performance or responsiveness of the page itself at all.
@@379rale Defer, as the word implies, is serial execution. This is parallel. Provided you have your ducks in a row and don't mix things up, its free performance.
Static caching through Cloudflare would help, but it costs $5/month and will never get 100s (or even green scores) across the board. The problem is that most Turdpress themes are made by designers, not devs, so they’re packed with all the bloatware that designers need to make a site without a developer. To get greens you need a developer involved, designers don’t know enough about CSS, JS, or web optimization in general. To get 100s you need a good developer on your project, they can’t optimize a project they don’t know about. I know a guy who’s site has 100s across the board, want me to put you in touch?
Web workers are not that complicated to use in their own right.... is this just a wrapper library around them? I'm not sure that it needs additional abstraction added, just... use webworkers
Can you tell how we can use partytwon for html based side - Yes , there is documentation on their site but it is very confusing like how to implement cdn or partytown js file what should be the file folder structure ? If you can help, please help me its on my job - i need to implement party town for solving main thread issye by gtm or other thrid party marketing scripts . Please help me to implement step by step partytown to our HTML CSS core Vanilla js based project.
Just use the defer attribute on script tags that fetch third party Javascript, done. Add one HTML attribute or ANOTHER JS library and MORE dependency management in your JS build process. How has no one called this BS out?
Finally was able to try that ~2 months ago on GTM, that been dragging performance 30pts down. Got a bunch of CROS errors on (the +20) GTM injected scripts, and they could afford any more time to debug it. So got dropped
it does not even work! what the hell. I did exactly the same but it turned out all my javascript codes on the frontend just won't load anymore because of type="text/partytown", what this video is supposed to help us in?
I may be wrong, but from what I understand without research, web workers is a browser feature that allows for JS scripts to be executed on a different thread. JS is single-threaded, but browsers allow for multi-thread execution (provided the user's CPU is multi-core which they pretty much always are nowadays).
Fireship simply goofed up with the example. Partytown moves all logic to service worker which allows your code running on main thread to get all available resources while all non-essential third-party bloaters get send to party in their little service worker town ;) It's pretty neat and as you might've guessed the intended use has nothing to do with replication of async/defer functionality.
Can you please show us how we can stop normal users from accessing network tab of inspect [chrome or mozila or both] ? And also show custom warning in console like facebook does.
They can’t interact with the DOM, this is basically a web worker wrapper that allows limited DOM interaction by forwarding DOM calls from the worker back to the main thread and vice-versa.
Why those tools don't support service workers in the first place? if Partytown can somehow forward dom calls to another thread, I'm pretty sure big companies can also do it.
Is the muscle dude on this video's slide image going to be OK? That's just wrong, nobody should look like that. I wonder what a muscle cramp feels like when you look like that?