Using Autoptimize Plugin for WordPress Performance

A WordPress Developer recently suggested the Autoptimize plugin in a Facebook Group I follow. The plugin claims to “speed up your website and helps you save bandwidth by aggregating and minimizing JS, CSS and HTML.” I’ve implemented this plugin on several high-traffic WordPress websites and I’ve not ran into any issues. In all cases I have seen considerable performance improvements. There’s quite a few settings in the Autoptimize plugin so I will go through the options panel step by step.

HTML Options in Autoptimize

Optimizing HTML with Autoptimize removes line breaks, eliminates white space and removes comments. All three of these elements are not necessary for a production website and are, in almost all cases, recommended optimization tactics. Although the performance benefit is not as significant as JavaScript and CSS optimization, optimizing your HTML reduces the number of bytes transmitted and therefore reduces the payload which means quicker loading times and less load on your server.

autoptimize html options

Javascript Options in Autoptimize

The options I recommend for the JavaScript Autoptimize section in the Autoptimize plugin are shown in the image below. Activating the first check box “Optimize JavaScript Code?” combines all of the JavaScript files in your WordPress theme into a single file. The Autoptimize plugin then also minifies this file which is essentially the same as the HTML minification process I described earlier. The combined and minified file is served as the last request of your website so that everything else loads first.

autoptimize javascript options

Important: If your WordPress theme has special effects powered by JavaScript then your site may not load as intended. Some themes, for example, have JavaScript that makes your text fade or slide on entry. If you tell Autoptimize to load JavaScript last then this effect could be delayed which can cause an awkward user experience. If your website is not loading correctly then try to find the scripts responsible for the missing effects and list them in the “Exclude scripts from Autoptimize” input. If you opt to check the “Force JavaScript in ?” then make sure you also check the “Look for scripts only in ?” option.

CSS Options in Autoptimize

Most of the times you won’t have any issues using the default settings used for CSS in Autoptimize. It is more likely for JavaScript optimization to cause issues in your WordPress theme than CSS optimization. As with HTML and Javascript optimization, the option “Optimize CSS Code?” combines your themes CSS stylesheets into one, and minifies it, i.e. eliminates whitespace, comments and line breaks.

The option “Generate data: URIs for images” converts images that are smaller than a set size into data: URIs. This is essentially a super long string of gibberish that your browser interprets to be an image. The benefit of this method is that it eliminates HTTP requests which will immediately increase the performance and reduce the loading time of your WordPress powered website or application.

The “Look for styles only in ?” option is potentially necessary if your WordPress theme has many CSS stylesheets. There is a certain point, which depends on your users internet connection speed, where it’s more beneficial to have 2 medium-sized CSS stylesheets instead of 1 large CSS stylesheet. If you have more than 8 or 9 CSS stylesheets the I would recommend activating this option and performing some performance analysis tests with WebPagetest, an open source project supported and developed by Google.

I would not recommend activating the “Defer CSS loading” in almost all cases. Actually, I can’t really think of a scenario when you would want Autoptimize to do this (got one? let me know in the comments). Activating this option will make Autoptimize load everything else on your page, including images, before the CSS styelsheet(s) is requested. This results in your page being loaded in an unformatted style which will leave your site visitor irritated. Similarly, there is no real reason to inline all your CSS with the “Inline all CSS?” option unless you have less then a few dozen lines of CSS for your entire WordPress site — which is highly unlikely.

autoptimize css options

CDN Options in Autoptimize

Imputing a “CDN Base URL” in the Autoptimize plugin can further reduce your page load times and by extension increase performance. For example, instead of the CSS URL being http(s):// it can be http(s):// Serving your CSS and JavaScript over a Content Delivery Network, such as MaxCDN, has many benefits — which I won’t get into here.

autoptimize cdn options


Well, that’s all there is to the Autoptimize WordPress plugin. It’s really improved several medium and large-sized WordPress websites I maintain. I urge you to at least give the plugin a try and of course leave your comments and questions below.