Archived topic
CLS Error: Avoid non-composited animations
3 replies · Started by Brett on April 28, 2022
Hello, when I run pages through my website into Pagespeed Insights - example here, - I receive 22 errors related to the "Avoid non-composited animations".
Here is what I'm seeing: https://prnt.sc/yk0jaY55VuP1
This appears to only be related to Desktop, but is causing my website to fail a Core Web Vitals check. I've waited over a month for Search Console to re-validate, but it is still showing that I am not meeting them.
Anything you can do to help me resolve this issue?
Hi Brett,
Seeing as these elements are already set to transition:none;, to check if a plugin is causing this, can you try temporarily disabling your caching/optimization, and the TOC plugin as well, and test you performance one more? Clear your cache before doing this, and it would also be good to take a back up of your site as well.
You may also try this suggestion by web.dev to promote elements that will have animation to their own layer: https://web.dev/stick-to-compositor-only-properties-and-manage-layer-count/#promote-elements-that-you-plan-to-animate
Kindly let us know how it goes. :)
Thanks Fernando.
I disabled the TOC plugin, and no change occurred.
However, when I disabled the WP Rocket plugin, the errors listed above went away. I'm obviously needing to re-enable that plugin, as now I have a host of other issues on mobile that were not an issue when the WP Rocket plugin was activated.
The main being one related to the content area: https://prnt.sc/tkTSZEnOic4V
Could fixing the new issue in the screenshot possibly help fix the issue that I opened the forum topic about?
Visually, another cause of CLS is how seemingly late the CSS is being loaded. Can you try disabling WP Rocket Optimized CSS as this setting may cause CLS?
Screen recording of CLS: https://share.getcloudapp.com/P8u1P4AJ
Reference: https://generatepress.com/forums/topic/slow-css-load/#post-1858435
If this doesn’t work, I would first suggest reaching out to WP Rocket as to which setting may cause “Avoid non-composited animations”. You could also try manually disabling each optimization settings by WP Rocket one at a time, and see which specific setting may be causing the issue.
Hope this helps! :)
