LIMITED OFFER: Get All Themes Package (39 Themes) for only $97 View Details →

Getting Started with Themes

Common Theme Issues

ZOOM Framework

Advanced

Resources

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:

  1. Analyse
  2. Improve

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.
  • P3 Plugin Profiler: you may have heard that having lots of plugins is bad for your site’s loading time. This isn’t true. Having bloated plugins is bad for your site’s loading time. Install this free plugin and run the profiler (you’ll find it under Tools on your WordPress Dashboard, using “Auto Scan” is fine). You’ll then be able to find out what impact which plugins are having on your site’s loading time.
We’ve got a real-world loading speed of under one second and are faster than 90% of websites – pretty good going.

We’ve got a real-world loading speed of under one second and are faster than 90% of websites – pretty good going.

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.

We have three hosts we recommend: find more details here.


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.

There are many caching plugins available, but two free ones dominate the competition: WP Super Cache and W3 Total Cache. These plugins have been available for years and both do a very solid job of caching your site. Super Cache has fewer features but is easier to set up whilst Total Cache has more features but requires more setup – and not all the features work on entry-level hosts.

Comparing feature lists is only so helpful: the best way to compare caching plugins is to see which is fastest in the real world. Given the plugins are free you can test on your site (as all hosting environments differ a bit), but tests generally show:

  • W3 Total Cache is faster. Lots more features but may overcomplicate caching for users who just want to get on with it. Best if you want more control.
  • WP Super Cache is slightly slower but better suited for entry-level hosting. Also easier to set up. Best if you want to install and forget.

A third option exists for caching. WP Rocket is a premium caching plugin with pricing starting at $39. 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, Super Cache or Total 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:

  1. Optimize images to reduce their file size.
  2. 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 PluginsAdd New 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 JetpackSettings 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).

png

Install pngout for maximum image optimization.

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 the Advanced tab 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.

Bonus: if you’ve recently changed theme and your thumbnails are now the wrong sizes, install and run Regenerate Thumbnails. Once installed you’ll find it under ToolsRegen. Thumbnails. Run the plugin and it’ll fix everything for you.

Dealing with bloated plugins

Let’s now return to the plugins you tested earlier with P3. Below are some sample results from the plugin. As you can see, the site uses a modest ten plugins but two make up the vast majority of loading time. These are an email lead generation plugin and Jetpack by WordPress.com, which we looked at earlier. A couple of other plugins, including the popular WordPress SEO plugin, have a modest impact.

Sample results from the P3 profiler.

Sample results from the P3 profiler.

P3 can create a lot of false positives and it’s important to identify these before going further:

  • The loading impact of Jetpack is overstated as it loads stats for logged-in users with every page load, thus generating extra load time. Regular users, however, won’t see this – to get round this you can use an incognito window and run a manual scan. This will give you Jetpack’s true load impact.
  • Caching plugins such as the ones we looked at earlier often have overstated impact. This is as generating the cache is highly resource intensive – but again regular users won’t see this. You can generally safely ignore the results from your caching plugin, safe in the knowledge it is making your site load faster.

Having lots of plugins, then, isn’t necessarily bad: plugins with a big impact on your loading time (that aren’t false positives) 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.

Plugins with a big impact on load time that you want to keep may have some performance options. Plugins such as the email lead plugin in the example above often have options to only load on pages where they’re activated – but this typically isn’t on by default and it’s up to you to make the changes that get the loading gains.

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:

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.

Last updated on September 6, 2016
Have a suggestion?