how to reduce layout shift in astro
im currently in the process of rewriting my old personal site/blog in astro and i have almost finished it. but idk why the layout shift is so huge, please help
deployed version: https://nexxel-dev-v2-6s310ftwp-nexxeln.vercel.app/
80 Replies
I would think giving the body a width: 100% would help, but I can't test it in the browser since it resets the css every reload.
Unrelated, ik, but your old one was so much better imo
i will try this thanks
what do you not like about the new one? i just wanted to have a depressed boring site tbh 
old one got very bloated
old one got very bloated@nexxel how are you loading the font in? I think that's what's making the page jump on load.
swap
self hosted
I'm not super well-versed in fonts but I'd probably mess with that. If you throttle the network and performance, you can see that it loads in another font first, then jumps to the correct layout once it loads in your font.
yes that's what swap does
but idk how to prevent the layout shift here
Well if that was the goal...
It just feels less vibrant and fun
Nothing inherently bad with the design, but yk there's barely any design anyway so
yeah that was kind of the goal :(
i just want a site and not spend anymore time on it
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
yes me too
just help with this layout shift
What's wrong with just living the current one as it is
it has gotten really bloated
and i don't wanna use next
Hm
Of the top of my head. The fonts arnt being cached beacuse they must load in every route change
how do i cache itttttt
use remix 
Aaaaaaa ummmmm idk. Don't we have a Resident astro pro ben
i don't wanna tag him ðŸ˜
Neither ðŸ˜
Are you using font source or a font manually put in your repo?
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
manual
oh wow thanks i'll try this
but this will just cache it on the server right?
Ohh yea that could wokr
will that make the font load faster
sorry idk how font caching works
nah that will make your browser keep a cache of the font for longer
but it should already cache the font already
actually im on pc now i can have a little look
currently your fonts are set to be re-fetch on every page load / route change
ohhhh
thats how i cache it on the client
got it
ye
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
wow that helped a lot thank you
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
no im not SSRing anything
okay now how do i cache images so if a person on slow 3g visits, images will load faster
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
for these parts it looks like you could slap a min width on this.
maybe using a clamp so its X width or 100vw whichever is smaller
im not really fetching anything so i don't need a ssr adapter
oh the whole body you mean?
by this i mean the main body
yea
the stuff thats not background
i added width: 100%
got a preview?
can we get code?
cause for some reason fonts arent hitting cache so that should help
actually nothing in the network tab is hitting cache
nvm found it
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
i fixed the email component flickering so far
with client:load instead of visible, since it will always be visible on load anyways
I've pushed many commits, couldn't get caching to hit on anything which is odd but the shift Is cause by the font and loading of it
Removing that font I got cls down to 0
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
yeah its due to the font :(
ooo i was just using what the template came with
this is interesting but im not sure how to implement this in astro
that makes sense, so should i change the units to use rem
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
i can prolly do that yeah thanks
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
the font isn't loading at all for me
fonts aren't a solved problem lolol this is so tough
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
wait lemme try another browser
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
the font did come through but it isn't applying for some reason https://nexxel-has.no-friends.xyz/chrome_FcZJEJiejF.png
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
oh cool thanks
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
dude i hate fonts :(
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
yeah i used chrome and brave
not working on chromium based i guess :(
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
im using woff2
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
supported in all browsers i think
how would this help?
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
yeah not what i want haha
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
yeah so weird, but thanks for the help!
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
@nexxel Are you using woff2?
yeah
Ignore if you have tried these:
1. change swap to optional or fallback (try both)
2. use preload or preconnect in the <link> tag
i don't want to use optional but i will try fallback thanks
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
its the same 😅
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
yes
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
ah ya now that you put it together, yours is better for sure
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
i had it as swap too haha
tbh, I never seen a layout shift this crazy. Its like the font is doing this purposely to mess with you, there is no other explanation to it