headtag of the page you generated it for. You also need to move all blocking external requests away from the head: both css and external
scripttags, and instead place them at the end of your page, before the closing body tag.
Yes. There are two major ways of using critical css with WordPress.
The fully automated WP Critical CSS plugin only requires you to install it — it then fully takes care of generating and keeping critical css up to date for your whole site. While this plugin is free, it uses the criticalcss.com API and is thus charged per domain, per month.
Note: The request this plugin makes will show on your account on this site. It’s a good idea to come here and check the status of this auto-generated critical css after you install wp-criticalcss, to validate that everything looks okay, and to fix any issues with potential errors in your original css.
If you only want to set up critical css for a few pages on your site and don't mind manually generating the critical css on this site, the recommended way is to use the Autoptimize critcsscom power up. Autoptimize also automatically takes care of the changes to your scripts and stylesheets to unblock the critical rendering path.
Note that while you can use Autoptimize for free, without the power up, this only allows you to use one critical css file for your whole site, which doesn’t work if you have any different layout between pages.
Note: When you enable Autoptimize, make sure you're disable any other plugins that concatenate, minify and otherwise optimize your css and JS as the plugins will otherwise clash and Autoptimize wont work properly.
If you don’t have a criticalcss.com account yet, you will be able to add on the Autoptimize critcsscom powerup during Sign up.
Yes, all payments are handled by Stripe and your credit card information never hits my servers.
It scrapes all CSS from the URL you provide, figures out what parts of that CSS are considered 'critical' for the URL. Some optimizations are then applied on to further reduce the size of the critical css. Finally the tool generates screenshots of the 'critical' section of your URL, with and without the critical css, to test that they look the same. If they don't the UI will notify you.