Exclude CSS from Autoptimize

Hi @andrewn88,

First some more information about web vitals and Complianz; https://complianz.io/about-web-vitals/

You can try excluding; /plugins/complianz-gdpr/assets/css/cookieconsent.css

regards Aert

Thanks Aert. This didn’t have an impact, unfortunately. I tried adding the .cc-window {transition:none!important;} CSS too but no impact either. If you have any other ideas, please do let me know! The problem is specific to when I have ‘inline and defer CSS’ activated on Autoptimize, using their critical css plugin to inline above the fold CSS on each page. It seems to do something weird to the Complianz box, making it scrunch up in the top left of the screen before jumping to the middle.

Andrew

Hi @andrewn88,

Manipulating the loading of CSS might cause CLS issues, which is not that surprising. This would be very specific for every website as well.

I’m not that familiar with criticalcss.com, can you edit the critical CSS after generating it?

regards Aert

Thanks Aert. I’ll contact the plugin makers and see if they have any ideas. Appreciate the help.

Hi again Aert. Sorry to open this back up. I’ve heard back from the plugin makers and this is what they said:

This happens because the cookie banner is not part of the HTML, but instead inserted into the page by JavaScript. The critical css generation only sees the original HTML of the page, but you can configure it to also include the styles for this cookie banner:

Go the Autoptimize > CriticalCSS > Advanced Settings > Force include CSS selectors,

and then you need to fill in the text box with the CSS selectors that are needed for the cookie bar styles.

You can start with this value:

//#cc-window,//.cc-window

I think that covers the layout for the cookie banner itself, but I also think you need to find and add a few more classes to get the banner perfectly styled.

So my question is, do you have a list of CSS selectors that I should definitely add in addition to the ones he suggested? I don’t want to mess anything up.

Really appreciate the help!

Best,

Andrew

Hi @andrewn88,

You could add .cc-revoke as well, it is used for the ‘manage settings’ block, used to re-visit the banner. That should be all.

Let us know if you have any further questions. Good luck!

Kind regards,
Leon

Thanks so much!

Hi @andrewn88

Great to hear that your issue is resolved! Could you tell us what you think of the plugin or the support by casting your Review here? We’d love to hear your feedback!