Archived topic
CLS because header is shifting?
17 replies · Started by Kathrin on December 1, 2021
Hi,
since today I have a new problem on my desktop site. My Web Core Vitals extension measured that the header is shifting. I don't know why because I didn't any changes in WP Rocket except excluding the featured image from lazy loading. What can be the problem? If I check the site in the Chrome Developer Tools it seems that somethin in the main menu is the cause for it. What can I do?
Greetings Kathrin
Hi there,
i just ran several tests on your site, including the home page and the latest 2x posts.
And none of them are reporting any CLS issues
Hi, its me again. I still get the information that the main-menu is causing a CLS-failure, also in the Google Developer Tools. Since a few days the problem is also shown in the Page Speed User Experience Report: CLS 0,02%.
Greetings Kathrin
Hi there,
i really wouldn't be concerned with a 0.02 CLS value, its well within the recommended Web Dev guidelines.
I know, but what is causing that 0,02%? The Devtools tell me that is the main menu. Why is it causing that CLS?
Greetings Kathrin
Hi Kathrin,
That 0.02s you see is the window of time where the cached CSS of the site hasn't fully loaded yet.
You visibly see it if you have fairly young eyes when you clear browser cache and then refresh the page.
There's a very very quick time window where the menu looks compressed and then expands to the styled version. This is the 0.02 seconds time loading for the CSS of the menu.
This is quite tricky to address. You can try merging some stylesheets to see if it improves but it may be possible to make it even worse.
Dear Elvin, thank you very much for your answer. Is it possible to improve that compress / expending of the menu in one of the next updates? Can be WP Rocket the reason for it?
Greetings Kathrin
Its not a theme issue that causes CLS. It only occurs when optimizations are being made to the site that cause CSS styles to be loaded incorrectly.
To be honest i am having trouble finding any issue on your site.
I ran 6 performance tests on 6 different posts using a throttled network and none of them reported any CLS at all.
If i run a Page Speed Insight test there is 0 CLS in the Lab Data Results.
The 0.02 only shows on desktop and is from the Origin Summary, which is an Accumulation of all data from all posts/pages on the site.
This accumulation could be data collected from the numerous performance tests you run on your site....
It really is not something to be concerned about and as Elvin mentioned making other optimizations could cause greater problems.
Thank you very much!
You're welcome
Unfortunately I have to open that topic again. At first the CLS on Desktop caused by expanding of the main-menu was only about 0,02% but now it has increased again and goes up to 0,05 and sometimes more. I didn't do any changes concerning the CLS management in WP Rocket. Maybe you can tell me what CSS file is causing that CLS.
Greetings Kathrin
I ran a few tests on various posts, and my developers tools did not report any CLS occurence. And the PageSpeed Test shows no change in the Origin summary.
Where are you seeing this ?
Dear David, I can see the growing CLS in the Chrome User Report, my local Browser Extensions and when I test with the Chrome Developer Tools under the tab performance --> experience and it is always connected to the main menu. Page Speed Insights shows 0 - that's right. But unfortunately it isn't 0 :(
Greetings Kathrin
I tested quite a few posts in Chrome Dev tools, and none of them are experiencing any CLS.
If you can share a link to a post that you see it on then ill test again.
Hi, it doesn't matter which post I open the CLS related to the main-menu appears on every post.
But a link for example: https://www.topfgartenwelt.com/buecher-ueber-schwangerschaft-und-geburt
--> The CLS here is 0,055%
https://imgur.com/a/zMlJPlj
https://imgur.com/a/5CVavBr
--> inspected with Chrome Devtools
https://imgur.com/a/C9D26DD
Greetings Kathrin
