Eliminate Render blocking CSS?

Generally you can’t impact when and how your plugins are loading their own stylesheets. Messing around with that will usually mean you can never update because it’ll reset all your work.

That’s the trade off of using plugins – you lose control over some things that impact your performance, accessiblity, and validation. Without astronomical budgets and time to build your own versions, you generally have to accept this.

Where you can tackle this task is in your theme, either your custom theme or the child theme of something you’ve installed.

The article you referenced is right in the fact that you could split up your sheets into very specific use cases in order to only load what styles you need, but you’re right in that is a pretty ridiculous task once you’ve already got a large number of stylesheets. You literally do need to take the time and copy and paste each item into the appropriate sheets and link to them accordingly. I’m sorry, there isn’t a quick fix for that.

But even so, developers don’t usually work that way. We usually write our stylesheets in something called SASS and organize them by the area being styled rather than the use case (ie. media queries go with the element styles, not in a seperate media queries file), and then compile ALL of our sheets into a single stylesheet that gets streamlined and loaded, using Gulp or Grunt (for example). You can do the same with javascript files. This is the approach I recommend.

It does take a higher level of skill to impliment something like this. If you’re familiar with version control, command line, and using node.js, or think you could figure it out, then I would encourage you to give it a try. Here’s a tutorial on getting started.