As of Autoptimize 1.9.1
Frank Goossens, WordPress plugin author of Autoptimize, answers to and effectively deals with the conundrum that has vexed most WordPress webmasters and website owners since Google began to recommend eliminating render blocking CSS for ‘above the fold content’. As of Autoptimze version 1.9.1, you too can now get rid of that pesky Page Speed Insights warning about render blocking CSS.
“Buuut… How’s this damn thing work?!?”
When Frank first announced that he would be integrating an inline and defer CSS option into Autoptimize, I knew instantly that most people would have a hard time with it. After all, the critical rendering path, itself, is difficult enough to grasp, let alone what actually constitutes “above the fold content” … let alone what actually constitutes ‘content’! (a debate belongs here, methinks, regarding the often inseparable nature of form and function; when style and substance are indistinguishable from one another. …But I digress).
Step 1: IDENTIFY All of Your Site’s CSS
- A.) Open Autoptimze (Settings –> Autoptimze), and tick the “Inline All CSS?” option (click all images below for a larger view):
- B.) Then, click “Save Settings and Empty Cache” at the bottom of your Autoptimize dashboard.
- C.) In another browser tab with an empty cache, open your homepage’s source code (right click –> open source).
- D.) Your HTML will (likely) be huge now. Copy everything between the <style type=”text/css” media=”all”> and ending </style> tags.
Step 2: EXTRACT the Critical CSS
- A.) Open this Critical Path CSS Generator and enter your site’s homepage URL into the field under #1 (“URL”).
- B.) Paste the code you copied from your source into the field under #2 (Full CSS).
- C.) Click the ‘Create Critical Path CSS’ button, and you’ll get something looking like so:
- D.) Copy the generated CSS code.
Step 3: APPLY the Critical CSS
- A.) Go back into Autoptimize, and tick the “Inline and Defer CSS?” option.
- B.) Enter the code you copied from the Critical Path CSS Generator into the field under the Inline and Defer CSS option box. Like so:
- C.) Click “Save settings and Empty Cache” at the bottom of your Autoptimize dashboard.
And that’s it! You’re good to go.
“It ain’t workin’, yo.”
- Make sure your browser cache is cleared.
- If you are using caching plugins, disable them while configuring the Autoptimize Inline and Defer CSS option; or, purge them after you have completed the configuration.
- Using CloudFlare? Enter Development Mode prior to configuration, or, purge your CloudFlare Cache after.
All the Best!
Have a question or a comment? Need some help? Let us know below!