I have a SPA (single page website) build with React + Firebase and I've been getting these Core Web Vitals errors (see images below).
My website is loading normally both on Desktop and Mobile. And I think it's rendering in a very reasonable time. At least I think it's way faster than most websites I visit, even though it's client side rendered.
I'm guessing these errors on Core Web Vitals are being triggered because there's a Spinner
that runs while the app is loading its data.
For example: that report is probably measuring the Spinner
vs Loaded content
as layout shift. Because I can guarantee that my app has ZERO layout shift. Once the Spinner
is gone and you see content on your screen, the app is 100% ready for you to browse and interact with.
Maybe to get rid of those errors I would have to do SSR + hydration, which I really don't want to, because it's a dynamic website and I would have to either remove caching completely, or to risk a content (state vs fresh) flickering on the screen once it's fully hydrated.
Should I care about these results? Is anybody that also manages a SPA also getting these kind of errors? Is there a way to fix this?
Found some related articles: