Exclude CSS from Autoptimize

  • Resolved abn48

    (@andrewn88)


    5 years, 4 months ago

    Hi,

    The plugin is causing a poor cumulative layout shift score on Pagespeed Insights when combined with Autoptimize CSS optimisation. Would you be able to tell me what to put in the ‘Exclude CSS from Autoptimize’ box so that I can exclude the plugin’s CSS from Autoptimize?

    Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Aert

    (@aahulsebos)

    5 years, 4 months ago

    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

    Thread Starter abn48

    (@andrewn88)

    5 years, 4 months ago

    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

    Plugin Author Aert

    (@aahulsebos)

    5 years, 4 months ago

    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

    Thread Starter abn48

    (@andrewn88)

    5 years, 4 months ago

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

    Thread Starter abn48

    (@andrewn88)

    5 years, 4 months ago

    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

    Plugin Contributor Leon Wimmenhoeve

    (@leonwimmenhoeve)

    5 years, 4 months ago

    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

    Thread Starter abn48

    (@andrewn88)

    5 years, 4 months ago

    Thanks so much!

    Plugin Contributor Mathieu Paapst

    (@paapst)

    5 years, 4 months ago

    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!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Exclude CSS from Autoptimize’ is closed to new replies.