Slow websites are a pain for everybody. In fact, studies have shown about half of a site’s visitors will just leave rather than waiting for a page to load if it takes more than three seconds. Luckily with WordPress there are lots of tools that can help you make your site blazing fast without breaking the bank. In this article, we’ll cover some of the basics of WordPress optimization and how to use some free tools and plugins that make the process easy.
- Where To Begin
- Pinpointing Plugin Lag
- Database Cleanup
- Image Optimization
- Install a Caching Plugin
- Converting Query Strings to Static Resources
- Loading Stylesheets First and Scripts Last
- Implement a Content Delivery Network (CDN)
- Further Reading
Before you start, it’s probably a good idea to run a few tests of your website’s optimization to see where you stand and to find out what some of the limiting factors are in your site’s speed.
To get started with a test, go to gtmetrix.com. Enter your site’s url on the page and click “Analyze”. Your report will take a minute or two to generate. This will give you an outline of the technical aspects of what is slowing your site down, an overall optimization score, as well as page size, and load time. You may also want to run a test on Google’s PageSpeed Insights as well since your site’s score there is one of the things Google now uses in determining a your site’s ranking in their search engine.
As an example website for this tutorial I’m going to be optimizing a site that a friend of mine owns called patchtheworld.com. This site takes more than 9 seconds to load and is over 14MB in size, which for a homepage is pretty slow. Let’s see what we can do about making this site load faster, without affecting the look or functionality of it.
Keep in mind: Any major changes to your website should be done at a time of low traffic if possible to minimize impact on your viewership.
Plugins are a great way to extend the functionality of your site, but unfortunately many plugins also slow things down – some more than you might expect. Any plugins that you are not currently using should be deactivated. And any plugins that you don’t think you’re going to be activating any time soon should be deleted for performance and security reasons.
Pinpointing exactly which plugins are causing performance issues can be pretty tricky without the right tools however, so one plugin I would suggest installing is called “P3 (Plugin Performance Profiler)”.
Using P3 Plugin Performance Profiler
Step 1 – Install P3 (Plugin Performance Profiler) and activate it.
Step 2 – In your /wp-admin/ sidebar, click Tools and P3 Plugin Profiler.
Step 3 – Click Automatic Scan to start a full scan of your site.
Step 4 – Review the results of the report that was just generated.
At this point you can look at which plugins need to go. For example, the only feature of Jetpack that I was using for patchtheworld.com was the downtime moniter. And since pingdom.com offers this for free without adding any code to your site, I turned off Jetpack along with some other plugins that weren’t really needed.
When you are removing plugins, also keep in mind that P3 scans your site as a logged in user and some plugins enable more functionality when you are logged in. When P3 detects a plugin which could be a false positive, such as Jetpack and Yoast WordPress SEO, you’ll see a notice warning you about that. The authors of these plugins have put a focus on performance and you should feel safe leaving them enabled on your site if you need the functionality they provide.
Another nice thing about this plugin is that you can perform as many tests as you want, and retest to compare differences in performance over time.
Next we’ll cleanup the WordPress database. WordPress uses the database for almost everything it does, so if you want a fast website, you’ll need a fast database too. If the database is full of unnecessary data that could be cleaned out, that will slow down your site since WordPress will have to move past the unnecessary data to find the data it needs. If the site isn’t optimized well it will have far too many queries (database look-ups) that are open for too long called “slow queries”. If there are too many overlapping slow queries, it can dramatically damage a site’s load time or even cause database connection errors from time to time. So let’s see what we can do to clean up this database.
Choosing a database optimization plugin:
While there’s many plugins that can help with this, I would suggest either WP-Optimize or WP-Sweep. You don’t need both, you’ll only need one or the other. They both have their advantages and are both very good for easy and thorough database cleanup:
WP-Optimize is the most popular WordPress database optimization plugin due to it’s ease of use and convenience. This plugin will clean up unused, orphaned and duplicated data that slows down your site. Advantages to using this plugin are that it can be installed and setup to run on a schedule automatically, so you don’t have to login and run the cleanup process yourself every time.
WP-Sweep is a much newer plugin, still in development that many are saying is more thorough in it’s “sweep” of orphaned data and therefore does a better job and optimizing the database for performance. Tests run by myself on staging environments of several sites I manage found that WP-Sweep removed between 8% and 12% more orphaned data than WP-Optimize did.
“The main distinguishing characteristic of WP-Sweep is that it uses proper WordPress delete functions as much as possible instead of running direct delete MySQL queries. Whereas the WP-Optimize plugin uses direct delete SQL queries which can leave orphaned data left behind.” – wpbegginer.com
But before you are completely sold on using WP-Sweep over WP-Optimize just because it removes more from the database, keep in mind there are also some downsides. This plugin is still being developed and currently has less users, which usually means less support from other users on the official WordPress forum. WP-Sweep has no automated sweep function meaning you have to login to /wp-admin/ from time to time and run a sweep yourself and the plugin author has said he doesn’t plan on adding that feature.
So which plugin is really better? That’s still a matter of some debate on WordPress forums and blogs. Some people like that WP-Optimize can be setup to automatically repair and optimize the database on a schedule. Others like that WP-Sweep seems to be more thorough. They are both excellent plugins so it’s really just up to you what you want.
My verdict is this: If you want a plugin you can install and forget about, WP-Optimize is your best bet. If you want to be on the bleeding edge of WordPress Optimization technology, then try WP-Sweep.
If you choose WP-Optimize:
Step 1 – Install WP-Optimize and activate it.
Step 2 – Click on the new tab in your /wp-admin/ sidebar labeled WP-Optimize.
Step 3 – By default it’s set to remove auto revisions, auto posts, spam comments, and run a “repair and optimize” on the database tables. The default settings will work best in most situations. Click the blue button on the right labeled “Process” to run the first repair and optimize.
Step 4 – You can also setup this plugin to run on a schedule. Near the top of the page, click the “Settings” tab.
Step 5 – Click “Enable scheduled clean-up and optimization” under the Auto Clean-up Settings section.
Step 6 – Look over the options of what the automatic cleanup is set to remove. The default settings will work in most situations. If it looks good to you click “Save Auto Clean-Up Settings” at the bottom.
If you choose WP-Sweep:
Step 1 – Install WP-Sweep and activate it.
Step 2 – In your /wp-admin/ panel, click “Tools”, then “Sweep”.
Step 3 – That page will have a list of things that can be deleted, sorted by category. You can sweep each category individually, click “Details” to see the specifics of what would be deleted, or just click “Sweep All” at the bottom of the page. Remember: the more you remove, the faster your database lookups will be in the future.
Most of the time, image files have information in them that can be removed reducing the file size of the images without affecting how the image looks. A smaller file size means less has to be downloaded every page load which means faster load time. To make this process easy we’re using a plugin called “eEWWW Image Optimizr”. I like this plugin because all of the processing is done using the server your site is on. There’s no need to upload your images to a third party location to be processed so there are no limits to how many images you can process. You can even have this plugin process all the images in your media library. Keep in mind this tool will use a lot of your server’s processing resources and may take a while depending on how many images you have. This step especially should be done at a time of low traffic if possible. When I ran the bulk optimizer on patchtheworld.com that’s on a very small economic hosting plan, there were about 100 really big images, and this process took over 90% of one of the my server’s CPUs and took about 20 minutes in total to get through all the images.
Using eEWWW Image Optimizer
Step 1 – Install the eEWWW Image Optimizr plugin and activate it.
Step 2 – In your /wp-admin/ sidebar, go to Settings then click EWWW Image Optimizer.
Step 3 – If everything’s working as it should you should see a message on that page that says “Plugin Status: All Clear” . That means that the plugin is working and everything it needs to work properly is installed on your server. New images uploaded to the Media Library will be optimized automatically.
Step 4 – At the top of the page, click the link for the “Bulk Optimizer”.
Step 5 – Click the “Start Optimizing” button.
Note: If it instead says the status is “Needs Attention” then you may need to head over to this page to troubleshoot the issue, or use another plugin to optimize images that offloads the process onto an external server. There are a few cheap and free options for that as well. If you’d like to look into that see the Further Reading section of this tutorial where I have outlined some alternative options to the plugins and tools we use in this tutorial. This also may be a good option if your hosting environment is very limited in processing power.
At the end of the process, if you are curious how much that has trimmed off your image sizes, you can go back to the EWWW Image Optimizer Settings page and click on Plugin Status and it will give you a total in MB.
There are lots of options for which caching plugin you can use, and lots of debate about which is best. The Further Reading section below has some articles on caching plugin options if you’re interested in more in depth comparison. All things considered, the three top contenders are:
- WP Rocket – This is a very powerful caching solution (some say the most powerful, although that’s disputed) and comes with premium support. But, it costs from $39 – $199 so we won’t be using it in this tutorial.
- WP Super Cache – Very popular, free, very straightforward, and with lots of users plenty of online support. But it’s not as powerful in some ways and doesn’t have as many features.
- W3 Total Cache – This is the plugin I suggest for most people. It’s free, works well with CDNs, (Content Delivery Networks) which we will be covering later on, can automatically minify your site code, and enable gzip compression. It works well with websites of any size so even as your site grows this will continue to work. Even hugely popular sites like makeuseof.com and css-tricks.com use it, and this is what we will use in this tutorial.
Step 1 – Install W3 Total Cache and activate it.
Step 2 – In your /wp-admin/ panel, click the new “Performance” tab and select “General Settings”.
Step 3 – In the Page Cache section of the General Settings page, check the box to enable Page Caching and select the “Disk: Enhanced” method.
Step 4 – Scroll down to the Browser Cache section of the page, and check the box to enable it. Then click “Save All Settings”.
Step 5 – Now let’s fine tune our settings for the best possible performance. Under the performance tab select “Browser Cache”.
Step 6 – In the General section on that page, the following boxes should be checked:
Set Last-Modified header
Set expires header
Set cache control header
Set entity tag (eTag)
Don’t set cookies for static files
Make sure “Prevent caching of objects after settings change” is not checked.
Step 7 – Repeat for the “CSS & JS”, “HTML & XML”, and “Media & Other Files” sections on that same page and then click the “Save all settings” button.
A query string is part of a url that doesn’t refer to a folder or file specifically. In WordPress usually a query string refers to something saved in the database. Here is an example url with a query string in it:
Since a huge portion of WordPress relies inside the database, query strings are very common. The problem is, that in many situations resources with query strings are either cached separately for each unique string, or not cached at all which is bad for performance. Sometimes query strings are necessary but we want as many elements as possible on your posts and pages to be served as static resources, not query strings. The easiest way is to install this plugin: Remove Query Strings From Static Resources. It doesn’t require any configuration, you can just activate it.
Whenever possible, stylesheets should be loaded in the header and scripts should be run in the footer. Many plugins have options for this functionality.
If you have any scripts that run on every page such as a google analytics code, those should be loaded last if possible such as in the footer of your site. Scripts that are part of page contents and part of your theme can be automatically loaded last by Cloudflare’s Rocket Loader that we will cover in the next section.
A Content Delivery Network, or CDN for short, is a network of servers that can serve cached copies of your site’s static content. One of the reasons plugins using plugins like “W3 Total Cache” and “Remove Query Strings From Static Resources” are so helpful is they make your web content static, so it can be served across a CDN making your site load much much faster, and taking some of the load off of your hosting account’s server.
For a CDN I always suggest Cloudflare. It integrates nicely with WordPress and with W3 Total Cache. It’s easy to setup, and even offers security benefits. Cloudflare intelligently caches your site on servers throughout the world. It routes your site’s good visitors automatically to the server closest to them, and routes hackers, bots, and attackers to a dead end.
And the best part is, Cloudflare won’t charge you to use their CDN. It’s completely free to sign up. To get started go to cloudflare.com and sign up. You’ll then need to point your website’s DNS to Cloudflare nameservers. They make the whole process very straightforward, but it if you’d like a walk through, here’s our guide on signing up with Cloudflare for free.
Once you have an account and you’ve pointed your domain to the Cloudflare nameservers, there’s just a few things you’ll want to do to make your site integrate seamlessly with Cloudflare. There’s no need to wait for the nameserver change to take effect (DNS changes take a few hours to propogate) before continuing to the next step. There’s a few things we’ll want to turn on in our Cloudflare dashboard to make Cloudflare work well with what we have setup so far.
Enabling optimization features in Cloudflare:
Step 1 – Login to your cloudflare.com account for your site.
Step 2 – Click on the lock logo labeled “Crypto” at the top of the page to go to open the Cryptography tab.
Step 3 – In the SSL section, if your site currently has no SSL certificate installed or if you’re not sure if it does or not, choose “Flexible”. If you’re sure your site does have an SSL certificate, choose “Full”.
Step 4 – Go to the “Speed” tab at the top of the page.
Step 6 – Scroll down to the “Rocket Loader” section and set that to “Automatic”
Step 7 – Go to the “Caching” tab at the top of the page.
Step 8 – Under the “Caching Level” section you have a choice.
No Query String – only delivers files from cache when there is no query string. This option offers the least benefit, but may be needed if you have a site with content that needs to change for each visitor such as an eCommerce site.
Ignore Query String – delivers the same resource to everyone independent of the query string. This options offers the most benefit, and it’s what I suggest for sites with mostly content that will be the same for all visitors such as blogs or information pages.
Standard – delivers a different resource each time the query string changes. This is the default setting.
Step 9 – Scroll down to “Always Online” and turn that on.
Step 10 – Go to the “Page Rules” tab at the top of the page.
Step 11– Create a Page Rule to exclude the /wp-admin/ or wp-login sections from CloudFlare’s caching and performance features. You would set the rule as your domain name, then /wp-admin/ then a * to signify anything that might come after that or in that folder.
For example, for patchtheworld.com, the page rule is for patchtheworld.com/wp-admin/*
For this rule you will want to Bypass Cache,
and turn Performance off.
Then click the green “Add Rule” button to save the rule.
Making your site work with Cloudflare:
Now that we’ve set up Cloudflare to play nicely with the site, let’s make the site work with Cloudflare.
Step 1 – Install and activate the official Cloudflare plugin. This will make sure that things like anti-comment spam plugins and anti brute force plugins will still work.
Why should you install the plugin? Since CloudFlare acts as a proxy for sites, CloudFlare’s IPs are going to show in your logs, including comments, unless you install something to restore the original visitor IP. Some security plugins you use may also rely on the original visitor IP for the security services to work properly and reduce false alerts. – cloudflare.com
Step 2 – Now let’s go back to the W3 Total Cache plugin in the Performance and Extensions section.
Step 3 – Activate “Cloudflare”, the first extension on the list. This will make W3 Total Cache integrate with your Cloudflare account.
Step 4 – Once that’s been activated, click “Settings”
Step 5 – Click Enable, and enter the same settings there that you enabled in your Cloudflare account, along with your API key, which can be found using the link on that page.
Step 6 – Once you’ve entered your settings, username, domain name, and API key, click “Save All Settings” directly beneath it.
That’s it, you made it! Enjoy the increased SEO and improved visitor experience of having a fast loading, well optimized site. Also for fun re-test your site now to see how much faster it is and how much better your optimization score is.
The above article focuses on tools that are available for free and that work well for most WordPress sites. But there are alternatives to the products suggested above, and some paid alternatives that may better suit the needs of some sites. Below are some alternative options compared.
CDN Options Compared – CloudFlare is unmatched in free performance and web security. CloudFlare’s free plan includes a free SSL, free CDN, and free web firewall and a lot more, but like any free service it’s not without a few limitations. I won’t get into those in full detail here, but Kevin Muldoon has an excellent article called “CloudFlare vs MaxCDN – What They Offer And How They Differ” that compares CloudFlare’s free and paid plans with and MaxCDN (a premium CDN service) and outlines the strengths and caveats of each.
Caching Plugin Options Compared – Tom Ewer from wpmudev.org in “The Top 3 WordPress Caching Plugins Compared” offers a comparison of WP Super Cache, W3 Total Cache, and a premium caching plugin called WP Rocket. For more comprehensive benchmark testing, see “Benchmarking the Fastest WordPress Cache Plugins” by Charles at wpdevshed.com which compares 20 different caching plugins.
Image Compression Plugins Compared – In the above tutorial I suggest using EWWW Image Optimizer because it’s the best free plugin that provides unrestricted top quality compression. But if your hosting account doesn’t have much processing power, it may be better to use a plugin that handles the compression on a remote server. For a comparison of the top image compression plugins, check out Matt Cromwell’s “Battle of the Image Compression WordPress Plugins“.
Converting Query Strings to Static Resources – Saurabh K from technumero.com outlines how to do this without using a plugin in “Remove Query Strings from Static Resources to Increase your Website Speed“.
- The Akamai study published in September 2009 interviewed 1,048 online shoppers and found that approximately half (47% of participants) expect a web page to load in two seconds or less. (Source)
- Google announces site speed will affect search ranking. (Source)
- WordPress.org reccomends deleting unused plugins for security reasons. (Source)
- SQL queries open for too long are logged as “Slow Queries” by MySQL (Source)
- Author of WP-Sweep plugin, Lester Chan writes he has no plans of to add an automatic or scheduled optimization feature to the plugin. (Source)
- CloudFlare treats URLs with query strings that are in different orders as separate files in the cache. (Source)
- Most proxies, most notably Squid up through version 3.0, do not cache resources with a “?” in their URL even if a Cache-control: public header is present in the response. (Source)