How to improve CLS. Chrome Lighthouse shows GREEN but GSC shows RED?

Question

I have no Idea what is going on. The lighthouse on different devices shows my page CLS 0.002, but when I go to my Google Search Console -> core web vitals the CLS is in RED ZONE >0.25.

I understand that GSC core web vitals depends on total user experience on my website. But the thing is that LightHouse shows direct opposite of every metrics of GCS Web Vitals.

I use WordPress. The Theme is developed by myself, it is super light. Not using any framework to run options or check "slowing down" conditions. But I believe there is a room for a little improvement to make CLS <0.25

Is there a way to catch what parts are causing CLS to get higher number?

Answer 1

Here's your CLS

I'm throttling with a 3g connection so you can clearly see it.

That image is also contributing to your LCP. You need to serve a scaled image for mobile devices (don't use a plugin), and explicitly specify a height and width. I would also preload this image. It's already a WebP so you're doing that right.

I recommend using WebPageTest instead of Page Speed Insights - that's how I was able to catch what was contributing to your CLS.

Your site does have several other loading issues contributing to your issues. Stephen rightfully points this out in the comments.

Your problem is a function of many small things adding up to create a bigger problem. For one, there are a lot of render blocking scripts and stylesheets that ought to be gone through and prioritized. Preload (or preconnect if external) anything required for your above the fold content. Defer anything that can be loaded later.

Optimizing speed can be tedious and extremely frustrating. But you should do everything that the audit tools say. After several goes you'll start to figure out what's absolutely necessary and what's not.

Also, browser/server caching will help your field data - in the eyes of Google, that's all that really matters. Lab data (page speed insights) can be misleading.