Archived topic
Weird CLS issue
7 replies · Started by Narender on August 24, 2021
Hey folks, I have quite a simple site where I use GeneratePress Theme with WP Rocket.
Site URL: https://www.apssb.in
For the last few weeks, I have been noticing weird CLS issues on my site's posts. The CLS isn't there in every test but it occurs once in every 2-3 tests for sure.
All URLs are marked as Good in the Google Search Console for the Desktop but in the Mobile section, each of the internal pages has the CLS issue and is marked as "Needs Improvement".
Basically, I am unable to find the root cause of this CLS and can't get it fixed on my own. On Mobile, the "entry-title" seems to be the culprit to me but I don't know why it's happening and what's the possible fix:
Mobile CLS issue: https://www.webpagetest.org/vitals.php?test=210824_AiDc6X_5ae41218eced44bac9d41e35a41bfda7&run=4&cached=0#cls
Desktop CLS issue: https://www.webpagetest.org/vitals.php?test=210824_BiDc85_2eefdc6647e4da063c95cb351d8dc383&run=1&cached=0#cls
Please don't suggest Disabling the critical CSS from WP Rocket as it will affect Core Web Vitals and makes CSS render blocking. Also, we need to keep in mind that the site responds without any CLS issue 3 out of 5 times on average.
Maybe we can add some fallback critical CSS to fix it?
Mobile Test: https://www.webpagetest.org/result/210824_AiDc6X_5ae41218eced44bac9d41e35a41bfda7/
Desktop Test: https://www.webpagetest.org/result/210824_BiDc85_2eefdc6647e4da063c95cb351d8dc383/
Hi there,
Does the issue happen when WP Rocket is disabled?
GP's structure is static (doesn't change) so I'm not sure why it would happen once every 2-3 tests.
The CLS isn't there when I disable WP Rocket. Also, it goes away when I disable WP Rocket's "Optimize CSS" Option.
Anyway, I have found a way to remove the CLS in my case. Instead of the external file for Dynamic CSS, I have selected the Inline Embedding and there is no more CLS after this change.
I am having the same issue... Both desktop and mobile CLS need improvement. When I disable the Optimize CSS Delivery it goes away but where is the option to inline embed the CSS?
Would appreciate the help.
Graham
Hi Graham,
It's at customizer > General.
https://docs.generatepress.com/article/general-settings-overview/
Hope it helps!
Thanks, Ying. So it seems the inline embedding was already enabled. I have the following options enabled under the Customizer> General
-Inline Embedding
-Flexbox
-SVG
-Cache Dynamic CSS
In WpRocket I still have Optimize CSS Delivery turned off. I imagine there is still some kind of conflict when turned on? Anything I can do here?
This is with the Optimize CSS Delivery turned off on my staging site: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fdropdeskstage.wpengine.com%2Fblog%2Fhome-office-ideas&tab=desktop
Glad you've found a solution Narender!
Hi Graham,
Please open a new topic for your question as Narender has marked this one resolved.
Thanks!
