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 ThemeForest.net 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)://domain.com/.css it can be http(s)://cdn.domain.com/.css. 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

Conclusion

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.

16 thoughts on “Using Autoptimize Plugin for WordPress Performance”

  1. Thanks for the great post about using Autoptimize for WordPress! I installed it on my site a few days ago and so far so good. It seems to be working better than some other plugins I’ve tried.

  2. Hi –
    I have installed this and have settings exactly as you have stated. Pls let me know if I need to include some script or use some shortcodes to activate this? My google page speed insights shows that CSS aggregation has not happened. I also do not see any place where I have a option to explicitly run this.

  3. I just installed this plugin on my site as well and it’s great! It really help with the Google PageSpeed Insight as well.

    I did enable the Inline and Defer at one point but seeing the site load progressively from unformatted to formatted was rather distracting so I turned it off

          1. thanks for the advice! guess I’ll be looking into that as well. by any chance, are you using Jetpack? I’m been trying to find out if Autoptimize works well with Jetpack. Frank (Autoptimize’s dev) isn’t using Jetpack so he can’t provide much info on that.

          2. yes I am using both. am about to activate more modules – seems like the sharing, stat, like modules may have issues (but those were dated months back) so yeap ^^

            btw, really like your site and its theme – clean and functional! :D

          3. ah didn’t realise this is on a different platform. I’m still new to WordPress. trying to cut down on the Jetpack bloat as well but it’s very useful

  4. Thanks for the article and the useful information in it. Just today i discover the plugin and i saw some improvents. I’m not sure if it’s right to go in to the advance options without having enough knowledge.
    Thanks again.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>