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. This guide will effectively increase your WordPress performance with a method that is the most compatible with a wide array of plugins and themes on the market.
Any additional caching mechanism you may implement afterwards will increase complexity and decrease compatibility, which is something you don’t want when you need to handle several blogs at the same time.
WP SuperCache
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.
Autoptimize
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.
For the best compatible optimization you need to enable the checkboxes as shown here. It is not recommended to enable the Also aggregate inline JS or the Force Javascript in <head>, as those 2 options are guaranteed to make a mess on several themes on the market, rendering the whole site wrong or having missing content due to JS errors. Try to leave those options disabled.
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.
Results
Now, with those plugins properly configured, let’s see the differences in performance. The following results are gathered from a Plesk server running under nginx, but it’s also safe to say that you’ll get similar performance increases regardless of the service you use.
Pingdom Tools
In the before and after screenshots you can see how the already fast site turned from a score of 91 up to 97. The total weight of the site has also decreased slightly from 1.9MB down to 1.8MB and the load time has also decreased from 1.83s down to 1.27s.
GTMetrix
Let’s see the situation on GTMetrix…
This particular test is also showing up great improvements. If we see the total load time there is a big difference, going from 7.3s total load time down to 3.2s. The size of the site has also decresased from 1.85Mb down to 1.81MB. Of course we could improve performance further, but it is not the purpose of this article. With just 2 plugins and minimal configuration, you should be able to reduce load time by half!
In Detail
Let’s see what Autoptimize did to the site…
The first line loads webfonts.js, optimized with a single call that weights no more than 5.9kb. After that you can see the autoptimize css minification of files along with those js files. Because we didn’t inline and combined them, there are several files loaded at start. We could reduce this static CSS & JS loading down to 2 or 3 files but as I explained before, it is not worth the hassle.
The result of this is a much faster site that will not only cache content to your readers but to your backend too. You will experience a faster frontend performance and a much faster dashboard operation with only 2 plugins and a minimal configuration in less than 2 minutes.
Wrapping Up
Having an optimized site is something we all want, but there are times you just want a fast site without all the hassle of having to manually check performance all the time. Plugins tend to break, specially after upgrades, but with this guide you can safely implement a set and forget configuration, without having to worry about it anymore.
I hope this guide is useful to you, tell us what you think and if you have any doubts, please, do not hesitate to write them down in the comments below.
Nice post. I was checking continuously tuis blogg annd I am impressed!
Extremmely helpful info specially tthe ast pat 🙂 I care forr
such information a lot. I wass lookming for this certain information for a very
lonng time. Thank youu annd best of luck.
Keepp thos going please, great job!