CLS on Menu

Apologies your last reply slipped through our system. We’re looking into ways to fix the hover UL issue… its complex as we have to consider touch devices – but we’re working on that.

Yes you can use WP Rocket and Lazy Loading with GP.
It does take careful configuration.

Unless you know how to write Critical CSS – i would advise that you DO NOT use the Optimized CSS delivery option in WP Rocket as this may lead to CLS.

Unfortunately I don’t know how to write Critical CSS ?? At the moment I’m using merge+minify+refresh-Plugin. Here I also would have the possibility to exclude certain paths. But what paths I should exclude?

These paths are marked as render blocking:

…dist/public-modern.css?ver=7.0.0(bzvqew.myraidbox.de)
…build/style-index.css?ver=2.0.0(bzvqew.myraidbox.de)
…css/scriptlesssocialsharing-style.css?ver=3.1.6(bzvqew.myraidbox.de)
…components/comments.min.css?ver=3.0.2(bzvqew.myraidbox.de)
…components/widget-areas.min.css?ver=3.0.2(bzvqew.myraidbox.de)
…css/main.min.css?ver=3.0.2(bzvqew.myraidbox.de)
…css/front.min.css?ver=5.6.1(bzvqew.myraidbox.de)
…css/style-min.css?ver=1.1(bzvqew.myraidbox.de)

Thanks that you will investigate the problem with the hover menu? Will you also take a look to the CLS about 0,05 that is connected to the header on every loading?

Greetings Kathrin

Render-blocking CSS is usually necessary if you don’t want to increase CLS issues.

However, you should use a plugin to combine those files into one file (like Autoptimize) to reduce the number of render-blocking files.

Some of those can certainly be moved to the footer (comments.min.css for example), but it’s likely not worth the hassle.

We’re working on the hover sub-menu issue.

At the moment I have tried Merge+Minify+Compress and have excluded the main.css the rest of the files are combined into one file. It seems it works: https://bzvqew.myraidbox.de/gruene-tomaten-nachreifen

Thank you very much!

No problem!

So you agree that it works?

Greetings Kathrin

And what is about the CLS in the header-grid-container: https://imgur.com/a/gXKf0Tx or here https://imgur.com/a/DE0w0sb? It appears when a site is loaded for the first time… Will you inspect that too? There is no difference if Merger+Minify+Refresh is activated or not. The CLS in the header-grid-container stays the same.

Greetings Kathrin

• This reply was modified 4 years ago by topfgartenwelt.

It seems that the CLS happens always when in the sidebar an image is loaded? As you can see here: https://imgur.com/a/SWGP2uu Could there be a connection between the header-grid and the image in the sidebar?

Greetings Kathrin

Hi there,

Have you resolved this? I’ve checked your site on webpagetest.org and gtmetrix and they show CLS of 0.

Let us know.

Hi,

no I haven’t solved the problem, because I can’t really fetch the problem at all. I only know you can’t measure it with PSI, webpagetest.org and gtmetrix because the layout shift happens to late for this tools at 160055 ms (https://imgur.com/a/U8T9Lpp) thats out of the timepanel of that tools. But you see it in ChromeDevTools and the Chrome Extensions for Web Vitals (https://imgur.com/a/P9TkuoO).

It is connected to that frame: https://imgur.com/a/JLLFGO7 and to that task: https://imgur.com/a/vnfFrep. And it only appears when you click at the first time on a link of my blog, if you refresh the already loaded page the CLS is gone.

In Chrome DevTools I have measured it as follows:
Open: https://bzvqew.myraidbox.de/gruene-tomaten-nachreifen
Open DevTools in Chrome Browser
Throttle Speed in Network down to: 50 kb/s download, 13 kb/s upload and 75 ms latency
Go to performance tab
click on the featured image in the small screen you see on your right to start the loading of new page
click quickly to recording the load and wait

The result is always the same: Layout Shift at about 160062 ms. The weird thing is that the score of the layout shift is always different, but always the cause is found in the header-grid-container. Why?

Greetings Kathrin

It seems that the .inside-header.grid-container is moving around:

Here are the images (moved from, moved to positions) connected to the layout shift of the .inside-header.grid-container:

from: https://imgur.com/a/JbJQMB5 –> at first the container is a little more on the right site
to: https://imgur.com/a/aUte9W8 –> after rendering the container is moved a little bit more left

from: https://imgur.com/a/F4vcpxL –> the same as above
to: https://imgur.com/a/tt2LbeV

from: https://imgur.com/a/6JPRHLE –> the same as above
to: https://imgur.com/a/OBjTdJ6

I have tried to add .inside-header.grid-container {flex-shrink: 0;} but there is no change. The CLS stays at about 0,07 for that site.

Has someone any idea?

Greetings Kathrin

I have tested the site over a few times with a throttled network (as per your settings) and reduced CPU performance. Followed your steps and performed multiple other performance monitoring tests. Enable Rendering: Layout Shifts. Checked for late loading/delayed execution of scripts….
But aside from the know sub-menu issue i was not able to trigger any CLS.

I ran over 10 minutes of tests and can’t see any issue or cause for this. Note: All tests were done in Incognito so no browser caching or extensions were enabled.

I have tried it again also incognito and without browser extension and couldn’t measure any CLS too. I don’t understand why I see the CLS with the browser extension on. What is causing this?

Greetings Kathrin

Some browser extensions will alter the DOM tree … you should be able to see if there are any scripts/CSS that are being loaded by those extensions.

I have seen one of that scripts, yes! But what use should have such browser extensions for web core vitals when they manipulate the outcome?

Greetings Kathrin