[Resolved] CLS high on desktop but can’t replicate it

[Laurentiu]

Hi everyone,
I switched to GeneratePress about a month ago and I think it is a great theme.
I have a small issue that I can’t fix, after I switched to GeneratePress I started to get notifications in Google Search Console about high CLS on desktop. When I run it I get everything green, I can’t see any CLS but Google says on 30% of visits there is a high CLS.
Here is a screenshot with GSC:
And the analysis is here.

The website is https://nutritioapp.com

Do you have any idea about what I can do to fix it?

[David]

Hi there,

could you try adding this CSS – then i can check the site to see if this resolves the issue:

.main-navigation ul ul {
  height: auto;
  left: unset;
}

[Laurentiu]

Thank you David. I added it and cleared the cache.
Have you been able to replicate the CLS on your end?

[David]

Well thats annoying – looks like the hover transform that floats the nav element up is also a CLS trigger – can you temporarily remove this CSS so i can check:

.main-navigation .main-nav ul li:hover > a {
    transform: translate3d(0, -3px, 0);
}

[Laurentiu]

It is done. Could you please check now?

[David]

Looks like the CSS have been cached – can you make sure its been removed and clear your cache plugins.

[Laurentiu]

I can see the css I added, but it was added inline in the html, not in a separated file. Could you see it now? I also cleared the caches again.

[David]

I need that CSS removed so i can test if that is causing an issue.

[Laurentiu]

It is removed.

[David]

not sure if its a cache thing bit i am still seeing this in Customizer > Additional CSS:

/* navigation hover effect */

.main-navigation .main-nav ul li > a {
	transition: transform 500ms ease-in-out;
}

.main-navigation .main-nav ul li:hover > a {
	transform: translate3d(0, -3px, 0);
}

Thats the last piece that seems to creating very minor CLS issues on the menu item with the submenu. Without that CSS the issue goes away.

Other than that the only other element i can see causing CLS is the chat bot option – when clicked it counts quite a large CLS reading.

[Laurentiu]

Thank you very much, David. Your support was amazing.
It is fixed now, I am looking for a solution regarding the chat.

[David]

Thats great to hear – glad to be of help!

[Author]

Posts