[Support request] Cumulative Layout Shift

[Jesse]

Hello,

I’m using WP Rocket. I opened a ticket with them regarding this issue, but I figured I would ask here as well.

When the “Optimize CSS delivery” option in WP Rocket is turned off, I have zero CLS. However, when that option is turned on, my CLS is consistently between 0.50 and 0.60.

The problem is, I cannot leave “Optimize CSS delivery” turned off because when I do, other metrics in PageSpeed Insights increase. So, I need to leave it turned on, but then how can I fix the CLS issue?

The option is currently turned on now, so you will see the CLS issue if you run it through the PageSpeed Insights tool. From the screenshots the tool provides, it appears it might be an issue with the header and menu, but I’m not sure.

I’m only concerned with the mobile results.

Best regards,
Jesse

[David]

Hi there,

Critical CSS requires the correct configuration.
WP Rocket provide this article on setting it up for mobile and desktop:

https://docs.wp-rocket.me/article/1266-optimize-css-delivery

[Jesse]

Hi David,

When I check my /wp-content/cache/critical-css/ path, I see two CSS files for everything. For example:

category.css
category-mobile.css

As far as I can tell, I’ve already got my WP Rocket settings configured as outlined in the article that you linked me to.

Best regards,
Jesse

[David]

We see a lot of CLS issues related to automatic Critical CSS generation using a plugin. A lot of the time users disable the option or opt for generating their own critical CSS – ( i think WP Rocket provides a Fallback field for that )…. might be worth waiting to see what WP Rocket has to say

[Author]

Posts