Inline above the fold CSS using Autoptimize with Wp Asset Cleanup

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.

Screenshot of Google Pagespeed Insights faq
Screenshot of Google Pagespeed Insights faq

 

First thing to do is get the plugins, Autoptimize and WP Asset CleanUp. Once you have these installed you can get started by going into the settings menu for Autoptimize.

Screenshot of the CSS options in Autoptimize
Screenshot of the CSS options in Autoptimize

 

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.

Screenshot of WP Asset unload everywhere
Screenshot of WP Asset unload everywhere

 

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!

Leave a Reply

Your email address will not be published. Required fields are marked *