Frank Goossens on "[Plugin: Autoptimize] Stuck with Defer CSS and Unused CSS Selectors"

Hi Frank,
I am working on increasing my site speed and I am stuck with two problems - 1)Defer CSS & 2) Unused CSS Selectors

Defer Css is seen on Google Pagespeed Insights. I tried different inline codes by using John Sebastian's online Critical CSS generator as mentioned by wpfaster and also Paul Kinlan's Bookmarklet. Now the problem is that sometimes I don't get that error for mobile but for desktop and sometimes vice versa. Do I have to somehow serve two different css files for mobile & desktop.

Secondly, My CSS file is very huge and contains many unused selectors. Dust-Me extension on firefox shows 17712 unused selectors while the Audit tab in Chrome shows 10883 rules (94%) of CSS not used by the current page.
How do I remove these unused styles?
Thank You..

https://wordpress.org/plugins/autoptimize/

My website is https://sprybag.com

1. I'm not 100% sure, this actually depends on how the critical CSS-generating software works. I'll ask Jonas about that

2. that's not something AO does I'm afraid, no idea how you should proceed for that. the problem is that selectors not used on page 1 might be used on page B or that code for browser X might not be used in browser Y.

frank

A good way to reduce the CSS selectors on a given page is only called the resources when needed. For instance, if you have BuddyPress installed then calling all the scripts and styles on every page would be adding a ton of unused selectors.

So you could conditionally load the scripts and styles to only load on BuddyPress pages.

Is there some way to conditionally load pages? @destac
@frank let me know what Jonas says.
Thank you for your quick replies..
Is there no way to load css asynchronously instead of deferring? That would help load Css and Html at the same time right, theoretically?

Is there some way to conditionally load pages?

https://wordpress.org/plugins/plugin-organizer/ might help with that

Is there no way to load css asynchronously instead of deferring? That would help load Css and Html at the same time right, theoretically?

with asynchronous loading you simply don't know when the asynced resource is in fact loaded/ available.

frank