The ultimate guide to making your WordPress site load faster (image optimization, plugin bloat + Google PageSpeed)
It’s absolutely essential to have a fast site. Nearly half of web users expect a site to load within two seconds – and they’ll abandon a site that isn’t loaded within three seconds (source, see also this detailed study).
This sounds like brutal behaviour, but it’s the reality; users aren’t sat whilst your site loads with a stopwatch, ready to stop and do something else, but if your site isn’t loading promptly, they are ready to tab over to another site or head back to Google and load up a competitor.
Site speed is also an important part of search engine rankings. Google wants to display the best results, but it also wants to display results that are easy to access – and part of that is loading fast. Google has been considering site speed in its ranking algorithms since 2010.
How do you actually make your site faster?
We’ve established it’s imperative that your site loads quickly. So what now? There are two simple stages:
We’ll run through each of these in turn. Get your site open and follow along – these are methods you can start using right away on your site.
Step 1: analyse your site
How fast is your site right now? Let’s find out. We’ll use three free tools to see what our starting point is:
- Pingdom Tools: use this to test how long in seconds your site takes to load. Set the “test from” location to something closest to where most of your visitors come from. Remember what you select so we can consistently check results later.
- Google PageSpeed: use this to see what Google thinks of your loading time. You’ll get a score out of 100 and suggestions of how to improve. Anything over 80 is good here but you want this as high as possible. We’ll cover fixing the main issues later, but you can also “show how to fix” for detailed instructions from Google.
- Health Check: This plugin will perform a number of checks on your WordPress install to detect common configuration errors and known issues. Install this free plugin and go to Dashboard > Health Check page and you’ll then be able to find out what server configurations needs to be adjusted by your hosting in order to ensure that WordPress works at its best performance.
Take a screenshot of all of your site’s scores on the three different profilers. We’ll come back to these later to see what improvement has been made.
What about hosting? In this tutorial we’ll equip you with the tools you need to make your site load as fast as possible. Note as fast as possible may still not be outright fast. A key factor here is hosting.
If you’re using a slow host or entry-level shared hosting (where your site is hosted in the same place as lots of other sites) you’re unlikely to find the very top speeds available. If you’re on a budget this is okay, but if your site is part of your business, represents your business or represents you professionally it’s likely worth investing in something that’s really good.
Step 2: improve loading time
Improving your site’s speed is just a case of knowing what tools to use – and then using them. There are a number of different factors that need attention when making a site fast. We’ll look at each of these now.
A really good caching plugin
Caching is the thing that will make the biggest difference to your site’s loading time. Just installing a caching plugin on your site can halve the loading time of your site.
WP Rocket is a premium caching plugin with pricing starting at $49. It’s the fastest caching plugin available. Various independent tests show the plugin to be significantly faster than the most popular free offerings (and all other paid plugins). WP Rocket is packed with features – but also makes itself easy to set up. You get the best of both worlds.
As with hosting, if the speed of your site is important to your bottom-line, it makes sense to get the very best tools available, and that would be WP Rocket. Otherwise, WP Super Cache or WP Fastest Cache will do a very good job – and all three are much better than doing nothing at all.
Optimize images and load them quickly
Images have the potential to be a problem-spot on WordPress powered sites: you can make your site lightning fast with great caching, but users can upload huge images to posts and pages which slow loading times to a crawl.
To avoid images causing any problems you want to do two things:
- Optimize images to reduce their file size.
- Ensure they can be loaded really quickly.
Doing these two things used to a hassle, but a single plugin can now sort everything for you automagically – and it’s free. Jetpack by WordPress.com (made by Automattic, the quasi-parent-company of WordPress) features a module called Photon, which is your one-stop location for images.
Install Jetpack by going to→ on your WordPress Dashboard, then searching for “Jetpack by WordPress.com”. Install and activate the plugin. You’ll be prompted to connect to WordPress.com, which you can do next. Either create a new account or sign in and you’ll be connected. Final step is to go to → and activate the Photon module.
Photon automagically hosts your images from WordPress.com’s content delivery network, a network of servers designed to load content (ie your images) as fast as possible. It also compresses your images on the fly using a combination of image optimization tools and resizes images to be the right size for the space they’re loading (so an image originally 3,000px wide will be loaded at 700px in a 700px wide content area).
Photon is an incredibly impressive tool and you can set-it-and-forget-it, safe in the knowledge your images will be loaded as fast as possible. As images are loaded from WordPress.com network you’ll also find the bandwidth used by your site decreases – saving you hosting costs.
Despite Photon’s impressive offering, there is still room for improvement here. Jetpack does a good job of optimizing JPG images but not such a good job for PNGs. To get PNG optimization maxed out you’ll want EWWW Image Optimizer. The plugin runs image optimization on your own server (which means it uses more resources – but you don’t have to pay extra for it).
To maximize the plugin you’ll need to make a couple of extra tweaks: from the plugin’s settings page change the PNG optimization from Lossless to Lossy. Next, go to thetab and untick the “disable pngout” box. Save changes and you’ll see an error pop up. This is just telling you pngout needs to be installed separately – click “automatically” and the plugin will handle everything for you. You’ll then have access to superior PNG optimization. When combined with Jetpack, this will make sure your images load as fast as possible.
Dealing with bloated plugins
Another useful plugin to monitor your website is Query Monitor. This plugin will display in the admin bar information about which processes and plugins take the longer time on different pages. This tool may be too advanced for beginners, but sometimes it can be really helpful and help you find if you have any outdated plugins.
Having lots of plugins, isn’t necessarily bad: plugins with a big impact on your loading time are the ones to look out for.
You may decide that a particularly resource intensive plugin is a sacrifice you want to make so you can add functionality to your site. You may also, however, be able to replace especially intensive plugins with simpler alternatives. A fully fledged gallery plugin could be replaced by a slider, for example.
What about what Google thinks?
The final thing to consider is the PageSpeed score from Google we collected at the start of this post. The score is a theoretical rather than reflection of your actual loading time, although generally higher scores are found on faster sites. Also bear in mind getting to 100 is not possible for all sites on all hosts. As we mentioned, anything over 80 is good.
As with all other parts of the site, making Google happy is just a matter of working through a number of tools. You’ll want to install and setup all of these to make Google happiest:
- Autoptimize will minimize (make smaller) your site’s HTML, CSS and JS. Install and check options in the plugin’s settings to optimize all three of HTML, CSS and JS and you’re done.
- Remove Query Strings From Static Resources does literally what it says on the tin. There are no options – install the plugin and Google will be happier.
- If you’re using Disqus to power your comments, swap the plugin for Disqus Conditional Load. They’re the same plugins, but the latter only loads when needed. This delivers a real-world speed improvement and improves your PageSpeed score.
These three tools combined with everything else we’ve looked at here will make a strong improvement to your site’s loading time. Once you’re done, re-test with Google and you should see a strong improvement.
A faster site with happier customers
Improving loading time isn’t difficult, but it’s important. You need to follow the steps we’ve looked at here and embark on your own testing, but it’s possible to get a fast site for nearly everyone on nearly all hosts.
Here’s a recap of the tools mentioned in this article:
- Pingdom Tools for testing loading time.
- Google PageSpeed for testing what Google thinks of your site.
- Our recommended web hosts.
- WP Rocket for premium (fastest) caching.
- Jetpack by WordPress.com for magical image optimization and loading.
- EWWW Image Optimizer for bonus image optimization.
- Regenerate Thumbnails to fix broken image previews.
- Autoptimize for minification.
- Remove Query Strings From Static Resources is highly self-explanatory.
- Disqus Conditoinal Load for better loading from Disqus comments.
- A list of the fastest WordPress themes.
Look through these tools and utilise the ones which are best for you. Once you’re done, you’ll have a fast loading site that will make your visitors – and search engines – happy to keep coming back again and again.