1

The website of PageSpeed Insight is the only place, where i get CLS issue in both of field and lab data.

Any other Lighthouse instance (by WPT, as API or by DevTools) displays CLS issue only in field data, not in the lab.

How can i diagnose correctly, which elements are causing CLS? Example.

PS: My question has the following cause: analyzing other websites i usually have under devtools → performance red diamonds layout shift, which, if clicked, display in tab Summary some data about this layout shift. Like on the screenshot:

enter image description here

But on the example site i get CLS diagnosted, but not displayed.

Rick Viscomi
  • 8,180
  • 4
  • 35
  • 50
Evgeniy
  • 2,337
  • 2
  • 28
  • 68
  • I found this same issue confusing as well. To see the particular Layout Shift detail, you click the little red bars in the "Experience" section of dev tools (NOT the LS diamond in the Web Vitals section, counter-intuitively). Once you click in the Experience section, you get the detail of the particular layout shift element, from-to coordinates, etc. The other important point is that CLS is measured during ENTIRE PAGE LIFE CYCLE not just at page load -- this is very often why Field Data CLS is much worse score than lab tests. Google explaining it: https://youtu.be/t8YBZLjL-KU?t=1258 – l_r Apr 21 '21 at 13:47

1 Answers1

3

The synthetic (lab) tests only load the page (they do not interact with it), whereas field data is until page unload.

Immediately I can see one Layout shift is when you open either of the drop down menus, your scroll bars disappear (due to adding the class .overlayed) and the whole page shifts around. Synthetic tests do not open the menu so will never capture it, however this shouldn't actually contribute to CLS as it requires interaction to open (just something to fix).

The other thing I noticed is the bottom right corner icons cause a layout shift when you scroll and they collapse / open (the floating icons). This is likely to be the cause of CLS as it isn't via direct interaction. Scrolling does not count as user interaction when it comes to CLS.

My guess is that this is the one that gets found by synthetic tests sometimes and not others.

Finding Layout Shifts

In order to find layout shifts you can open developer tools, go to rendering panel (you may need to open it with "more tools") and click "Layout Shift Regions" so it is selected.

Now use the site and you will get a blue box around anything that shifts.

Or you could use performance traces

The other way is to run a performance trace in the performance tab and then just use the site. Once you are done complete the trace and it will tell you if a layout shift occurred and what item caused it.

performance trace showing layout issues caused by item ul#quicklinks.expanded

Tracking them in the field

In order to capture layout shifts in the field yourself you should use something like Google Web Vitals library along with click / mouse position tracking etc and pipe it to your own backend or Google Analytics for analysis.

This lets you find issues with the page a lot more quickly and easily using Real User Metrics (RUM) data in real-time.

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64
  • Two elements you named, are the kind of expected layout shifts. I.e. this kind of hamburger menu is used by many websites. Same with opening and closing floating icon bar. Is this usability behavior now a negative factor? Btw. I've edited my question - maybe you have any additional advice for me. – Evgeniy Mar 18 '21 at 16:14
  • As stated at https://web.dev/cls/, layout shifts which happen just after user action are flagged as `hadRecentInput` and are excluded from calculation. You write about shifts of exctly this kind - but in fact they seem to be not excluded from calculation. – Evgeniy Mar 18 '21 at 16:23
  • The first one should not contribute to CLS as it follows user interaction (but you should fix it anyway really as it is strange to lock scroll when a menu is open), however scrolling does not count as user interaction. I ran a trace and it is definitely caused by your floating icons in the bottom right as you scroll the page. `ul#quicklinks.expanded` is the listed related node. Not sure why it wouldn't display in your trace - did you definitely click on the "experience" section in the trace and not on the "LS" section under web vitals by mistake? – GrahamTheDev Mar 18 '21 at 22:17
  • I have added the trace I ran as a screenshot so you can see it. – GrahamTheDev Mar 18 '21 at 22:21
  • To avoid a layout shift don't use `margin`, instead you will have to resort to either collapsing the height (which will ruin the effect probably) or you could use `transform: translateY(-37px)`....but you would have to use `:nth-child` selectors then I would think and increment it (`translateY(-74px)` for the second item etc.). – GrahamTheDev Mar 18 '21 at 22:37
  • Could you explain, why on your performance trace i see these red diamonds, which display layout shifts - but on my performance trace i don't see them? – Evgeniy Mar 19 '21 at 12:08
  • check you have "Enable advanced paint instrumentation (slow)" checked. It is in the hidden setting panel at the top, which can be opened by clicking on the cog in the top right of this panel. Also make sure you have "web vitals" checked at the top of the panel. – GrahamTheDev Mar 19 '21 at 12:18
  • yes, is checked :( But LS aren't displayed https://easycaptures.com/fs/uploaded/1378/3559128437.png – Evgeniy Mar 19 '21 at 12:25
  • Did it too. But there is nothing. Web Vitals data ends up where `Main` begins. You know, horizontal parts, named on the left : Network, then Web Vitals, then Frames, Interactions and Mail. – Evgeniy Mar 19 '21 at 14:40
  • 1
    I meant you didn't scroll the page to cause the links to collapse (so there weren't any layout shifts for it to show), not that you didn't scroll the performance trace . Run a trace, scroll the page while the trace is running, end the trace, then it will all show up! For clarity - not a page reload trace, just record the page once it has loaded (CTRL + E while on the performance tab) – GrahamTheDev Mar 19 '21 at 14:43
  • Hmm, indeed :) Now i see them. Layout shifts appear caused by my action (scroll) - but clicking on it the part of summary notice is `Had recent input: No`. – Evgeniy Mar 19 '21 at 14:48