Optimizing CSS Delivery

How to Use the Autoptimize “Inline and Defer CSS” Option

AJ @ WpFASTER Blog 24 Comments

WpFASTER-Logo

Submits the Following:

Does Autoptimize’s new “inline and defer CSS” option have you baffled? WpFASTER to the rescue!

Does Autoptimize’s new “inline and defer CSS” option have you baffled? WpFASTER to the rescue!

As of Autoptimize 1.9.1

separator



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

separator


  • A.) Open Autoptimze (Settings –> Autoptimze), and tick the “Inline All CSS?” option (click all images below for a larger view):

Autoptimize CSS Options

  • 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

separator


  • 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).

CSS Path Generator 1

  • C.) Click the ‘Create Critical Path CSS’ button, and you’ll get something looking like so:

Critical CSS Path Generator 2

  • D.) Copy the generated CSS code.


Step 3: APPLY the Critical CSS

separator


  • 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:

Autoptimize With Code to Inline and Defer

  • C.) Click “Save settings and Empty Cache” at the bottom of your Autoptimize dashboard.

And that’s it! You’re good to go.


Troubleshooting

separator

“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!
AJ
Managing Partner
WpFASTER

atom small

Have a question or a comment? Need some help? Let us know below!

Comments 24

  1. Ashutosh Mishra

    How do I find the critical CSS for all the pages on my blog? For example, the critical CSS on homepage is different from critical CSS on a post, which is different from critical CSS from a page. Is there a way to merge all the critical CSS together?

    1. WpFASTER

      Hi Ashutosh,

      The trouble with merging critical CSS in that fashion is that you’ll end up with so much total CSS that the benefits of inlining it are largely negated.

      What you can do, however, is tick the Autoptimize “Inline and Defer” box, leave the text field empty, then enter critical CSS on a page-by-page and post-by-post basis using a plugin like Per Page Add to Head, making sure to use style tags and an ID that you exclude from Autoptimize.

      Hope that helps!
      AJ
      Managing Partner
      WpFASTER

      1. Nils

        Hi,
        you can also use the AO filter to include the extra critical CSS for each page, but what do you do if the critical css is different for EVERY page and EVERY post, meaning that I would have to use the filter for around 15 pages and 20 posts a the moment, increasing by 2/week??
        Thanks for your reply!

        1. WpFASTER

          Hey Nils,

          If you don’t want to do that sort of maintenance you’re sort of stuck with either A.) inlining everything or B.) leaving how ever many CSS files AO produces for you in the head of the document as render blocking (not necessarily a bad thing if it/they are lean regardless of lower grades on PSI).

          I’ll note that the easier option than using the applicable AO filter is indeed the Per Page Add to Head method exampled to Ashutosh. This way you have a text field right there on the new post/page, can quickly jump over to the CSS generator, produce your critical CSS and apply it. Publish and done. 🙂

          Be well,
          AJ
          Managing Partner
          WpFASTER

        2. David

          Hi, just wondering if you could give a quick rundown on how I could use AO’s filters to add some critical CSS to the posts pages?

      2. Jean

        Thank you AJ!

        Can you explain that last piece of advice: “enter critical CSS using Per Page Add to Head, making sure to use style tags and an ID that you exclude from Autoptimize.”

        I see the “Exclude CSS from Autoptimize:” field in the AO settings, and that it’s prepopulated with admin-bar.min.css, dashicons.min.css, which I see in my source code:

        You explained clearly how to get the critical CSS. But then, I’m lost with the “making sure to use style tags and an ID that you exclude from Autoptimize.” Please explain further… Thanks again 🙂

  2. anton

    wow this one work….thank you very much for this article,i used autoptimize for quite some time but before i never knew about “inline critical css” and before i apply this method page speed insight usually show me that i still have blocked css (auto optimize generated css combining)

    now my problem with page speed insight is only optimizing Google font…any tutorial for that AJ?

  3. Mario

    Hi, i followed your amazing tutorial but something is not working…. I enabled the “Inline all css” copied the code between and and pasted in the Jonas Ohlsson tool….generated the critical path css code copied and pasted in the Inline and Defer option….saved…but my blog preview in homepage (not above the fold) disappear…. What’s going wrong? Can you help? Thank you!!!

  4. Sasikumar

    You have advised to copy everything between the and ending into the CSS generator field. I also find a lot of CSS code between another one and ending . Should I be including the code between those too also ?

    Thanks

  5. Sasikumar

    You have advised to copy everything between the style type=”text/css” media=”all” and ending /style into the CSS generator field. I also find a lot of CSS code between another one style type=”text/css” media=”screen” and ending /style . Should I be including the code between those too also ?

    Thanks

    P.S: Sorry, I had to type that in a second time as the text between the left and right arrows didn’t show up!

  6. Rick Toney

    I read this article three times and also watched the YouTube video and had no change from implementing this procedure. 71 on mobile and 85 on desktop from the Google Speed test. My WordPress is run on Go Daddy’s WP platform. Maybe that creates an issue?

  7. Onelfri

    AJ, thanks for the information. I have tried what you outlined here and in the video and my pagespeed grade does not change. In fact it went down in some cases. Any thoughts? The only errors I am getting are Optimize CSS Deliver of the Autoptimize CSS file. Even after I extracted the critical CSS and inlined and deferred with AO.

  8. Michael

    I have a multi-site install using directories not subdomans. Only two domains, the main one and one other. The problem I have is that I find two “”. I don’t know if that is because of multi-site or something else. I don’t know how to proceed, please help.
    Thank you.

  9. Amit

    Actually when i followed this video, it has changed the look of my front page (analyticsastra.com). Please suggest the way to undo the changes of source code.

  10. Amit

    I was following the instructions posted by you in you tube video about using inline CSS feature of autoptimize which has caused me some problem. Please help me to recover it.

  11. Adrian

    Love your work! I have just implemented this today on a site that was registering mid 50s on Google PSI. Along with some other changes I have made, as well as getting rid of a social sharing plugin, it now is scoring in the 90s for both mobile and desktop. I have this running in conjunction with W3 Cache and so far everything is looking good. Thanks for the clear instructions!

    Now I just need to get all this good stuff implemented on my own website!

Leave a Reply

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