Google Analytics doesn’t have to slow down your site
Google Analytics doesn’t have to slow down your site
Partytown is a new tool that can run scripts on a web worker to free up your main thread and improve page speed and interactivity. Here’s a quick first look.
🔗 Key Links 🔗
- https://partytown.builder.io/
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: https://github.com/microsoft/cascadia…
- Theme: https://marketplace.visualstudio.com/…
- Icons: https://marketplace.visualstudio.com/…
---------------------------------------
🌐 Connect With Me 🌐
- Website: https://codinginpublic.dev
- Blog: https://chrispennington.blog
- Twitter: https://twitter.com/cpenned
- Patreon: https://www.patreon.com/coding_in_public
- Buy Me a Coffee: https://www.buymeacoffee.com/chrispen…
Content
0.359 -> sometimes trying to be concerned about
1.979 -> performance on your site is a losing
3.899 -> game because it doesn't matter how quick
5.64 -> you make your own code if you've got to
7.44 -> add in a bunch of third-party scripts
8.94 -> for instance you might have something
10.26 -> for like Google tag manager something
12.3 -> else that you're like embedding a tweet
13.679 -> for all these things basically will
15.839 -> block the main thread and slow your site
17.82 -> up even if you've done a ton of hard
19.619 -> work to make it fast well no longer
21.6 -> there's a new tool in beta called party
23.4 -> town and it couldn't be easier to use it
25.859 -> takes all the third party scripts and
27.779 -> moves them to our worker thread and that
29.64 -> way your main thread is preserved for
31.38 -> just your code all right let's jump in
34.26 -> foreign
36.78 -> hey what's up my name is Chris and
38.34 -> welcome to coding in public this tool
40.559 -> party town is created by the folks over
42.059 -> at builder.io and the new quick
43.86 -> framework that's coming out shortly here
46.079 -> out of beta but you can see that this is
48.3 -> still technically in beta but it's an
49.86 -> additional thing that you can add and if
51.78 -> for some reason somebody doesn't have
52.98 -> compatibility or it doesn't work well
54.84 -> it's no slower than your site already is
56.64 -> so I see no problem in starting using
58.86 -> this right now because it's not like
60.48 -> it's going to ruin the the analytics or
62.28 -> something like that all right so you can
64.199 -> see here that uh the goal is basically
66.18 -> to take all the heavy third-party
68.7 -> scripts and move them to a web worker
71.04 -> that means that since JavaScript is
73.38 -> single single threaded that single
75.06 -> thread can be preserved just for your
77.1 -> code which means your site can be super
78.6 -> super fast now they're going to talk
80.4 -> about a bunch of different kind of use
81.9 -> cases where to use it here's some of the
83.82 -> ones I've already mentioned right here
84.96 -> there are some plugins and stuff like
86.7 -> that they give you a bunch of
87.659 -> Integrations I want to talk about this
89.28 -> kind of in two stages I want to show you
90.72 -> actually the real difference it makes
92.4 -> number one number two to show you how to
94.32 -> get it up and running with an actual
96.18 -> project all right so let's go ahead and
97.619 -> jump in over here and I'm going to jump
99.36 -> into the services and here what you can
101.64 -> do is basically say whether or not you
102.96 -> want these things included on a page and
104.88 -> then test that page to see the actual
106.74 -> real life difference so if I come in
108.6 -> here and I click standard on all of
110.52 -> these this adds each of these things in
112.56 -> here so it'll add like the Twitter embed
114.479 -> the wistia video all this and I can
116.939 -> click page speed insights to run an
119.34 -> analysis
121.259 -> all right you can see now after waiting
123.18 -> a couple seconds I get back performance
124.799 -> score of 62. all right so a lot of that
127.5 -> is because I've got a bunch of blocking
129.239 -> things what are those things well all
131.34 -> those third-party scripts so let's go
133.14 -> ahead and change it up just slightly
134.4 -> let's move all of these over to party
136.44 -> town now notice for your client it looks
138.48 -> all the exact same however when I run a
141 -> page speed insights and I wait for the
142.739 -> analysis to come back you can see now on
145.14 -> actual page speed.web.dev I'm getting a
147.72 -> 98 98 performance out of 100 so it's
150.9 -> moved all that blocking content way off
153.54 -> and you can see now I'm down to 120
155.4 -> milliseconds where if I jump back over
156.84 -> this way we're at what 720. so again
160.08 -> this is super easy to implement and it
161.76 -> couldn't have a bigger impact on actual
163.56 -> experience for your end users all right
165.9 -> so now that we've actually put the
167.28 -> claims to a real test let's go ahead and
168.959 -> see how this works in a real life
170.64 -> project now I'm going to be pretty brief
172.019 -> here this is more like a first look
173.58 -> since this is in beta rather than a full
175.8 -> walkthrough but you can see they've got
177.54 -> a whole list of Integrations for angular
179.34 -> Astro View and XNX all that kind of
181.8 -> stuff so anything you want to use it
183.36 -> with you pretty much can at this point
184.92 -> and I found it to be really reliable
186.72 -> they even give you some different
188.34 -> configuration so for instance sometimes
190.44 -> you have to actually proxy the request
192.72 -> in a certain way so they show you how to
194.7 -> do that you also sometimes will need to
196.739 -> forward the events because it because
198.78 -> we're offloading this stuff to webworker
201.12 -> it doesn't have access to the window so
203.28 -> sometimes you need to actually take
204.36 -> things that are placed on the window and
206.22 -> basically pass them on to the script and
207.84 -> you can do that as well you can forward
209.34 -> those events and the triggers like you
211.26 -> have to do that for instance for a
212.519 -> Google tag manager so they show you how
214.2 -> to do that also Facebook pixel I think
216.3 -> is the same way there's a couple other
218.64 -> things like sandboxing debugging you can
220.56 -> actually get a full readout of stuff I'm
222.239 -> not going to go into all of this if you
224.159 -> want to work with common Services again
225.72 -> look at this this is more of a a first
227.879 -> look so let's go ahead and get this set
229.44 -> up just with HTML because most of these
231.18 -> are super easy and you have to do almost
232.56 -> nothing and so to actually do something
234.54 -> for you I'm going to show you how to get
235.799 -> this started with normal HTML and sure
237.54 -> what you need to do is install a script
239.519 -> then you need to basically configure
241.2 -> that script and then on any script you
243.36 -> want to use Party Town on you have to
244.86 -> add this attribute right here so let's
246.84 -> go ahead and do this kind of one after
248.04 -> the other but I want to get up and
249.78 -> running an actual project so I'm going
251.76 -> to jump over to my terminal here and
253.439 -> let's just go ahead and create a new
254.879 -> feed project so I'm going to say let's
256.979 -> see pmpm or let's do npm create Veet at
260.459 -> latest and we'll name this something uh
263.16 -> yes you can go ahead and install that
265.199 -> I'll call this party town uh sample or
268.32 -> something like that all right we'll use
269.759 -> vanilla that's fine in JavaScript that's
271.68 -> fine okay CD into Party Town sample and
274.199 -> then npm install it now let me open this
276.479 -> up in vs code and I'll be right back
277.919 -> with you all right so here we are um and
280.08 -> vs code we've got Chrome open on the
282 -> right I'm just going to come over here
283.139 -> before I start up the dev server I need
285.479 -> to actually install the package for
287.16 -> party town so I'm going to go ahead and
288.72 -> grab this right here and I am using npm
290.639 -> so that should work and once I get that
292.979 -> started I'm going to go over to the HTML
294.72 -> instructions because now I've got it
296.52 -> started and I installed it and I can
298.139 -> actually use it then what I want to do
300.479 -> is just demonstrate the need for it so
302.22 -> let me go ahead and start up the server
303.72 -> here npm run Dev
305.759 -> okay so this gives me this right here
307.919 -> and I can go ahead and open it up over
309.9 -> this way all right so just a normal
311.639 -> little counter app here I can count
312.9 -> stuff great okay so when might you want
315.419 -> to use partytown well rather than using
317.58 -> some third-party script I just want to
318.96 -> simulate what that might look like so
320.52 -> I'm going to come over here and I think
321.66 -> I'll just add a new file we'll call it
323.1 -> something like
324.6 -> um I guess let's let's call something
326.28 -> like third party
328.38 -> how about that third party.js okay so
330.96 -> here we're going to start with a simple
332.34 -> console log that says like starting up
334.259 -> service
335.58 -> something like that so you can see
337.139 -> what's about to happen and then we'll
339.12 -> end with something like ending service
342.06 -> all right so how do we get it to block
343.56 -> the main thread right kind of the
344.88 -> opposite of what you normally want to do
345.96 -> but to show you this let's go ahead and
347.34 -> just have a number we'll call it
349.02 -> something like this sure and we'll say
352.02 -> while num basically exists keep looping
355.259 -> over nothing all right we're not going
356.759 -> to do anything and then every time it
358.139 -> will basically decrement until it gets
360.06 -> to zero and then it will jump down and
361.56 -> hit this so if I save this here and exit
364.259 -> out of that and let's come over here and
366.18 -> I'm just going to add it directly in
367.5 -> here so script SRC and we'll add this as
370.74 -> a third party JS all right so here we go
373.56 -> if I come over here I'm going to open
375.12 -> this up just so you can see this right
377.1 -> here so if I start it and then it
379.08 -> finally ends okay so you can see it
380.46 -> takes some time and it's blocking the
381.72 -> main thread now here's the thing it
383.639 -> actually looks like everything is
384.96 -> interactable but if I hit refresh as
387.6 -> soon as I do that and I start to try to
389.039 -> click on here you're going to see that I
390.72 -> can't click so I'm trying to click
392.46 -> trying to click and it finally lets me
393.72 -> click after the service ends so
395.58 -> everything looks interactive but it's
397.199 -> not actually interactive if I open up
399.06 -> the network tag You tab you can see that
400.86 -> even more plainly so here I am six
402.66 -> requests and then finally the rest of
404.039 -> them come in so there's this huge kind
406.02 -> of blocking time where I can't do
407.4 -> anything else because that one script is
409.86 -> basically blocking the main thread so
412.08 -> this is the perfect use case to kind of
413.759 -> show how you can take one of those
415.44 -> third-party scripts and get rid of it
417.419 -> also this is in third this is third like
420 -> this and this is third like this
423.24 -> okay so with that said let's go ahead
425.699 -> and actually use party town now now if I
427.74 -> come back over here you're going to see
428.94 -> that the first thing we need to do is to
430.8 -> make sure that our scripts are being
432.72 -> sourced from the same domain and that's
434.699 -> because we're moving it to a web worker
436.319 -> so we need it to be hosted in the same
437.88 -> origin so they actually give you a
440.039 -> little helper for this under a library
441.419 -> you can just copy stuff right here so
443.699 -> now that we've got Party Town installed
445.259 -> we can do that so I can do this either
446.94 -> one time so if I open this up and then I
449.16 -> can just MPX Party Town like this just
452.46 -> like that and now it's copied it over
454.919 -> here so you can see how it's actually
456.24 -> copied this all the scripts I need to my
458.639 -> public directory which in Veet is
460.5 -> actually where I want stuff to finally
461.88 -> be kind of at the root of my directory
463.44 -> okay so now that I've got it there it'll
465.3 -> be basically be on the same origin and
466.979 -> it should work correctly you can also
468.9 -> add these to your scripts so that's
470.759 -> another way to do this where you
472.319 -> actually run it every time you build so
474.96 -> that would also be an important thing to
476.28 -> do for this use case just pointing it
478.38 -> out I think is enough because most
479.639 -> people probably aren't going to be just
481.139 -> using this for normal HTML sites all
482.94 -> right with that said now that we've got
484.8 -> that we need to go ahead and configure
486.36 -> it we can do this in a couple of
487.5 -> different ways but the gist of it is we
489.599 -> need to actually have the party town
491.58 -> itself inlined somewhere in our document
493.68 -> now they recommend the head but you can
495.12 -> kind of do it anywhere as long as it's
496.259 -> ready by the time you're actually going
497.88 -> to be using scripts so I'm going to go
499.5 -> ahead and start that back up and let's
501.539 -> go ahead and do it in the head since
502.56 -> that's what they would like now I want
504.72 -> to actually import this I'm just going
506.039 -> to import it directly in a script tag
508.259 -> here which means this needs to be type
509.879 -> of module so we can import
512.88 -> let me close the sidebar so we can
514.44 -> actually see what's going on all right
515.76 -> so now that I've got that I've got the
517.08 -> snippet text that I'm going to get back
519 -> from this uh this method I have this
521.399 -> function I have let me go ahead and
522.959 -> embed it somewhere in the page so
524.76 -> probably the easiest thing to do would
525.959 -> just be like to create a script tag so
528.3 -> document
529.44 -> dot create element
531.12 -> and that would be a script and I'll take
533.519 -> script tag dot enter text
536.22 -> enter a text like this and we'll set
538.2 -> this to the script or the snippet text
540.42 -> and then finally let's go ahead and just
542.16 -> append this to the body
544.2 -> dot append child and the thing I want to
547.14 -> append is my script tag okay so that
550.38 -> should actually be appended somewhere on
552.24 -> this body if I were to check this out
553.68 -> see module yes there we go okay so
556.26 -> here's the actual script right inside
558.42 -> here and that's all being embedded okay
561.72 -> so with that being said now we've got it
563.22 -> on the page the next thing I need to do
564.959 -> if I come back to the documentation is
567.06 -> actually attach this right here to
569.64 -> whatever script import I have in this
571.32 -> case it's right down here so if I add
573 -> this here this will basically tell party
574.8 -> down hey take this and move it to that
577.32 -> web worker separate thread at this point
580.14 -> I can come back over this way and if I
581.88 -> refresh you're going to see I can click
583.38 -> right away but if I open back up this
585.6 -> console you can actually see that it's
587.58 -> not yet done so it's moved it to a
589.32 -> separate thread and if I open up the
590.88 -> network tab you can see that too it's
592.32 -> moved everything over except for that
594.18 -> one thing so nothing's blocking the main
596.04 -> thread most importantly though you can
597.899 -> see that when I refresh the page I can
599.399 -> immediately start interacting with it
600.779 -> because again all those third-party
602.459 -> scripts including our fake one over here
604.14 -> have been moved to a different thread so
606.42 -> that's kind of the use case of Party
607.62 -> Town how you would basically use it in a
609.899 -> basic HTML site but most of the
611.88 -> Integrations are a lot easier than that
613.44 -> in fact if I come over here you can see
614.94 -> with Astro you don't have to do any of
616.56 -> this kind of stuff it just does it for
617.82 -> you you basically add it it will add it
619.8 -> to your Astra module and the only thing
621.6 -> you have to do is do this all right so
623.1 -> super easy there react is just about as
625.56 -> easy as well you install it you
627.18 -> basically import it and you're good so
628.98 -> they've made it about as easy as you
630.42 -> could possibly want to use and all you
632.58 -> have to do is add it like this now like
634.26 -> I mentioned there are some Oddities so
636 -> sometimes you have to actually you know
637.74 -> for instance make sure you always copy
639.12 -> it to your public directory that kind of
640.74 -> stuff but they give you helpers for that
642.48 -> and then sometimes you have to forward
643.92 -> it or you have to do proxies if you're
645.779 -> interested in a more in-depth tutorial
647.579 -> how to do this with a bunch of different
649.32 -> things let me know I'm not sure that's
650.88 -> something I want to do but I'm happy to
652.38 -> dive into it if there's a need all right
654 -> thanks so much for watching I hope this
655.14 -> was a help I'll catch you in the next
656.279 -> one happy coding
Source: https://www.youtube.com/watch?v=DjUWMZAzOMA