CLS for real users

[Tanya Tritelnitskaya]

Hello!

We face the issue at https://existek.com/blog/hospital-managment-system/ when CLS from CrUX doesn't show good user experience. There is another post on our website https://existek.com/blog/sdlc-models/, that is almost the same, but it shows quit a good results. Lab tests are the same for both of them. I've tried a lot of different tests to find out where the layout shifts are, but I didn't manage to do this. I'd be very grateful if you could help me to understand why this is happening. Thanks a lot in advance!

[Barry Pollard]

Well this one took a bit of digging as I couldn't see any shifts initially either!

The issue appears to be due to fonts, and particularly on desktop, and particularly on slower networks.

Currently you have this in your CSS:

body {

  margin: 0;

  font-family: Roboto-Light;

  ...

}

So you are using the Robot-Light font for your site - and it's a very nice font.

You have not specified a fallback font to use if Roboto-Light is not available, so until the font is downloaded the browser will use the default font. Crucially Roboto comes pre-installed on Android phones, so it can use that right away. On desktop however, the font needs to be downloaded and the default font will be used and if that is different, you will see CLS on desktop (but none on mobile) when the font actually downloads.

For Chrome the default is a serif font that is quite different than the Robot-Light font you want to use:

. 

As you can see some of the text is laid out differently for the two fonts, and some of the text is shifted down quite a bit initially, and then shifted back up again when the font comes in (that is you CLS).

Note you can just rename the font in dev tools to a nonsense name to see what the browser would display before it has the font:

PageSpeed Insights does also show a large CLS on desktop:

It's still in the green, but very close to the 0.1 cut off and it looks like your real users have worse CLS (0.11). This could be because they have smaller screens (so the relative shifts are bigger), or they start scrolling while the page is loaded and so see more shifts as they are further down the page.

It's also difficult to reproduce locally if you've a fast network as the font may well have been downloaded before the initial render. Throttling the network, and disabling the cache in dev tools shows the issue as the font is not there for the initial render.

It would be normal to list a number of fonts, with the fallbacks to use in case the preferred font is not available (either temporarily, or permanently) like this:

body {

  margin: 0;

  font-family: Roboto-Light, Arial, sans-serif;

  ...

}

These would look like this in comparison which, while bolder than the "Roboto-Lite" font you are currently using, is a much better fit: 

  

There's still a difference, but at least the heights are about the same and there is no shift of content.

There's more advanced techniques to get this even closer, but the above simple change should be good enough to fix your CLS.

Now why is this an issue for https://existek.com/blog/hospital-managment-system/ but not https://existek.com/blog/sdlc-models/? Well they both have the exact same issue, but I would guess that more of your users are arriving at the first page as a landing page, and so they have the font loaded already by the time they go to the other page? Your analytics should be able to confirm that.

Hope that helps.

Thanks,

Barry

On Tue, 17 Jan 2023 at 10:15, 'Tanya Tritelnitskaya' via Chrome UX Report (Discussions) <chrome-u...@chromium.org> wrote:

Hello!

We face the issue at https://existek.com/blog/hospital-managment-system/ when CLS from CrUX doesn't show good user experience. There is another post on our website https://existek.com/blog/sdlc-models/, that is almost the same, but it shows quit a good results. Lab tests are the same for both of them. I've tried a lot of different tests to find out where the layout shifts are, but I didn't manage to do this. I'd be very grateful if you could help me to understand why this is happening. Thanks a lot in advance!

--
You received this message because you are subscribed to the Google Groups "Chrome UX Report (Discussions)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chrome-ux-repo...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chrome-ux-report/9f5b09f0-0c4a-474f-b4d6-6b2b7bce9b9fn%40chromium.org.

[Tanya Tritelnitskaya]

Hello!

I'm so much grateful for all your time and deep analysis, Barry! Of course, that clears things up a lot for me and I'm sure the situation will become much better soon!

My best wishes!

[Tanya Tritelnitskaya]

Hello, Barry! 

Tanya is here again and I need your wise advice one more time)
Talking again about our page https://existek.com/blog/hospital-managment-system/ during the last month we observe a very sudden and quite significant changes in the CWV scores, I mean LCP and FCP mainly. You can see it by yourself at the screenshots for the last two days, for example and

also here is the part of the table, where I put the daily data 

Could you please share your thoughts on why this might be happening with the page?

Thank you very much in advance!

[Barry Pollard]

Could you please explain what I'm looking at here? That's a lot of screenshots and a lot of numbers but not sure exactly what you're trying to show?

Looking at the CrUX History API for that URL for mobile I see this:

 

They show an improvement in the last month, but I'm not sure I'd classify that as "a very sudden and quite significant change". Is this what you are talking about?

Desktop shows no real change over the last month.

Thanks,

Barry

[Tanya Tritelnitskaya]

Hello!

Thanks a lot for your fast reply, Barry!!

When I'm talking about  'a very sudden and quite significant changes' I mean that for the last three days we have LCP for mobile for example: on 26 of April good score have 79% of our clients,  on 27 of April good score have 68% of our clients, on 28 of April good score have 79% of our clients again. And with that table I've tried to show that we have this changes quite often, as for me. And I wanted to ask what are your guesses about all this?)

Thanks again!

[Barry Pollard]

No, I can't really explain such a jump. It does seem a large jump, but not completely impossible if a lot of pages were on the borderline or traffic varies considerably day by day.

This histograms data is also an approximated value and may exclude some visits included in the p75 number for various technical and privacy reasons. The p75 number above is what the assessment of the metric passing or failing is based upon and always includes all the data we have available to share.

The CrUX data is a great high-level summary, but for detailed analysis we recommend collecting field data yourself through a RUM solution. This will allow you to slice and dice the data yourself in a much more granular manner than CrUX allows, to be able to investigate questions like this. This can be collected yourself using custom JavaScript (we recommend the web-vitals library for dealing with some of the nuances in the metrics, as discussed in this post), or my using one of the many great commercial RUM offerings out there.

[Tanya Tritelnitskaya]

ok, I got your point, Barry) 

Anyway thank you so much for your time and attention!

Best regards!