In this post I will show an easy way to inline the minimal CSS for above the fold optimization in WordPress. Using two plugins this will accomplish an excellent above the fold optimization without extra work at the same time make the loading time of your website faster overall.
Once that is set don’t worry about the amount of CSS because this actually will inline alot of unneeded CSS for any particular page or post.
Now onto the good stuff… We need to limit the different CSS that will be available for Autoptimize to inline on any particular page or post.
Lets start with the front page of your WordPress website using WP Asset CleanUp!
Goto the settings menu and select Home Page under the above mentioned plugin. Now follow the instructions to get the listing of scripts and CSS that is loaded on that page. Simply remove any CSS that is loaded and not used on that page. For example, I unload CSS for my widgets because I don’t use any widgets on the front page of my website. So you can see the process now right?
Many style sheet assets can be unloaded “everywhere” as well, then make exceptions for the pages and posts that you want to include them on.
So now when you empty the cache in Autoptimize and check the source, there will only be the CSS inlined that you didn’t remove!
This is just a brief summary for the reduction and optimization of CSS in WordPress using Autoptimize and WP Asset Clean Up plugins. Thanks for reading!