Cannot reproduce the CLS problem with either the Web Vitals web extension or web-vitals.js

115 views
Skip to first unread message

Yevgeny Pavlovets

unread,
Feb 28, 2023, 11:18:00 AM2/28/23
to web-vitals-feedback
Hello,
I had problems with the CLS score in the desktop version of the site. Google search console wrote that there were more than 250 pages with CLS greater than 0.25.

In order to find the reason, I opened the browser console. I pressed “command + shift + p” and selected “Show core Web Vitals”. With this tool I checked all the pages on the site. Next I checked every block on the page. There were many elements that gave an offset. All the blocks that gave an offset were corrected. After the fixes I waited about 28 days. And the performance in google search console got much better. First the number of problem pages went down to 90, then to 13, and then to zero. But now the problem with CLS has appeared again. Google search console writes that there are more than 250 pages with CLS greater than 0.25 in the desktop version of the site.

I tried checking the pages with the “Show core Web Vitals” tool from the console. But I couldn’t find a single block that gave an offset using it.

I also tried looking for the CLS problem with the “Web Vitals” extension. But I also didn’t find any block that had a CLS problem.
Locally, I also tried using the web-vitals.js library. With it I also couldn’t find any block which would have an offset.
Can you tell me if you have a suggestion why I have problems with CLS for more than 250 pages?

An example of problematic URLs:
https://pixelplex.io/blog/machine-learning-applications-in-business/
https://pixelplex.io/blog/cbdc-complete-guide/
https://pixelplex.io/blog/machine-learning-in-manufacturing/

All the problematic url’s belong to the same category, the blog. And in terms of code, all problematic 250 pages are the same component.

Michal Mocny

unread,
Feb 28, 2023, 12:04:06 PM2/28/23
to Yevgeny Pavlovets, web-vitals-feedback
Sounds like you've made a lot of improvements already, well done!

I took a quick look, and it looks like your site is an SPA, which means that the URL changes that you see as you navigate are not really "new navigations" as far as Chrome considers for web vitals today (see https://web.dev/vitals-spa-faq/).  There is work ongoing to help split vitals up by SPA routes to make it easier to find the source of layout shifts by route URL, rather than initial navigation URL.  But, for now, be aware that shifts from anywhere on your site will affect those URLs, if you are soft-navigating to them and loading within a "single page".

I did sport some shifts as I navigated around your site: the SPA navigations themselves would sometimes be layout inducing.  For example, if I navigate from https://pixelplex.io/blog/machine-learning-applications-in-business/ to https://pixelplex.io/work/artificial-intelligence/ under slower network conditions and certaint viewport sizes...

What I find useful is to measure events like layout shifts in real time, not just the overall score, using a JS snippet like this, pasted in the console:

let cls = 0;
let totalCls = 0;
let sessionCls = 0;
let sessionDeadline = 0;
let sessionGaptime = 0;

new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.hadRecentInput) {
      // These are shifts that get ignored... but still report to console
      console.log(`[ !CLS, with hadRecentInput ] Current: ${entry.value.toFixed(4)}`, entry);
      continue;
    }
    if (sessionCls == 0 ||
        entry.startTime > sessionDeadline ||
        entry.startTime > sessionGaptime) {
      sessionCls = 0;
      sessionDeadline = entry.startTime + 5000;
    }

    totalCls += entry.value;
    sessionCls += entry.value;
    sessionGaptime = entry.startTime + 1000;

    if (sessionCls > cls)
      cls = sessionCls;
   
    console.log(`[CLS] ${cls.toFixed(4)}, Current: ${entry.value.toFixed(4)}, Total: ${totalCls.toFixed(4)}`, entry);
  }
}).observe({type: 'layout-shift', buffered: true});


Good Luck



--
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/506c8e2a-e500-4339-ac4d-8dfa00ab9594n%40googlegroups.com.

Barry Pollard

unread,
Feb 28, 2023, 12:30:43 PM2/28/23
to Michal Mocny, Yevgeny Pavlovets, web-vitals-feedback
I also had a look and can reproduce some pretty big CLS when hovering over the menu in desktop mode. But weirdly not consistently and couldn't figure out why.

It seems more prevalent by settingly throttling to Slow 3g and hovering over the menu as it's still loving.

Hovering doesn't count as a "user-interaction" so doesn't get the 500ms leeway that a click would. But even then, the fact it doesn't generate CLS consistently shows this menu mostly isn't CLS generating. So just need to figure out why that is the case.

And the fact this menu doesn't exist in same form on mobile (and obviousl;y doesn't hover on mobile) is another good indicator that this is the culprit since CLS is only showing on desktop.

FYI, my prefered method when trying to debug this is to install the Web Vitals extension and log CLS to the console (or use a snippet like Michal gave to do the same), and then click around and watch the console to see if CLS is generated.

Yevgeny Pavlovets

unread,
Mar 2, 2023, 8:52:48 AM3/2/23
to web-vitals-feedback
Michal Mocny, thank you very much for your answer. By setting the speed to 3G I was also able to reproduce the problem when going from https://pixelplex.io/blog/machine-learning-applications-in-business/ to https://pixelplex.io/work/artificial-intelligence/. I read an article that there is an experimental version of Web Vitals that takes SPA navigation into account and might help with my problem in the future. It sounds great.

Yevgeny Pavlovets

unread,
Mar 2, 2023, 8:53:40 AM3/2/23
to web-vitals-feedback
Barry Pollard, thank you very much. I did find a problem in the menu, which even with a great internet connection shows a large offset. When I go from “Success stories” to “Company” I get a CLS that goes to 1.9. Thanks to you, I was able to find this and have already fixed it(so far only in my local version). Thank you so much!

Michal Mocny

unread,
Mar 3, 2023, 12:07:21 PM3/3/23
to Yevgeny Pavlovets, web-vitals-feedback
Given that you have a great grasp of these things already, if you are finding it difficult to chase down those last remaining user journeys that lead to CLS in the field, perhaps you can consider a strategy like this, either using the web vitals reporting tool or your own field analytics tool using the web-vitals.js attribution data.

Good luck moving forward!

Yevgeny Pavlovets

unread,
Mar 6, 2023, 3:05:06 PM3/6/23
to web-vitals-feedback
I have looked at web-vitals-report and I would like to say that it is a very cool tool. Thanks for telling about it. I think he can help me a lot.

Barry Pollard

unread,
Mar 6, 2023, 3:36:39 PM3/6/23
to Yevgeny Pavlovets, web-vitals-feedback
One point that should be noted is that the web-vitals-report currently only works with Universal Analytics (UA) and not GA4, and UA is due to be deprecated soon. We've looked at supporting GA4 for this, but the work is not trivial so at present this.

However, the same principal of collecting the attribution data, and feeding it back to Google Analytics (or any other analytics provider) still applies. You just need to export it to your own dashboard. There's details here on how to do this with BigQuery and Looker Studio rather than the dedicated dashboard: https://web.dev/vitals-ga4/

Yevgeny Pavlovets

unread,
Mar 7, 2023, 2:56:16 AM3/7/23
to web-vitals-feedback
Thank you for telling me about it

Tony “Tiggerito” McCreath

unread,
Mar 7, 2023, 8:10:26 PM3/7/23
to web-vitals-feedback
I developed a GA4->BigQuery->Looker Studio report at about the same time the web.dev team documented their process on how to do it. Here's an article explaining how to set it up.

Yevgeny Pavlovets

unread,
Mar 8, 2023, 5:15:31 AM3/8/23
to web-vitals-feedback
Thanks for the link to the article
Reply all
Reply to author
Forward
0 new messages