This is documentation on the legacy, non-automated critical CSS power-up for Autoptimze. The new, fully automated "Autoptimize Power-UP" is now available at the plugin repository. Unless you know what you are doing, you should use that plugin and not the one below.

Download URL:

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 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