CLS on Menu

Hi there,

can you disable your cache plugin and then re-test the site – so we can check if its an optimization issue.

If there is still the problem, can you leave the cache disabled and the menu set to hover and let me know.

Hi David, thanks for replying. I have deactivated the Merge+Minify+Refresh Plugin than the primary menu can be changed to active by clicking than there is no CLS. When I set the menu to mouseover there is CLS every time when the mouse hovers over the menu. There is no change if the server-side cache is on or not. Now I have disabled the server-side cache and set the menu to hover that can have a look.

This is the CLS after the first loading: https://imgur.com/a/almY7ad
and it goes up when hovering over the buttons: https://imgur.com/a/87fjKId and https://imgur.com/a/1Ix6vbT and it’s increasing infinetely ??

Greetings Kathrin

Have you resolved this?

I just run the site through GTMetrix and PageSpeed Insights and both are showing CLS 0s.

Dear Leo, unfortunately No ?? PSI and GTMetrix Tests don’t Show the CLS but the Chrome Extensions for Web Core Vitals (Realtime measurement). It only Happens when hovering over the menu.

Greetings

When you hover over a menu with children, it is shifting the sub-menu elements into view. That is expected behaviour. If it didn’t shift the content the menus would not be visible. As this has no impact on PSI then you can ignore this.

David I know that this is the expected behaviour, but why it is counted as layout shift in the measurement tools for the chrome browser?

Greetings Kathrin

I done a bit more research on this – can you try adding this CSS to your site:

.main-navigation ul ul {
  left: unset !important;
}

Yes of course, should I place it somewhere special? Or just somewhere in the css. file? I put that code into the main.css under the css for the navigation, but unfortunately there is no change and when I look in into the console of devtools I see that: https://imgur.com/a/zePUviC

It seems that there are 5 elements causing a CLS about 0,111. Are they dome-related? Because there is no picture, no third-party-element and so on. It appears on the load. If you reload the site it is gone… https://imgur.com/a/MTLJ6fx

Greetings Kathrin

• This reply was modified 3 years, 9 months ago by topfgartenwelt.
• This reply was modified 3 years, 9 months ago by topfgartenwelt.

Add the code to your Customizer > Additional CSS.

Cool it works! But there is still a CLS about 0,111 right on the load of the site:

View post on imgur.com

It seems that there are 5 elements causing the CLS. Are they dome-related? Because there is no picture, no third-party-element and so on. It appears on the load. If you reload the site it is gone… https://imgur.com/a/MTLJ6fx

Greetings Kathrin

thats great – thanks for testing and letting us know!
Can you share another link to the site – your original link is not working for me.

Here is a new link: https://bzvqew.myraidbox.de/aussaatkalender-januar-7-gemuese-blumen-kraeuter – it seems that something is caused by the GPDR-Plugin. When I accept it, the CLS goes down to 0,056 but in the console there are still shown 5 files that cause that CLS: https://imgur.com/a/ROFoXv8 – is that CLS contributed to the dom? I have tried to disable all plugins but there is no change…

So the GDPR has some animation classes attached to it – not much i can do about that.

Back to the menus – first change the CSS to this:

.main-navigation .main-nav > ul > li > ul {
  left: unset !important;
}

As the current CSS is breaking the sub-sub-menus.

Now the other CLS is related to the sub-sub-menus – i can’t actually see a valid way of removing that when using the Hover method of displaying them.

I will change the GPDR in the next days, but there is still a weird thing. I have created a blank blog post = CLS 0,016, I added a featured image = CLS 0,018. I added text (1598 words including breaks and headings but no more images) = CLS 0,045. Why does text with a standard font increases the CLS so much??

The new CSS increases the CLS when the submenus are hovered ??

Greetings Kathrin

I have disabled the hover function now to reduce the CLS-Problem. It’s ok: https://bzvqew.myraidbox.de/schneckenalarm

Can I use GeneratePress with Lazy Loading and WP Rocket? I have read a few threads about this but can’t find any answer.

Greetings Kathrin