Although there are premium caching plugins available for caching and minifying, we’ve seen good results for clients using WP Super Cache for caching and Autoptimize for minifying JavaScript, HTML, and CSS.
Head here for our recommended WP Super Cache or WP Rocket settings, and keep reading for help on configuring Autoptomize.
Autoptimize: the basics
Autoptimize offers a nice set of default options that will work for many sites as well as more advanced settings if things need to be adjusted.
Before we get into the exact Autoptimize settings we recommend, a word of warning: Because it makes changes to how code is loaded and processed on your site, the plugin could cause functionality to change or break. If all else fails, disabling and then removing the plugin entirely should set things aright again.
Once you install the plugin, head to the settings page (Settings → Autoptimize). Select the following options:
- Optimize HTML Code?
- Optimize JavaScript Code?
- Optimize CSS Code?
Be sure to Save Changes and Empty Cache1 at the bottom.
What exactly is it optimizing?
By default, without changing any of the advanced options, Autoptimize changes how your site handles these files in three ways:
- It will “minify” the contents of JavaScript, HTML, and CSS files. This makes them smaller (and therefore quicker to download) without affecting the actions they take.
- It will combine all JavaScript files and most CSS files into one. Browsers can then download each file once rather than requiring multiple downloads for each type of code.2
- It will ensure the combined JavaScript file is the very last thing that a browser downloads and runs. This allows your content and imagery to download first and be usable earlier.
Read more about how optimization works here.
Autoptimize: advanced settings
For simpler WordPress sites, these defaults may be all you need, especially if you’re not using plugins that make heavy use of complex JavaScript. It should Just Work. However, if you’re using advertising plugins or others that use JavaScript to insert content into your page, you may need to dig a bit deeper into the settings. These advanced settings can also be helpful if your site is behaving oddly—items aren’t in the right place, interactive elements aren’t working properly anymore, or other similar issues.
Click the Show Advanced Settings button at the top of the Autoptimize settings page. You’ll see several new options underneath each section:
HTML options
We recommend that you leave the HTML comments box unchecked so that HTML comments are removed along with the spaces and indents. (Read more here.)
JavaScript options
The first thing you’ll want to try turning on is the Also aggregate inline JS? option. This will find some additional JavaScript and add it to the “combined” file provided by the basic settings. Sometimes changing this setting is necessary to allow particular coding styles to work. Be sure to Save Changes and Empty Cache at the bottom.
If your site is still not quite working properly, try enabling the Add try-catch wrapping setting. This could help with JavaScript files that would otherwise cause errors.
Finally, if things still seem to be “off”, you’ll want to enable the Force JavaScript in <head>? option. When you enable this option, you lose the third benefit mentioned above (delaying JavaScript until other files are downloaded). You’ll still see the benefit of reducing the overall file size, though.
If you know that there are certain JavaScript files that aren’t compatible with the optimizations that Autoptimize provides, you can exclude them from the optimization treatment by adding them to the Exclude scripts from Autoptimize listing. Doing this prevents those scripts from being modified, which may allow you to try using some of the more advanced options again.
CSS options
You’ll also see additional CSS options that could let you squeeze some more performance out of your site. You should proceed with some caution here, as most of the advanced optimizations require a deeper knowledge of your CSS. However, there’s one we recommend that should be fairly safe to enable:
CSS can include references to images files, often used as background images or decorations. A visitor’s browser will download each of these images separately. With the Generate data: URIs for images? optimization turned on, Autoptimize will find smaller images and convert them to a format that can be included within your CSS files, avoiding more expensive trips to your server to fetch data.
Another way to speed up your site is to have critical CSS (such as the styles for your title, navigation bar, and blog post copy) load first. You can automate the process with an additional plugin called Autoptimize criticalcss.com power-up (though we haven’t tested that add-on plugin). Autoptimize also provides a spot for you to specify this CSS manually by hand using the Inline and Defer CSS? option.
This and the remaining CSS optimization options require some care to use properly. Fortunately, the plugin author discusses all of these options, and others, in his excellent FAQ. We recommend starting there if you decide you want to get even more improvements from the plugin.
Joel is responsible for a variety of business management tasks, and for building internal tools for the team to use. He also uses his years of experience to help with hosting support, building software, and general troubleshooting.
Footnotes
- This cache is different from the one you might have from a caching plugin like WP SuperCache. Autoptimize provides its own cache for JavaScript and CSS that works in concert with plugins that cache HTML.
- This recommendation is slightly more complicated than it used to be now that HTTP/2 is much more common, including with Agathon hosting; see this FAQ item from the Autoptimize author for more information
One comment on “Recommended Autoptimize settings”
Thank you for the good information.