Aside from Autoptimize, we recommend installing
WP Fastest Cache as well.
Meanwhile, follow the instructions for Autoptimize below:
1) Go to Plugins > Add New
2) Search for "Autoptimize" > Install > Activate
3) Go to Settings > Autoptimize
4) Choose to turn on "Optimize Javascript Code", "Optimize CSS Code" and "HTML Options"
Troubleshooting
If your site doesn’t function normally after having turned on Autoptimize, here are some pointers to identify & solve such issues using “advanced settings”:
- If all works but you notice your site is slower, ensure you have a page caching plugin installed (WP Fastest Cache or similar) and check the info on cache size (the solution for that problem also impacts performance for uncached pages) in this FAQ as well.
- In case your blog looks weird, i.e. when the layout gets messed up, there is problem with CSS optimization. Try excluding one or more CSS-files from being optimized. You can also force CSS not to be aggregated by wrapping it in noptimize-tags in your theme or widget or by adding filename (for external stylesheets) or string (for inline styles) to the exclude-list. In case some functionality on your site stops working (a carroussel, a menu, the search input, …) you’re likely hitting JavaScript optimization trouble. Change the “Aggregate inline JS” and/ or “Force JavaScript in head?” settings and try again. Excluding ‘js/jquery/jquery.min.js’ from optimization (see below) and optionally activating “Add try/catch wrapping“) can also help. Alternatively -for the technically savvy- you can exclude specific scripts from being treated (moved and/ or aggregated) byAutoptimize by adding a string that will match the offending Javascript or excluding it from within your template files or widgets by wrapping the code between noptimize-tags. Identifying the offending JavaScript and choosing the correct exclusion-string can be trial and error, but in the majority of cases JavaScript optimization issues can be solved this way. When debugging JavaScript issues, your browsers error console is the most important tool to help you understand what is going on.
- If your theme or plugin require jQuery, you can try either forcing all in head and/ or excluding jquery.min.js (and jQuery-plugins if needed).
- If you can’t get either CSS or JS optimisation working, you can off course always continue using the other two optimisation-techniques.
- If you tried the troubleshooting tips above and you still can’t get CSS and JS working at all, you can ask for support on the WordPress Autoptimize support forum. See below for a description of what information you should provide in your “trouble ticket”
