2

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:

enter image description here

enter image description here

Improve this question

1 Answer 1

Reset to default
2
  1. The spinner part is very likely causing the high CLS score (If you would add a pagespeed insights screenshot it will be easier to see what it records and if necessary I will update my answer)
  2. The large LCP might mean 1 of 2 things: Either you have an uncompressed image (again, pagespeed insights will help to know), or the fact that you delay the entire page rendering until all the data is loaded actually delays the LCP.

As to whether you should care about those results: it depends.

If your SPA needs a good SEO strategy and in a competitive field, then yes. Since as of lately, Google added weight to UX, and those parameters are a significant factor (especially the LCP as of now).

If that's not the case, I wouldn't worry about it too much.

Improve this answer
3
  • SEO is very important to this website. But how would you fix that? I guess the only way would be to do SSR (which currently I only do for robots). I'm not doing it for regular users, because it's a dynamic website (i.e: I change page contents, like blogPosts through an admin panel). So it's really hard to manage caching in that case. Maybe I should drop caching and move to the SSR + hydration approach? Then I wouldn't need the spinner. What do you think?
    – cbdeveloper
    Apr 7, 2021 at 9:29
  • It's actually performing well on SEO the way it is. But I also heard that Google recently added more weight to the performance parameters. So I would like to improve that as well.
    – cbdeveloper
    Apr 7, 2021 at 9:31
  • To be frank, I don't quite understand what hydration is, would love that you expand on that a bit and then maybe I'll have an idea as to the approach you should take. Without really knowing what it is, and you saying that the SEO goes well, I would not change it. However, and that is crucial to my advice (again this is an opinion, don't follow it blindly), I would pay very very close attention to changes in SEO performance, and the moment something goes wrong, start to make drastic changes.
    – Tal
    Apr 7, 2021 at 11:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.