Yes, correctly adding critical css on your site is guaranteed to reduce the First Paint, First Contentful Paint, First Meaninful Paint, and improve the Speed Index, that is to say, making your site show content more quickly while loading. These are the metrics that most strongly correlates with how fast your users perceive your site to be, what we believe are the most important performance metrics of all. They have a significant impact on SEO, lower bounce rates and improve conversions (for purchases, signups and more).
To use the critical css you need to add it to in the head tag of the page you generated it for. You also need to move all blocking external requests away from the head: both css and external script tags, and instead place them at the end of your page, before the closing body tag. For an illustration of how to include the critical css on your page(s), see below:
Is there any WordPress integration?
Autoptimize automated criticalcss.com power-up
Autoptimize criticalcss.com power-up is a fully automated critical css generation plugin for wordpress. It comes at zero maintenance — just set it up once and you’re done! It takes care of both generating the critical css and keeping it up to date, for your whole site. It integrates directly with Autoptimize, one of the best, free wordpress plugins for performance optimisations. Autoptimize makes all necessary changes to your site for benefitting from critical css performance improvements. Note: while you can use Autoptimize for free, without the power up, this only allows one critical css file for your whole site, which in practice does not work. 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.
This powerup plugin uses the criticalcss.com API which is charged at £5 per domain, per month (this fee is in addition to your monthly membership fee). Note: The critical css jobs this plugin makes via the API will show on your account on this site. If your plugin shows you a bad status for a critical css generation job, you can always check further details by coming back here.
Other WordPress integrations
WP Critical CSS is another fully automated wordpress plugin, using the paid API, but which does not integrate with Autoptimize. It requires a little bit more setup to get going.
It is also possible to use the legacy version of the AO powerup plugin. It is not automated, so only consider this if you know your site only has a few pages, and won’t requires updates or maintenance. (it’s a real pain manually maintaining critical css across a whole site - this is the whole reason why criticalcss.com was created in the first place!)
How can I get further help with performance optimizations on WordPress, including help setting up the automated plugin?
The most common issue is that your card is being declined. Make sure you have funds on your card, try another card, or ask your bank why the payment is not going through.
Is there a trial for Criticalcss.com?
Not officially, but if you cancel your membership on https://criticalcss.com within 30 days after signing up you will be eligible for an automatic refund, so you can have a trial that way.
Are your payments secure? I don’t want to give you my bank card details.
Yes, all payments are handled by Stripe and your bank card information never hits my servers.
Do you accept PayPal?
No, not at this time. Let us know if you want it though, and if enough people we’ll add it.
How does the tool work?
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.
Is there any API?
Yes. Requests to generate criticalcss via the API are priced at £5 per domain per month, and with it you can fully automate critical css generation. If you are on WordPress it’s recommended to anautomated plugin for this. If you want to use the API manually, to recieve the API documentation.