Do you want to know how to inline your critical, above-the-fold CSS so as to optimize CSS delivery? Does Autoptimize’s “inline and defer CSS” option have you baffled? WpFASTER to the rescue!
Do you want to know how to inline your critical, above-the-fold CSS so as to optimize CSS delivery? Does Autoptimize’s “inline and defer CSS” option have you baffled? WpFASTER to the rescue!
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.
Troubleshooting
“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.
- Take our course.
- Have us do it for you!
All the Best!
AJ
Managing Partner
WpFASTER
Have a question or a comment? Need some help? Let us know below!
RECENT POSTS
How to Defer or Asynchronously Load JavaScript in WordPress Without a Plugin
Everything You Know About Website Speed Is Wrong: Myth #1: “Load Time is the Most Important Performance Metric”
Comments 50
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?
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
Thank you!
Glad to have helped, Ashutosh. 🙂
AJ
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!
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
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?
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 🙂
ID that you exclude from Autoptimize.?? what do you mean by it
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?
There’s a TUT in the works for exactly that, my friend. 🙂 No ETA on it though.
In the meantime, give the Google Webfont Optimizer plugin a spin, making sure to add “WebFontConfig” (no quotes) to the Autoptimize .JS exclusion list. 🙂
Be well,
AJ
Managing Partner
WpFASTER
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!!!
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
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!
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?
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.
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.
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.
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.
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!
how it works in drupal
VERY helpful – thank you so very much! We followed this exactly and it worked perfectly.
Hello, How moves all inline css after Metadata (Title, Description, Viewport, etc)
Thank you, I’ve been using the autoptimize plugin. after installing, my website get speed increases.
HI, When i paste my css code for critical path generate. It says your css charter is more than our limit. Plz help me
Hi Abdul,
I have the same problem. Did you solve it already? I planning it to copy the all the css to word and copy paste it part by part to critical path generator.
Let me know,
Emile Leus
hi, when i try critical css why not use
thank you
My pagespeed results went from 75/89 to 91/97. Pretty good for 5 minutes of tinkering, thanks for the guide!
Haii
Thanks You, VERY helpful –
thank you so very much!
We followed this exactly and it worked perfectly.
Thanks so much. That did the trick. bumped up from 66 to 87 for mobile and 84 to 93 on desktop. Excellent tutorial!!
Current version is 2.2.2 and doesn’t have those CSS options.
How are people commenting a week ago saying it worked for them?
are they installing 1.9.1?
Hello,
Click the Show Advanced Settings button.
Marcus T.
Client Support Rep.
WpFASTER
When I am looking for: in the page source, I can’t find it so I don’t know what to copy?
This is the best settings of Autoptimize, i used it and experienced great!
Thanks You so much.This is really very helpful.
I use Auto Minify in Cloudflare, What are the settings in Autoptimize?
Hi, I tried this method, but got stuck at the message saying ‘Your CSS is too long’ which prevented the code from being extracted.
Haha, in other words, mate, you are proverbially screwed.
Does the code which needs pasting ever need to be updated? If plugins or themes or wordpress updates, for example?
Oops, before anything else, I should add that my ‘Reply’ was to myself (out of dry humor), not at your good self.
Yes, I have no idea what the code contains – whether it’s subject to change or not. The site content is static though.
The problem appears to be that there is simply too many lines of code to be able to process it through the link provided.
i used Autoptimize bút has problem “Defer unused CSS” . How can fix it?
I have the same problem, you need to do it manually. Use Google Chrome DevTools to find out unused CSS,
How are you sanitizing the critical css? I see a lot of people concerned about this, but I have yet to see anyone with a good way to protect against XSS attacks.
Excellent tutorial!!
Seems great, however, is this still relevant?
Oops, before anything else, I should add that my ‘Reply’ was to myself (out of dry humor), not at your good self.
Yes, I have no idea what the code contains – whether it’s subject to change or not. The site content is static though.
The problem appears to be that there is simply too many lines of code to be able to process it through the link provided.
Thank you for this article. It really helped me boost my page speed score. My mobile was stuck below 55 and I couldn’t increase it and I didn’t know that Autoptimize had the feature to paste the critical CSS code. The website to grab the critical CSS code also worked for me. My mobile speed shot up to 87 from 55 and desktop from 94 to 99 in Page Speed Insight by reducing render-blocking CSS. Bookmarked!! Thanks!
I tried this, however I also hat the problem that my CSS is too long. I then generated the CSS in two steps.
However my page speed dropped from 49 to 11.
Very helpful – thank you so very much
Thank. You sir
Now my wordpress website run more faster than ever it was. Css compress and in line remove helps me