Inline Critical CSS in WordPress with Autoptimize

‘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.

PageSpeed Insights CSS Delivery Webpage
PageSpeed Insights Optimize CSS Delivery


First go and get the great WordPress plugin “Autoptimize” found on the official plugins site here:

Use the following settings to get started and to find the CSS you will need for the next steps;

Screenshot of Autoptimize CSS Settings
Screenshot of Autoptimize CSS Settings


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”.

Screenshot Autoptimize Above Fold Options
Screenshot Autoptimize Above Fold Options


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:

PageSpeed Insights result for
PageSpeed Insights result for


Good luck with inlining the critical CSS in your WordPress website!


One comment on “Inline Critical CSS in WordPress with Autoptimize

Leave a Reply

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