Archived topic
CLS issue when using WP rocket's critical CSS generation feature with GP and GB
1 reply · Started by Dusan on October 5, 2021
Hi guys,
My client's website uses generatepress pro and generateblocks pro. I shared the URL to an example page.
We need to use WP rocket's critical CSS feature because it speeds up the website a lot.
The website has CLS issues on the desktop only.
When we disable the CCSS the issue is resolved immediately. But, the web site's speed and other metrics like LCP suffer greatly so we have to use the CCSS.
Is there anything that can be done about this issue? WP Rocket offers the ability to provide fallback CCSS so that it's not autogenerated. Since the google console shows exactly which elements experience CLS, can we somehow get their CSS and input it in the fallback CCSS and avoid the CLS? This is something that should happen natively but for some reason, the WP rocket generates improver CCSS so that some elements move around in the article introduction area..
I know that this may not be a question for you guys but maybe you can help out because you know the GP and GB CSS better than anyone since you created it.. So, I was wondering if something can be done about this issue. Thank you!
Hi there,
the major issue won't be the GP CSS - you have a lot of styles being loaded by core blocks and other plugins. To work out what CSS for each page and for each device size is required is a huge task and not something i would bother with as that can lead to a higher CSS overhead vs Browser Cached CSS files. Better that you assess the actual performance issues and address them directly.
One issue is see is WP Rocket automatically adds display=swap to google fonts when its Optimized CSS delivery is enabled, which is why theres so much reflow... you could address that with WP Rocket, or try loading the fonts locally or for best performance switch to system fonts.
Other issue you need to address is the Logo is an SVG and has no viewbox attribute so its loading without width and height attributes. You can either fix the SVG or use the snippet provided here to add the missing attributes.
