Download URL: http://optimizingmatters.com/downloads/ao_critcsscom.zip.
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