My core web vitals are failing even though when my are scores are perfect. Any help would be very much appreciated.

[Manoj DM]

Hello,

I'm from Allo Health and we run a blog and all our performances scores are very good and we've been failing core web vitals from past few months and all the urls were mostly tagged as "Need for improvements" and today, All of a sudden, they've been moved to "poor".

Click here to view an example page and we're green for our core vital metrics as well. Not sure if we're missing anything. Any help would be very much appreciated. 

Thanks in advance,
Manoj

[Aymen Loukil]

Hello Manoj,

This a perfect example where Lighthouse score doesn't represent the real experience of your users. 

I gave a talk on this in BrightonSEO, here are my slides : https://speakerdeck.com/aymenloukil/what-your-google-lighthouse-score-hides-from-you-brightonseo

What you should measure and monitor is the first part of PagespeedInsights result page (Discover what your real users are experiencing) for both URL and domain level.

I created a tool that makes Web Vitals monitoring easier. It helps you identify on which metric/device you need to optimize but also on which page type. It can also help you validate the implemented optimizations. You can check it out here https://speetals.com/ 

Happy optimization,

Aymen,

--
You received this message because you are subscribed to the Google Groups "web-vitals-feedback" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web-vitals-feed...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/882647e3-b3e7-4a9a-bb71-472b290d4288n%40googlegroups.com.

[Manoj DM]

Hi Aymen,

Thanks for sharing, I'll check it out.

Thanks.

[Barry Pollard]

It also looks like a classic case where the JavaScript is not loaded initially but as soon as you scroll, menus are added, ads load and the content is shifted down significantly (causing CLS). So why what Lighthouse measures (a simple load, without any scrolling) it looks good. But real users get a much worse experience as soon as they try to use the page.

To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/90ad0124-f67a-4f68-9e60-ffeab2db200fn%40googlegroups.com.

[Manoj DM]

Hello Barry,

Thanks for taking your time and helping me out.

It makes sense, but I just have one question - Wouldn't it contradict the law of lazy loading ?

[Aymen Loukil]

When we lazy load something, we still need to allocate required space to avoid Layout shifts.

Aymen,

To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/CACAqyuQNtf1ZfYFmOUNUUyOXd4o2qqxYeodpxjDKsaKFR7TPwA%40mail.gmail.com.

[Tony McCreath]

I'm not sure what the law of lazy load is?

Think about how things affect your users experience.

Some things need to load quickly for your users to be able to use the page. They should not be lazy-loaded. Primary images or resources to make the page work.

Some things are less critical, like images low down on the page or extras like chat widgets, so they should be low priority, delayed, or lazy-loaded.

One area that is often messed up is review widgets. They are visible, so they should be a high priority. Also, they often dynamically add structured data that need to be added in time for Google to consider them. Give Google a chance to see your reviews by loading them as quickly as possible,

[Barry Pollard]

No. Lazy loading tried to give a seamless experience while only loading as much as necessary and delaying loading non-essential until it’s needed.

Typically lazy loading is about delaying off screen content until it’s needed (ideally just before it’s needed). But in a way that ideally the user does not notice.

For example, if you lazy load ads you might reserve some space for an ad but not actually download or execute the JacaScript and ad content until the user scrolls near that bit of content. Ideally, the JS will still have time to download and execute before that bit of the page is shown, but even if that is not the case, the ad should pop in the space nicely and not interrupt the flow of the reader.

In this case you load the page, you start reading, you scroll down to read some more, multiple ad spop in, shifting all the content down, you lose your reading place, you scroll some more to try to find it again, more ads pop in - some covering the screen and have to be dismissed. You’re really lost and disorientated.

I’ve no idea about the effectiveness of this strategy from a revenue perspective, which may be more important to you, but from a user experience it’s a poor one. The CLS metric is specifically designed to measure when content unexpectedly shifts like this and includes these shifts which are caused by scrolling.

Ignoring the ads part the hamburger menu in the top right of the mobile screen has similar, but smaller issues. The menu is not shown initially (so initially the user has no idea you even have a menu!). In scroll it shows and shifts the button to the left a small fraction. The CLS impact here is small admittedly but the hiding of the menu until scroll seems like bad UX to me as it hides the fact there is a menu.

Saying that, delaying as much as possible can have a positive effect on loading time (measured by LCP) so seamless lazy loading is definitely a positive thing. The issue here is it’s not seamless.

[Manoj DM]

Got it, Thank you guys for the insights. I really appreciate it. This would help solve my problem.