LIMITED OFFER: Get All Themes Package [39 Themes] for only $97 View Details

The ultimate guide to making your WordPress site load faster (image optimization, plugin bloat + Google PageSpeed)

Written by Alex Denning on in Tutorials 18 comments
fast-cover-1

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.

Straightforward message from the authors of this extensive report into the effect of site performance and user experience.

Straightforward message from the authors of this extensive report into the effect of site performance and user experience.

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:

  1. 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.
  2. 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.
  3. 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 themes?

A fast theme is essential. Obviously you’re reading an article about making really fast WordPress sites on WPZOOM.com and we make WordPress themes – so you can guess our themes are very fast.

Our popular Foodica theme is well-optimized for site speed.

Our popular Foodica theme is well-optimized for site speed.

It’d obviously be unfair to claim we are the only people making fast WordPress themes; there are other theme providers who also do a very good job of making their themes fast.

However, not all WordPress themes are created equal. There are a lot of slow themes available which will have a seriously detrimental impact on your site. What to look out for is especially bloated “do-it-all” themes which, in attempting to cater for all possible use-cases, produce huge files and load a lot of features that are totally unnecessary.

If you’re looking for a theme you know will give you a solid foundation for a very fast website (as we’ll explain here, your theme is a starting point but there are other factors) then check out our themes.

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.

The worst hosting is likely to be very detrimental for your site, but okay hosting (and obviously anything better than that) will be a reasonable starting point.

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.

Your site needs to load fast for visitors' convenience in any time or any place. Pictured: Foodica theme on the go.

Your site needs to load fast for visitors’ convenience in any time or any place. Pictured: Foodica theme on the go.

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:

  1. 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.
  2. 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.

Jetpack is the best solution for hosting your images.

Jetpack is the best solution for hosting your 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:

  1. 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.
  2. 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:

  1. 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.
  2. 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.
  3. 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:

  1. Pingdom Tools for testing loading time.
  2. Google PageSpeed for testing what Google thinks of your site.
  3. P3 Plugin Profiler for testing plugin load impact.
  4. Our recommended web hosts.
  5. WP Super Cache and W3 Total Cache for free caching.
  6. WP Rocket for premium (fastest) caching.
  7. Jetpack by WordPress.com for magical image optimization and loading.
  8. EWWW Image Optimizer for bonus image optimization.
  9. Regenerate Thumbnails to fix broken image previews.
  10. Autoptimize for minification.
  11. Remove Query Strings From Static Resources is highly self-explanatory.
  12. Disqus Conditoinal Load for better loading from Disqus comments.

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.

Of course, having a beautiful and fast WordPress theme is helpful too ;)

Related Posts

Subscribe to the WPZOOM newsletter.

Join 50,000 people. Get our latest news & releases delivered to your inbox.

  • karl peschel

    I have seen a number of articles, like this one from a premium caching plugin, warn against removing query strings.
    http://docs.wp-rocket.me/article/56-remove-query-string-on-static-resources

    Doing something JUST to chase a better score or make some testing tool “happy” is not advisable. Make sure you know the ramifications of any speed optimization you do, and pay more attention to load time than the scores.

    • Alex Denning

      Interesting, thanks for the feedback. Removing query strings will mean your static resources are cached, which is the main aim. May be useful to disable the plugin when making updates, but it’s similar to caching any other part of the site and needing to clear before changes are visible :)

      • karl peschel

        But if that Query string adds a version number, is it REALLY a static resource?? Seems to be the opposite in my opinion.

  • You had me up until I saw BlueHost as a recommended hosting provider.

    • Alex Denning

      They’re fine for starting out and very affordable, which is what a lot of people want. We do also recommend WPEngine for sites needing something extra.

  • Dos this also works on a free hosting providers like 000web…?

    • Alex Denning

      If you’ve got WordPress installed, these tips are going to work for you :)

  • i think smush up is better for optimize images :)

  • Hello Alex Denning, I’m looking for W3 Total Cache settings for my blog. Is in this blog there is a complete tutorial on it? Is there wordpress themes that support AMP? Please reply…

    • Alex Denning

      Hi Ruswandi, I replied to your other comment about AMP, saying you should use this plugin. You’ll find details on how to set up W3 Total Cache here.

      • Wow thank you, I was searching this one for my website! Thank you so much Alex

  • Thanks for this super useful manual! However, I followed all the tips and my site only went up from 28 to 40 points. Also, my design changed significantly. I went through all the plugins, manually deactivating each one, and it turned out the WP Super Cache plugin caused it. I deactivated it, which caused me to lose 3 points, so unfortunately I’m now only at 37.

    • Alex Denning

      Points aren’t the be-all-and-end-all of site speed – it’s important to also look at the raw loading time. How has this changed? WP Super Cache is likely to make the biggest difference to loading times, so may be worth making sure it works.

  • PS: here’s some more info:
    Should Fix:
    Optimize images
    Show how to fix
    Eliminate render-blocking JavaScript and CSS in above-the-fold content
    Show how to fix
    Leverage browser caching
    Show how to fix
    Reduce server response time
    Show how to fix
    Enable compression
    Show how to fix
    Consider Fixing:
    Minify CSS
    Show how to fix

    • TDC

      Please show how to fix..

  • will this work in royalclouds.com hosting??

  • Hi my website is http://www.gledhillpulsacoil.com currently on google speed test I am okay but am sure I can improve. But on a mobile speed test I am not doing so well. Will the steps you mentioned above help or are there additional things you recommend?

    Also will any of these recommendations effect mobile speed in a negative way?

  • RajuV

    I like the pingdom tool and google page speed