3

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?

Lighthouse Report GSC Report

2
  • 3
    With a time to interactive of 18 seconds you have bigger issues than CLS. Ideally the page should be interactive in under 3 seconds. At 18 seconds I expect that about half your visitors are leaving in frustration without waiting for your page to become interactive. Nov 10, 2021 at 10:38
  • but the reality is opposite on google search console, I receive only CLS issue, other issues are resolved and passed validation. When you go live link you'll see that page load is super fast... not 18sec as lighthouse says
    – K H
    Nov 10, 2021 at 10:49

1 Answer 1

4

Here's your CLS

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

example of cumulative layout shift

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.

largest contentful paint example

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.

render blocking scripts and stylesheets affecting page speed

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.

3
  • 2
    Always appreciate your expertise Mike. I read your posts just to learn.
    – Trebor
    Nov 11, 2021 at 23:36
  • @Trebor +1 bc you're awesome! Nov 12, 2021 at 5:40
  • Thank you tho, that means a lot to me. Nov 12, 2021 at 5:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.