Ah, that freshly-installed, new-Wordpress smell, but you can’t hang about, because there’s lots of content to write, right? More content, more content, but now wait, why is your WordPress blog taking 10 seconds to load? Ah, you forgot to optimise it, didn’t you… Not to worry, not only will these three tips will slash your WordPress loading time in just a couple of minutes, but they’ll also help with your SEO by ensuring you’re adhering to Google’s latest rules.

Firstly, you should test your site. I’d recommend opening Google Pagespeed Insights and tools.pingdom.com and in new tabs. Just put in your URL and hit go. Make a note of the scores, and the Pingdom page-size.

Google Pagespeed Insights Screenshot - WordPress Loading Time

Testing using Google Pagespeed Insights

Ok, let’s look at the Google Pagespeed Insights results. Does it say:

Eliminate render-blocking JavaScript and CSS in above-the-fold content?

If so, login to your WordPress dashboard, go to Plugins -> Add New and seach for  Autoptimize , or download and install manually from here. Activate it, and then go to the Autoptimize settings pane (Settings -> Autoptimize)

You want to click ‘Show Advanced Options’ and make sure only the following are checked (or click here to see a screenshot of settings):

  • Optimize HTML Code?
  • Keep HTML comments?
  • Optimize JavaScript Code?
  • Optimize CSS Code?
  • Also aggregate inline CSS?
  • Inline all CSS?
  • Save aggregated script/css as static files?

Now click ‘Save Changes and Empty Cache’. Visit your site to make sure it loads properly, and re-run the Google Pagespeed tool. This warning should now be gone!

But what has it done?

It’s not cut anything out of the page, but it has adjusted the order of which things are loaded in. For example, some WordPress themes will load lots of external Javascript (JS) files, and most of the time, these will be loaded in the header of the page, which means all of the content has to wait for the JS files to load.

Autoptimize moves these to the bottom, and loads them after the content has finished rendering. Your page doesn’t load any faster, but it just seems quicker to the user. Additionally, it takes the CSS code from the separate files, and loads it all inline. This may cause another (less-critical) warning of ‘Prioritize visible content’. This isn’t quite as easy to fix, but I’ll cover this in a future post. It’s certainly much better than it was!

So back to Google Pagespeed… Does it say:

Enable compression?

Ok, jump back to the WordPress dashboard and we’re adding another plugin. This time, we’re searching for  GZip Ninja Speed Compression . Install and activate it (or download and install manually from here). Again, visit your site to make sure it’s still working ok, and go back to Pagespeed, run the test again, and the compression warning should now have gone!

That was too easy, wasn’t it?

Most modern browsers support GZip compression technology, and this plugin is compressing files before they’re transferred to the user’s browser. This is something Google are very hot on, as they try to make sure websites are optimised for mobile devices.

Note: If this plugin isn’t working for you, it could be that your web host isn’t setup properly to allow GZip compression, or one of a number of other things… leave a comment and I’ll try to help.

Ok, last one for now, does it say:

Leverage browser caching?

Ok, before doing anything else, click the ‘Show how to fix’ link under ‘Leverage browser caching’ and it will dropdown a list of files. Just make a note of how many (I had a list of about 10 here).

Now search for the plugin:  Leverage Browser Caching Ninjas . Or download and install manually. Activate it, and load your site… all good? Run the Pagespeed test again.

Don’t be disappointed if you still see a warning for ‘Leverage browser caching’ – click on the ‘Show how to fix’ link again. Hopefully there won’t be much here at all now. Ironically, the only file I have in this list is the Google Analytics file, but there’s not much that can be done about this (not without considerable headaches, anyway).

Browser caching doesn’t make it seem faster…

Ah, yes, well it may not be any faster, at least not when you first reload the page. Browser caching stores some files within the user’s browser for a certain period of time, which means that they don’t need to be reloaded again if the user refreshes or visits another page that shares the same resources (examples are logos, css files, javascript files, etc.). It also should cut a little bit of your website bandwidth.

In Summary

  1. Check your ‘before’ scores and page-sizes using Pagespeed and Pingdom
  2. Use Pagespeed to check for ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’, ‘Enable compression’ and ‘Leverage browser caching’ warnings/errors
  3. For ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’, install Autoptimize and configure
  4. For ‘Enable compression’, install GZip Ninja Speed Compression and configure
  5. For ‘Leverage browser caching’, install Leverage Browser Caching Ninjas and configure
  6. Re-check your Pagespeed and Pingdom scores and page-size – your scores should’ve gone up, and your page-size should’ve dropped!

I really hope this post has been useful! I’d love to hear if you’ve managed to cut your WordPress loading time using this information, and see difference it makes on your own WordPress blog. Please send me a tweet, or leave a comment with your before and after scores and page-sizes.

After installing each plugin above, activate it and test your site to ensure there are no issues. If you do have a problem, disable it and move onto the next one. Feel free to leave a comment if you do have issues. For reference, I’ve tested all of the above using WordPress version 4.4.

Leave a Reply

Your email address will not be published. Required fields are marked *