Additional Information on CLS, particularly on mobile devices

Since my original issues were mostly solved, I am making a new thread, the previous conversation with the mod was here:
https://kriesi.at/support/topic/cls-content-layout-shift-troubleshooting-help-please/

For the past 2 weeks I’ve been struggling with Pagespeed. I installed AMP and it loaded fantastic, but then I lost almost all visitors. Disabling AMP has been an awful experience but it wasn’t until I lost viewers that I started looking into the issues of AMP. If you find this by searching, STAY AWAY FROM AMP! I was making steady gains on both visitors and Adsense revenue and both have dropped to almost nothing. I had AMP set up correctly.

So today, as I type this, I’m able to get my mobile score to 85 (entirely with Enfold + Litespeed), which results in a lot of “minor” issues showing up, and one of them is:
Avoid non-composited animations (14 animated elements found)
Animations which are not composited can be janky and increase CLS.

I did a search for Enfold + Avoid non-composited animations and found this page:

Which gave me a code to disable all animations on one page, so I tried that on just the home page (the page I’m testing on Pagespeed), and that took me from 14 to 11 animations. I’ll show a couple of the examples below, but first, I want to mention that two of the main errors still causing trouble on mobile is Remove Unused CSS, and Minimize Main-thread Work.

1 (this is the search icon in the header):
<div class=”avia-menu av-main-nav-wrap av_menu_icon_beside”>Unsupported CSS Property: border-bottom-color
Unsupported CSS Property: border-left-color
Unsupported CSS Property: border-right-color
Unsupported CSS Property: border-top-color

2 (all the fields in the widget mainchimp signup form):
<input name=”avia_1_1″ class=”text_input ” type=”text” id=”avia_1_1″ value=”” placeholder=”First Name”>
Unsupported CSS Property: color
Unsupported CSS Property: border-bottom-color
Unsupported CSS Property: border-bottom-left-radius
Unsupported CSS Property: border-bottom-right-radius
Unsupported CSS Property: font-size
Unsupported CSS Property: border-bottom-width
Unsupported CSS Property: padding-bottom
Unsupported CSS Property: padding-left
Unsupported CSS Property: padding-right
Unsupported CSS Property: padding-top
Unsupported CSS Property: margin-bottom
Unsupported CSS Property: margin-left
Unsupported CSS Property: border-left-color
Unsupported CSS Property: margin-top
Unsupported CSS Property: border-left-width
Unsupported CSS Property: border-right-color
Unsupported CSS Property: border-right-width
Unsupported CSS Property: border-top-color
Unsupported CSS Property: border-top-left-radius
Unsupported CSS Property: border-top-right-radius
Unsupported CSS Property: border-top-width
Unsupported CSS Property: background-color
Unsupported CSS Property: margin-right

And so on – it appears that these elements in the design are pulling css that doesn’t need to be pulled, or doing it incorrectly, and that’s causing the layout shift AND “Remove Unused CSS”.

This is something the developers are going to have to deal with, I’m not will to copy ALL CSS to my child theme and spend hours fixing it. That said, I’m sitting at 85 mobile and 90 desktop and I’m not done yet, so I can’t complain. GTMetrix is perfect all across.