‘Inline and Defer CSS Above the Fold’ is one of the most seen suggestions when you analyze a WordPress website with tools like Google’s PageSpeed Insights. In this post I will show you a simple (ish) way to make this work.
First go and get the great WordPress plugin “Autoptimize” found on the official plugins site here: https://en-ca.wordpress.org/plugins/autoptimize/
Use the following settings to get started and to find the CSS you will need for the next steps;
Now you will save the settings and then open your website in a new window (prefer private or incognito) and right click – View Source.
Select and copy all of the inline CSS that is generated from using the Autoptimize “Inline all CSS” from your source code. You will find the css in between the style tags.
<style type="text/css">some css here</style>
Open up a new tab and goto Critical Path CSS Generator and in the box #2 paste the CSS from your source code.
For box #1 find a page on your site that has most of the widgets and comment forms etc. For myself I used a single post page that has comments enabled and my sidebar widgets displayed.
After the CSS has been generated copy that CSS back to the Autoptimize settings under “Inline ‘above the fold CSS’ while loading the main autoptimized CSS only after page load”.
Your done! No that’s me being sarcastic, you will have to fine tune the css for you website and fix any display problems. If you stick with it and test and tweak you can get a great boost in the rendering speed of your website like this:
Good luck with inlining the critical CSS in your WordPress website!