Core Web Vitals (CLS and LCP) errors for a client-rendered Single Page Application (built with React + Firebase)

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:

  • https://www.moovweb.com/post/google-penalizes-pwas-spas
  • https://www.enterspeed.com/core-web-vitals-can-affect-how-google-ranks-your-spa-website/

enter image description here

enter image description here