PageSpeed reports too high CLS

[Vipul Kapoor]

For this url (https://www.scentgod.com.au/shop/p/paco-rabanne-1-million-parfum-dior-sauvage-edt), pagespeed insights reports that I have 0.5 CLS but in my browser's performance tab, I get around 0.15 CLS and visually looking at the screenshots, there's not much that's moving.

Is pagespeed insights wrong or am I missing something?

[Barry Pollard]

There's two issues:

1) PageSpeed Insights does not have URL-level data for this URL so has fallen back to origin-level data:

This is explained in this guide: https://web.dev/optimize-cls/#:~:text=PageSpeed%20Inights%20will%20show%20URL%2Dlevel%20data%20where%20it%20exists%2C%20and%20attempt%20to%20fall%20back%20to%20origin%2Dlevel%20data%20where%20this%20does%20not%20exist.%20Always%20check%20what%20data%20is%20showing%20to%20ensure%20you%20do%20not%20waste%20time%20trying%20to%20track%20down%20a%20CLS%20issue%20that%20actually%20exists%20on%20other%20pages%20on%20your%20origin!

So it could be this is CLS for another page. However, I don't believe this is the case in this particular example and think this is CLS affecting ALL pages.

2) When I scroll down there is a weird menu snapping to the top that causes the whole content to shift. The shift isn't a huge amount but because it's ALL the content that's quite a lot of CLS (CLS is how much content is shifted by how much).

You can see this in the attached video if you look closely at the menu, and also in the console as I'm using the web vitals extension to log the CLS in the console. Scrolling up and down repeatedly just increased the CLS more and more. Scrolling should not lead to CLS as it's unexpected behaviour (and is definitely jarring in this example).

So this is a real CLS issues and PSI is correct to report it.

On Tue, 3 Oct 2023 at 06:00, Vipul Kapoor <vi...@glowingstonewebsites.com> wrote:

For this url (https://www.scentgod.com.au/shop/p/paco-rabanne-1-million-parfum-dior-sauvage-edt), pagespeed insights reports that I have 0.5 CLS but in my browser's performance tab, I get around 0.15 CLS and visually looking at the screenshots, there's not much that's moving.

Is pagespeed insights wrong or am I missing something?

--
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/6ea5fc9b-e77b-4838-8541-434e14657595n%40googlegroups.com.

[Vipul Kapoor]

Yes, first section is for the origin and I'm ignoring that for now (0.32 value). The CLS of this particular page is reported as 0.5.

I don't think pagespeed insights scrolls the page like you did in the browser, does it? And even if it did, your extension still showed 0.4 after multiple snaps. It doesn't add up.

[Vipul Kapoor]

Do you know of a tool that can tell specifically which element is moving? In the dev tool, I have some information but its not making sense. 

This 0.17 CLS has this supposed element that moved from 456 to 638. There is no mention of which element though and the highlight seems to be in a random spot. There is not element that fits the box its highlighting.

[Vipul Kapoor]

PS - I fixed the jump that occurred when scrolling just so we can look past it. Because that's not the real cause if this CLS value.

[Barry Pollard]

Do you know of a tool that can tell specifically which element is moving? In the dev tool, I have some information but its not making sense. 

Hovering over the "Moved from" or "Moved To" should highlight it. When it doesn't (like in this case) that usually indicates the element was removed from the DOM (maybe as part of JavaScript hydration of the page?)

The shifted elements are also highlighted in the Lighthouse section of PSI, in descending order of size:

Switching to mobile emulation and using Slow 3G, you ca see the page is initially drawn with no image, and then the entire content is shifted down once the image dimensions are discovered after it starts downloading:

    

This also matches the first screenshot in the Lighthouse "Avoid large layout shifts" section detailed above, so it looks like that is the main issue for now.

To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/28e90932-6b3a-447f-a04e-58029422de7fn%40googlegroups.com.

[Vipul Kapoor]

Yes, indeed it was the picture shifting the contents down. Its weird it doesn't show up on my dev tools. Now Pagespeed is returning around 0.2 CLS which is similar to dev tool's 0.18. Thank you, I've learned a lot from you.

Can you tell me what is PageSpeed complaining about with the first screenshot with 0.197 CLS. Is it the shift from font change?

[Barry Pollard]

Looks to me like the 0.197 is the image dropping into place and shifting all the current content down (remember the shifted elements at the ones affected by the shift, not necessarily the cause of the shift).

FYI you can also debug CLS with the Core Web  Vitals extension as mentioned previously and it does log the elements. See docs here: https://web.dev/debug-cwvs-with-web-vitals-extension/#cls-debug-information

To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/0d4fdff9-7571-4178-94a4-9bc81248a4b9n%40googlegroups.com.

[Vipul Kapoor]

Okay I've figured out that its the slider that pushes the content down and then back up. Its not showing up in any screenshots, can't even see it with the eyes. I'll dig deeper into the slider later on. Really appreciate all your help. This extension is exactly what I needed.