Dramatically improve website speed with Partytown
HTML-код
- Опубликовано: 6 дек 2022
- 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
This is probably the first time I've actually LOLed because I had to integrate those three things in that order
Same lol
First time?? Damn ur missing out
Please invite me to the party!
I too was triggered by the trinity.
Fun Fact: LOLed is supposed to say "Laughed Out Loud" but it just says "Laugh Out Louded"
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.
NextJS has first class support for PartyTown integrated with their tag. Makes it even easier to pop in like it were a normal script tag.
Yet another reason why NextJS is the best.
Its in beta and Nextjs also has as experimental flag extrategy=worker for scripts that seems to do the same ?
@@cau8777 I believe this is because PartyTown isn't v1 yet. They don't consider it to be a full release.
Is that why I only have the issue on my vanilla js webpage? Nice.
Insane how your sarcastic description fit the exact scenario I had to work with a couple months back
I really like Jeff’s sense of humor
Not integrating anything until I hear the words blazingly fast 🚀🚀
Great video! Thanks!
Misko Hevery, creator or Angular JS, Angular 2, Quick and Partytime.. Absolute Legend
Partytown is actually Adam Bradley, but yea, Misko is a legend 🙂
excellent video, thanks for sharing. As soon as I stop being poor, I will buy your courses.
This is awesome!
One issue I ran into while integrating was CORS - they recommend setting up a proxy server for this or using theirs. I rage quit 😂
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.
It makes you wary, not weary...unless the thought of using it makes you tired.
@@x1expert1x How do I do this? What should I google?
@@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
@@dabbopabblo geez, no need to get so aggresive, if you're not going to help the guy better to say nothing at all
Maybe it's just me, but I like the video even before getting to see what is it about in both of his channel
A-M-A-Z-I-N-G. Thanks for that
"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
Thank you~
best video!
will try Partytown
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?
Bro thank you!
🔥🔥🔥
Love the sarcasm: Bosses can be hard to deal with!
That’s crazyyyyy
Didn't even know this existed! This is the sh*t I live for
Hwo outhb on?
Thanks... I am waiting for the long time this video..
In server side what are changers to make boost website performances?
Acelera brutalmente tu web.
"The while loop that does nothing for a while"...
Good pun xD
Cool
🚀🚀🤩✨
Is it possible to make javascript multie threaded ? Or do you need to rewrite entire code base for that ?
did you use that exact code for testing? why isn't the loop optimized automatically, if it doesn't do anything?
Nobody's gonna talk about
"In this script, we've got a while loop that does nothing for a while"?
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.
Thats what's I did lol but I'm sure someone can tell me why I shouldn't do it that way
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.
Bro I was literally was testing my site speed with throttling and I was comparing to youtube when this showed as recommended
Can you please make a video on how to develop the internet from scratch?
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.
web workers cannot access the dom, so probabaly something related to that
that's what the forward section of the video was for
@@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...
@@weeb3277 That would only matter if @Fireship unit tests his example code
It would be nice if we can run code splited js in different workers
You can, what's stopping you?
Add in Hotjar on top of those three things, and that was my latest integration cycle hahaha
Don't you just love it when everyone needs to make "data informed decisions" but no one knows what data to look at or what decisions to make lol
Its in beta and Nextjs also has as experimental flag extrategy=worker for scripts that seems to do the same ?
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?
The guy was slapped so hard his nose experienced inertia.
Too good to be true. Are there any edge cases where it doesn't work well? Does it have a fallback for old browsers?
There can be CORS issues with some third party scripts which mean you have to proxy them and correctly set it
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.
A way to speed up performance that isn't nodebackend specific or framework dependent? Sign me up!
I am using no , but it's still complaining about unused Javascript... Using NextJS, and def using some import packages.
pogger
Does it load just the GTM script as part of party town, or will it also magically handle the scripts that GTM is loading?
That thumbnail 😂🎉
Couldn’t you use just defer and async attributes for that?
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.
That's what he said. The page will load, but won't be interactive until the script has finished
@@NorthLaker I don't understand how this is better than defer
@@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.
I see you also listened to that SyntaxFM episode.
Site bogged down by JS libraries? We have just the JS library for you!
Does it works with Wordpress? If anyone can tell me some tips to improve those metrics in Wordpress, i would be grateful.
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?
Is this really a good stable solution though? Isn't there drawbacks like missing data capture? How often will this just break because 🤷♂who knows why
Can you make the same video for wordpress with step by step guidelines for who knows less code
explain the forwarding part
I think those are the top 3 things that make me leave the said site immediately.
I’m getting CORS error for third party scripts. Tried loading g trackers like Facebook pixel. But getting CORS error
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 we have a video on Rome linter based on Rust?
we like to party
3:21 intresting
Can I use this with a flask application?
Umm yes
Hi Jeff what us the future of angular
my lighthouse score was 44 but total blocking time was around 50ms(green) so do i need party town then. ps- worst score is FCP and Speed Index 7 secs
What're you loading that your FCP is blocked? Images? Videos?
Is it a pure React app?
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?
It does not work with next app folder. Actually, there is no alternative.
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?
Wouldnt be easier to load them after the DOM is fully loaded? Something like window.onload = () => {}... Asking for a friend...
Can you explain more on how a web worker works? Is it similar to loading resources parallel/ async?
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).
@@tobias-edwards doesn't even have to be multicore because OS has a scheduler
Nice! Now we can continue annoying users without blocking them, so they can close all the ads and bullshit without interruptions...
websites are easy 😉
I am not developer, is there a way to do this with my Wordpress website?
Why not manually use heavy scripts as service worker? Why use a library?
EZ just detect the google service for pagespeed test and feed it a static html page
what about the simple async/defer tags
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.
what's wrong with using defer
IT would have been way more useful if you showed an example where you are sending/receiving data as well between main thread stuff and workers.
Of course it would be included in the PRO subscription on his website
You can use comlink instead for that.
do you want Fireship to do everything from you? go read the documentation and figure it out yourself
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.
What kind of terrible prank are you trying to pull on your users?
@@BurgerKingHarkinian no no no terrible prank. I just wanna hide my bad backend skills.
make a video on JA3
What is this channel? There is Fireship so why they need for another Fireship channel?
here ,i m screwing up to parallise my programs in python 😞
Need a web page! Goes into infinite loop of over-engineering. Why is my website slow? Needs an over-engineered solution!
Great! Now, I will tell my developers to use and not give them any bonuses.
whats wrong with regular web / service workers ?
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.
@@liquidsnakex ah i see. thaanks. seems pretty good
0:04 JESUS CHRIST
While loop that does nothing for a while
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.
not bad
All this just because JavaScript is "single threaded" and blocking, what a disaster, but hey it's something!
Please do a react native/firebase new vid
yes first comment
hi
Solution: Astro
everything else is fodder for the hounds.
omg really?!
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?
Privacy invasion... lol
Why is everybody rushing so much! Can we just chill and take it slow
19 min late ... 🗿
Why partytown and shit like that when you can just send plain html to the client
Because the execs want client side analytics
@@byteofwood just defer the script
Or better yet, just send your website as one big PDF file to the client.
@@altairbueno5637 I believe defer just changes when the downloading of the script happens. Once it is downloaded it has to be executed on the same thread as all the interactive elements on the page, which might make them not work for a bit. However partytown uses a web worker which should not impact the actual page performance-wise. I could be wrong about defer though.
@@altairbueno5637 that just makes the website start lagging a few milliseconds after loading, instead of starting to lag as soon as it's loaded.