Optimize WordPress with WP Super Cache and Autoptimize
There are a tons of ways to improve performance in WordPress. I had made several articles on how to improve performance but there are times when you just want good performance with minimal overhead, that is, the least amount of plugins and a safe method that can be easily recreated to other blogs and sites you own. In this article I’m going to show you the best and safest method to implement a very good caching and optimization for WordPress with minimal overhead. That is, with just 2 plugins.
This optimization will give you an active HTML caching plus CSS, JS minification and Google Fonts optimization. Those two plugins are WP SuperCache and Autoptimize. Leran how to Optimize WordPress with WP Super Cache and Autoptimize (tutorial below)
WP Supercache has always been my favorite. This is no coincidence, it’s not that I’m fond of Super Cache or that I didn’t tried other mechanisms, it’s that WP Super Cache has proven time and time again that it’s one of the safest and most stable caching plugins on the market. While there are tons of good caching plugins like WP Rocket, Fastest Cache, Comet Cache and so on, each and every one of them has proven to be incompatible with some theme or plugin in some way. WP SuperCache is the best caching plugin when compatibility is your main objective.
One thing is to make a plugin work, another thing entirely different is to keep it functional for long. Updates in WordPress, plugins and themes are the main reasons why caching plugins stop working. They need help from their developers to keep being functional, which is something Automattic has done all these years.
Once the plugin is installed, here is how we are going to configure it:
The first thing we are going to do is to enable/disable this checkboxes. We would want to uncheck the Don’t cache pages for known users as this method will improve backend (Dashboard) performance several times. If you experience weird behavior, this is the only checkbox option you should enable.
The Cache HTTP headers with page content is also necessary for optimal performance. The 304 Not Modified option will enable browser caching. We are not going to use the “supercached static files for known users” though as that could break dashboard funcionality on some themes.
There are times when WP Supercache could break functionality because of caching but we are making sure this does not happen. As we will want the most compatible caching implemented we will check the Clear all cache files when a post or page is published or updated.
This will complete the setup for WP SuperCache. Once you’ve done it you can set and forget, this configuration is guaranteed to work without you having to touch a thing afterwards.
For HTML optimization, CSS, JS minification and Google Fonts we are going to use Autoptimize.
Before installing this plugin, a word of warning: Although this guide is teaching you how to implement a safe caching and optimization mechanism to implement on all your blogs, Autoptimize is not a beginner’s plugin.
If you use the options strictly set in this article you won’t find any problems whatsoever, but messing with it could lead to several problems and even render your site unresponsive. Handle this plugin with care, setting anything outside of the configuration provided here is done under your own responsibility.
The good thing about Autoptimize is that if you know how to properly configure it, you won’t find anything better. The configurations explained here are set and forget and a guarantee that you’ll have a much faster site with minimal overhead.
Enabling the Optimize CSS Code is the only option you need. The Also aggregate inline CSS, Inline and Defer CSS and Inline all CSS options are also a guarantee to fail on several themes. Try to leave those disabled. You can, of course, get a little push in performance if you aggregate and inline those, but there is a high chance of abnormal behavior if you do. Please keep reading to find out why I suggest you do not play with it.
Under the Misc Options, keep those 2 enabled as converting those scripts into static files will surely make your site faster with no negative impacts on compatibility.
Now, under the Extra options you will want to remove emojis (if you don’t use them) as that will speed up loading. The removal of query strings will also have a nice speed boost without affecting functionality.
Now onto Google Fonts. Combining all of them with webfonts is one of the best techniques to reduce queries and will make a difference, specially if you like to play with the fonts on your designs. There are no problems that I know of by using webfonts.js and is a wonderful method that will remove several queries and will make your site load faster, for sure.
Why I keep inline JS, CSS and Combine Files disabled
There is a reason to keep those options disabled. Autoptimize likes to play with JS and CSS minification by doing what is called “an inline and combine” of files. Autoptimize will then add each JS and CSS file into a “chain” that will later be rendered as single files. This will save at least 4 to 8 queries to your site, depending on the complexity of your theme by combining all separate files into fewer JS and CSS files, but there is a catch…
If you have a dynamic site like a news magazine, this technique could possibly bring your hosting storage to its knees. Autoptimize is not known for auto-deleting old static files and dynamic sites tend to modify its contents very often. Each time you change contents on a magazine site, there is a high probability chance that your CSS and JS files get modified too. When that happens, Autoptimize will create a new set of chains for those files and new copies of minified/combined files. The situation is then worsened by visits from your readers. If your site is visited frequently, the internal cache for Autoptimize could grow from 1 or 2Mb up to 2GB in less than 24hours with as much as 64.000 static files or more, as Autoptimize will not delete new copies of combined files.
Because each time content is modified there is a slight chance that JS/CSS files be modified, Autoptimize will create new copies to play safe and not break the site. Because each reader could be reading a different version of the site, Autoptimize will also create new copies for each, just to be sure… you can begin to see why this could have serious consequences.
For a real static website that will not receive new content, it is generally safe to enable combining, but there is too much of a risk of having abnormal caching behavior with those options enabled for me to even suggest you enable them, hence, I recommend that you do not play around with combining on this plugin at all.