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.
The best way to use critical css on WordPress is the Autoptimize critcsscom power up. It allows you to setup critical css for each of your pages inside Wordpress, as you are meant to. Autoptimize automatically moves your scripts and stylesheets in the necessary ways.
You can also use Autoptimize for free, without the power up. As the free version only allows one critical css file for your whole site I do not recommend using it for critical css integration unless your site only has one page, or uses exactly the same layout on all 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.