This is documentation on the legacy, non-automated critical CSS power-up for Autoptimze. The new, fully automated "Autoptimize CriticalCSS.com Power-UP" is now
available at the wordpress.org plugin repository. Unless you know what you are doing, you should use that plugin and not the one below.
Step by step installation instructions;
First of all make sure you have
Autoptimize installed and working. Download the
Critical CSS Power-Up here On your WordPress admin go to "plugins" -> "add new" -> "upload plugin"
Select the downloaded zipfile from step 2 and upload it.
Click on "activate"
Go to "settings" -> "autoptimize"
Click on the new "Critical CSS"-tab
Copy/ paste your license key from your criticalcss.com account in the license key field and submit
Congrats, you now installed the critical css power-up, you can now start creating rules for critical CSS!
How to configure your critical CSS once the plugin is installed;
generate critical CSS for the most basic of pages (the one which has your basic theme look and feel)
activate "inline & defer CSS"-option in Autoptimize and paste the critical CSS from the previous step
generate cricital CSS for a your homepage
in the Autoptimize Critical CSS Power-Up create a new rule for conditional tag "is_front_page", adding the CSS from the previous step
add additional conditional tag-based rule as needed (i.e. if you have parts of your site with a different look and feel, e.g. for WooCommerce-pages)
if you have specific pages that have a different look & feel, generate the critical CSS for those and create path-based rules to add that CSS as exceptions to the previous conditional-tag based rules
save your changes