#How to optimize JS in astro

32 messages · Page 1 of 1 (latest)

late needle
#

I have tried my best to optimize the images in my project, got every single image below 200kb which is nice, but now Im running into the problem that I have no idea how to optimize js in astro, its my first astro project too so Im very eager to learn more!

The website is https://mrloveless.netlify.app/

Mr Loveless Brisbane

Astro description

#

(basically Im asking for any and all js optimizations there are, low hanging fruit are always welcome)

#

@uneven kindle thank you for your time

uneven kindle
#

Yeah so you have a lot of gsap running which is probably doing it!

#

Yeah so I don't know exactly why, but gsap is being brought through with your Footer component

#

So you're sending down ~46kb of js

#

All of gsap and then your code on top

#

I'm not really sure of the best way to optimise this at this stage... gsap is just big

late needle
#

ah I see

#

yeah I wanted to use framer motion but I couldnt figure out how to animate padding so I just went with gsap, eventhough I know motion is way lighter, it sadly falls behind gsap when it comes to ease of use for my specific case Why

noble pumice
#

Cool site btw

late needle
#

does anyone know what the best approach is for non critical js? Since everything is scoped per component Im having trouble imagining how it works. For the above the fold component I have part of the script tag which is critical as its the load in animation with gsap, but then there is also a part that has the fade out animation on navigation which isnt critical and could be loaded only after dom loaded. Then Im also wondering how it works for below the fold, the problem I am seeing with .astro components is, since they dont have the client: directives, how could you do something like client: visible, since there are multiple things that load eventhough they are below the fold

uneven kindle
#

I sure wish my first website looked like this 😅

late needle
#

you are too kind jumper, thank you

late needle
#

do you simple do <script defer> inside of the component?

#

Imma try it out and see if something blows up

uneven kindle
#

So using <script> transforms it into a module and modules are deferred by default! So that should already be happening!

#

But the error you're getting isn't about ttfb (time to first bite) or lcp (largest contentful paint), so I feel the deferring is fine.

It's complaining that the site is just doing too much work on page load

late needle
#

I came across this for critical css

#

do you think its worth it if your css is scoped?

#

or is that also already taken care of

#

(Im going going by a list of optimizations to learn whats needed for astro)

late needle
uneven kindle
#

Well it's more just the amount of stuff, but all sites using gsap and page load animations have the same issue tbh.

I don't really know enough about gsap, so I'm not 100% sure what's the best way to deal with this! I don't know if anyone else is a bit of a gsap wizard...

Could try something like having a 1.5 second "loading" screen, then after that delay start the animations. At least they won't be going as all the other page load stuff but idk, not necessarily the best solution - but you do see loading screens occasionally, especially on fancy websites

late needle
#

thing is tho, I turned off caching and put regular 4g throttling via dev tools, and I do see my page start suffering a bit, but idk if that is normal with those options turned on

uneven kindle
#

Yeah using those throttling settings will always be slower, so that's fairly normal! But ofc the better it loads on all connections the better!

uneven kindle