Autoptimize is one of the most popular speed optimization plugins for WordPress.
However, the plugin can be complicated to setup and is known to cause issues when configured incorrectly. Here are the ideal settings you should use to set up Autoptimize correctly. These settings are less likely to cause issues (notably avoiding issues with cache size).
JavaScript, CSS, & HTML Settings
Under the first section you need to enable the following options. I will also break it down into the additional subsections.
JavaScript Options
Under the JavaScript options you’re going to want to enable the following options.
- (Check) Optimize JavaScript: This option enables minification of Javascript files.
- (Check) Aggregate JavaScript-Files: This option combines all of the Javascript files, moves them to the footer, and adds the defer attribute. By default, JQuery is excluded from the combine functionality to avoid common errors such as “JQuery is not defined.”
Those are the only options you should check in the JavaScript section. Do not check “Aggregate Inline JavaScript.” This is the most common option that leads to the size of your cache growing.
CSS Options
Under the CSS section, you are going to want to enable the following options.
- (Check) Optimize CSS Code: This option enables minification of your CSS files.
- (Check) Aggregate CSS-Files: This combines all of the CSS files and loads them in the header. By default dashicons are ignored, but you can remove them from the exclude CSS section.
- (Check) Aggregate Inline CSS: This option, when checked, is less likely to cause cache issues when compared to the aggregate inline JavaScript option. If your cache size starts increasing too quickly, then you should un-check this option as you may have dynamic CSS. This should be safe for MOST websites.
- (Check) Generate Data URIs For Images: This option will convert background images to encoded versions. This can resolve issues such as “Use CSS Sprites” in GTMetrix and can cut down on the number of requests. If you’re looking to further optimize your images, we have a guide on when you should use PNG’s vs JPEG.
You should never enable the following options.
- Inline all CSS
- Inline and Defer (Advanced option that can cause pages to load in a strange fashion when not properly configured)
HTML Options
- (Check) Optimize HTML Code: Removes comments and whitespace from HTML code.
Images
This section has the optimize images functionality and while it can reduce page weight, I often times find the “optimize images” functionality leads to much slower image delivery speed. What this means is even though the images might be smaller in size, their download speed is much slower, therefore I don’t recommend this option.
I do recommend enabling the following:
- (Check) Lazy-Load Images: Reduces the request count and page weight on initial load.
Extra Settings
This section contains additional optimizations and there are really only three options we are going to configure (the first three).
Google Fonts
- (Check) Combine and Preload in Head: Reduces the request count and loads the fonts with font display swap. Additionally, it will make them non-render blocking, which will improve your paint times. It will also allow your text to render before the font is downloaded to avoid flash of invisible text issues.
- (Check) Remove Emojis: I recommend enabling this functionality, unless you’re actively making use of emojis on your website.
- (Check) Remove Query Strings from Static Resources: Helps appease testing tools like GTmetrix, Google PageSpeed Insights, and Pingdom. It also improves cacheability of files on your website.
Closing Thoughts
This should help you improve the load time of your website and allow you to avoid issues with the Autoptimize plugin. If you’re looking for a professional optimization service feel free to contact us via our contact form.