search

audacity / audacity.github.io

source code of the Audacity website
https://www.audacityteam.org/
4 stars 6 forks source link

stop page from jumping during load #16

Closed LWinterberg closed 10 months ago

LWinterberg commented 11 months ago

our react components (in particular releasevideo.jsx and shareyoursounds.jsx) currently determine their size after the initial render, causing pages to shift. pagespeed.web.dev doesn't like that and fails us for the core web vitals which allegedly is an SEO factor.

https://web.dev/articles/cls

We possibly can fix this by using useLayoutEffect in the elements in question so the size is there before any painting happens. In practice, I've only been able to make the stuff inside the thing load together with the element, not the other way round. https://react.dev/reference/react/useLayoutEffect

LWinterberg commented 11 months ago

on further inspection, it seems like changing client:only to client:load fixes the thing from jumping about. @DilsonsPickles any reason we need client:only rendering? from the looks of it, the download button points to the /download before the JS loads in, which is fine in my eyes