If you, like me, want to have the best possible performance out of your WordPress installation without having to endure tons of incompatibilities you may as well read this new article in which I’m going to explain why the vast majority of solutions to speed up your site won’t usually work as you expect, or will leave your site in an unstable state all in the name of improving performance.
It is a fact that you can improve performance by having all sorts of tweaks to your WordPress installation, but it is also a fact that the more you add the more problems you’ll run into.
The solution to this eternal everlasting problem of speed is to get to the basics. There are a set of things we can implement on the server-side but this article will not cover those. I will concentrate the efforts on the WordPress side, with as few plugins as possible and evading those that tend to do tons of stuff.
Before starting with the tutorial, I will give you a simple set of rules you should follow:
- The best way to reduce initial latency is a fast server/service. Plugins won’t magically improve your site overnight.
- The more plugins you add, the more trouble you’ll run into.
- Use simple plugins (with only 1 function) instead of using plugins that do a lot of stuff.
- Implement one by one, refresh your site, try again, add a new plugin, refresh your site and so on..
This is a basic set of rules that will allow you to improve your site performance without creating additional problems for your WordPress installation. I have nothing against big commercial plugins but this tutorial is not for them. Aren’t you tired of reading speedup guides and implementing them and then finding out that your site is faster but completely broken?, read on then !
Since the basic rule to have a fast site is to have a fast server, I’m going to create this guide based on a site hosted on a WordPress Dedicated Service which does have a very good response time. I registered the results using Pingdom Tools and it’s the only tool you’ll need for this tutorial since we are wanting to improve response time / load time, not Google approved rules for PageSpeed Insights which, contrary to what people think, don’t have such an impact on the actual speed of a site.
The first result thrown on Pingdom Tools is the total load time, that means the actual time the site took to load on a client’s computer. The amount of requests a site does is also an indication of how fast or slow it will be, normally speaking, sites with request 50 to 90 request are fast while site with more than 150-300 request are considered to be somewhat on the slow and very heavy to load.
Pingdom Tools allows us to see the actual First Time to Byte. This means the actual time the server took to give us the first byte of our website. This parameter is usually linked to how fast the server actually is. The more basic your hosting service is, the more time it will take to respond. A total response time of 529ms is actually quite good but take into consideration that PHP is being executed server-side and the web server has to pass that information from PHP to the web server.
Let’s get to work!
For this guide I’m going to show just how much a site can be improved with so little as only 4 plugins. We will only need these, be sure to install them before proceeding with this tutorial.
- EWWW Image Optimizer (for lossless image compression)
- Fast Velocity Minify (for JS, CSS & HTML minification and reordering)
- WP-SuperCache (for static HTML generation)
- Remove Query Strings from Static Resources (self-explained)
That’s it, 4 plugins will give you a much faster site, provided your hosting solution is adept enough.
EWWW Image Optimizer
The first plugin in the list will take care of image compression. This is what is normally called lossless compression because images won’t loose detail or quality, they will be stripped of useless data such as capture conditions or EXIF data. EWWW comes with it’s own set of tools that will be automatically installed.
The plugin will report back in case some plugin is missing. Just be sure to check the Plugin Status message. If you see All Clear then you’re good to go.
These are the suggested parameters you can use for EWWW. Take into consideration that if you change the JPG quality level you’re going to change the behavior into losy compression which means you will loose quality on pictures. If unsure, leave that empty. I suggest a quality level of no less than 85 to be on the safe side.
After you setup EWWW properly you need to go to your media library and do a full Bulk Optimize. That will update all the images in your site with the new compressed file. If your site has a huge amount of pictures I suggest you do the whole process at night so as to not saturate the server. You can also add 1 second of delay between pictures as that will reduce the load time of your server, this is the suggested behavior if you’re on a shared hosting.
Fast Velocity Minify
Fast Velocity Minify is as dangerous as all the other minify plugins. The difference is that Fast Velocity Minify is easy to setup and easy to test, unlike all the others. The suggested configuration is considered to be ultra safe for the vast majority of websites, as I have the plugin with disabled CSS processing. If you care to test & retest your site you can untick that option but you’ve been warned that having that option enabled can potentially break the style of your site.
If you’re into Divi or any other Framework Builder I seriously advice you to add this rule to the ignore list for the jquery-migrate file as that file will be one of the first responsible to break your style and functionality if it’s ever touched by the plugin. Loading the file on the ignore list will lock it down, preserving it against optimizations.
Once everything is configured you’ll see the minified files being written on the Status.
Now we are going to install the main Cache plugin that will take care of converting the actual PHP code into HTML for faster load time. Since WP SuperCache only takes charge of converting the site to static content, it will not mess with minification done by Fast Velocity Minify nor with image compression done by EWWW. You can see why this setup is safer overall as you are in control of the whole process and you will be better fit to find a bug or problem in case some plugin breaks your site.
The only thing needed on this plugin is to enable it…
Then be sure to check the PHP serving method for cache, which is the faster overall. Be sure to check the Compress Pages and Cache Rebuild options.
Remove Query Strings From Static Resources
This plugin is gonna be the easier to configure because… there is nothing to configure!
Remove Query Strings plugin will simply remove the query strings that gives the browser the signal and versioning of a file. Those strings usually break the cache and are not needed if you are handling your resources with WP SuperCache. Simply installing the plugin will enable the functionality.
After the Tweak
Let’s see what happens now!
Right off the bat you can see our score went from 86 to 94 and the load time dramatically improved from 1.32 seconds to 911ms, and there are no more red warnings either for the Remove Query Strings from Static Resources.
The actual FTTB improved too from 529ms to 224ms by having our content as HTML instead of PHP code subject to server-side execution. The minify process also reduced the amount of requests from 47 to 38 which also helped.
Comparison Before & After
I’m a guy of performance graphs and I believe that seeing comparison bars is a better way for our brain to understand a comparison, so here it goes!
Having a faster WordPress site is not always a thing devoted to system administrators nor should be a thing that involves buying expensive software. There are tons of people that think a single plugin should handle all the optimizations tasks and time and time again it’s been proven it’s not a perfect solution. Having separate plugins to do separate optimizations works better. The oposite is also a problem, WordPress sites with excessive plugins can lead to an unstable working website. Optimization wise, the simpler you go, the better. In this guide you’ve learned how to implement few plugins to do specific optimization stuff. Now is up to you to give it a try. I’ll be happy to answer any doubts you may have in the comments below.