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).
Under the first section you need to enable the following options. I will also break it down into the additional subsections.
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) 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)
- (Check) Optimize HTML Code: Removes comments and whitespace from HTML code.
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.
This section contains additional optimizations and there are really only three options we are going to configure (the first three).
- (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.
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.