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.

Download URL: http://optimizingmatters.com/downloads/ao_critcsscom.zip.

Step by step installation instructions;

1. First of all make sure you have Autoptimize installed and working.
2. Download the Critical CSS Power-Up here
3. On your WordPress admin go to "plugins" -> "add new" -> "upload plugin"
4. Select the downloaded zipfile from step 2 and upload it.
5. Click on "activate"
6. Go to "settings" -> "autoptimize"
7. Click on the new "Critical CSS"-tab
8. Copy/ paste your license key from your criticalcss.com account in the license key field and submit
9. 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;

1. generate critical CSS for the most basic of pages (the one which has your basic theme look and feel)
2. activate "inline & defer CSS"-option in Autoptimize and paste the critical CSS from the previous step
3. generate cricital CSS for a your homepage
4. in the Autoptimize Critical CSS Power-Up create a new rule for conditional tag "is_front_page", adding the CSS from the previous step
5. 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)
6. 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
7. save your changes