CODEWITHSUNDEEP
google-search-consolelighthousepagespeed-insightsweb-performancecore-web-vitals
M A
M A

Reputation: 43

Search Console and PageSpeed Insights shows 0.2 CLS on mobile but when running Lighthouse it shows 0, how to identify the issue?

I noticed that Search Console shows and average CLS of almost 0.2 for mobile and the same thing is shown in PageSpeed Insights. When I try to identify the issue running Lighthouse, it shows however 0 CLS on mobile.

How do I identify what is causing this high CLS since more and more pages in my Search Console are reported as having problems?

Upvotes: 1

Views: 105

Answers (1)

Barry Pollard
Barry Pollard

Reputation: 46040

This is covered in our Optimizing CLS guide:

Identify post-load CLS issues

Disagreement between the CrUX and Lighthouse CLS scores often indicates post-load CLS. These shifts can be tricky to track down without field data. For information on collecting field data, see Measure CLS elements in the field.

The Web Vitals Chrome extension can be used to monitor CLS while you interact with a page, either in a heads-up display, or in the console alongside details about the elements that have shifted.

As an alternative to using the extension, you can browse your web page while recording layout shifts using a Performance Observer pasted into the console.

After you set up shift monitoring, you can try to replicate any post-load CLS issues. CLS often happens while the user scrolls through a page, when lazy-loaded content loads fully without space reserved for it. Content shifting when the user holds the pointer over it is another common post-load CLS cause. Any content shift during either of these interactions counts as unexpected, even if it happens within 500&nbspmilliseconds.

For more information, see Debug layout shifts.

Common issues I see are:

  • Lazy loaded content that does not reserve space so is only seen on scroll (which Lighthouse does not do).
  • Poorly implemented sticky menu bar solutions which shift the whole page a bit when snapped into space.
  • SPA pages which had shift issues later in the application but are no shown on the initial loaded URL.

Upvotes: 0

Related Questions