Archived topic
CLS issue with menu, logo, avatar and post-image
5 replies · Started by David on February 16, 2021
Hello,
i am receiving warnings from google webmaster, that my posts are producing high CLS values.
They name the featured-post-image as a cause, so i
- started an chrome inkognito window,
- used the sizes for an iPhone 5 and
- reduced the bandwidth to 10k
so get the layout shift visually presented.
I recorded this for you and me:
https://sinnstiften.biz/2021-02-16-CLS
in the video i can see 3 changes:
1. first the menu has 2 line, then both are combined into one
2. there seems to be an avatar-image in the upper left corner, which will be moved after a while
3. after all of these the post-image makes a shift up. (i think, this is what google measured)
How can this effect be reduced or eliminated?
You can run your own tests on https://sinnstiften.biz/flipchart-gestalten/
Thank you,
David
Hi there,
This looks like a prime case of Critical CSS and deferred Javascript files being the problem.
Can you check the site without the cache/optimization plugins enabled?
Hi David,
i have temporary deactivated WP Rocket (inluding the cloudflare CDN).
The general performance metrics of course look bad now, but the CLS is 0.
And i cant see a layout shift above the fold as i slowed down the network and watched.
Whats next?
So Critical CSS generation is not something that should be left to the automatic options of WP Rocket. They provide a troubleshooting guide here:
https://docs.wp-rocket.me/article/1321-critical-css-issues-fouc
Likewise they provide info here on deferring JS files.
Funny, by deactivating the WP Rocket feature "optimize CSS" the CLS sinks to 0. And all of the other performance values are still good.
i will leave it this way and wait, what google webmaster will show me.
Thank you
Glad to hear that!
