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 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:
Autoptimize: advanced settings
Click the Show Advanced Settings button at the top of the Autoptimize settings page. You’ll see several new options underneath each section:
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.)
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.
- 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