Autoptimize minifies and concatenates all scripts and styles. And it moves styles to the page head and scripts to the footer.
More info: https://wordpress.org/plugins/autoptimize/
Things to keep in mind
- Autoptimize does not require a paid subscription
- We recommend using an alternate setup (see below) to prevent the need for Critical CSS. But we can attempt to use (Autoptimize criticalcss.com power-up) for Critical CSS if you prefer.
Alternate Setup to Avoid the Need for Critical CSS
This setup entails leaving the theme’s styles render-blocking, so Critical CSS is not needed.
Benefits:
- Prevents the need to use an additional plugin such as Autoptimize criticalcss.com power-up.
- Avoids “jumping” on page load due to the use of incorrect Critical CSS. Auto-generated Critical CSS isn’t always reliable.
Drawbacks:
- Produces an additional render-blocking warning, but it may not have a significant impact on scores.
- JS and CSS files must be combined
Autoptimize, Main Settings (for Developer Use):
– Optimize HTML Code
– Optimize JavaScript Code
– Aggregate JS-files
– Optimize CSS-files
– Aggregate CSS-files
– Inline and Defer, leaving the CSS text area empty
– Exclude CSS from Autoptimize: theme’s styles
Additionally, a filter must be added to the theme to prevent the theme’s styles from being minified or deferred by Autoptimize.
add_filter(‘autoptimize_filter_css_minify_excluded’,’__return_false’);
As from AO 2.4 excluded JS/ CSS are minified if the (filename indicates the) file is not minified yet. You can disable this with these filters.