Beginner’s Guide to WordPress Performance Optimization

WordPress is great.

So great that almost anyone can install it, buy a theme, add some plugins and have a great looking site.

That’s also a weakness: Before you know it your WordPress site runs like a snail.

If your site seems slow on your desktop browser – it will BE LOUSY on a 3G mobile connection.

Here are some things I’ve learned after many years with WordPress.

Step 1 – Checking Your Site Performance

Use an online tool

Pingdom or GTMetrix or Webpagetest.

pingdom-ef

Your goals:

  • Your page rendered in under 1 second.
  • Your page weight (or page size) as low as possible.

Use Developer Tools in your browser

In Chrome (Command-option-I or View/Developer/Developer Tools). This brings up an extensive window. Select the Network tab. Refresh your page.

I like to test with an unprimed cache (unless you have lots of repeat visitors most people will arrive with have to load all your page elements from scratch). You can simulate this in Chrome by clicking the cog icon (bottom right), and check the box Disable Cache.

Advertisement
waterfall

Chrome Developer Tools Waterfall

The blue vertical line shows when your page layout is rendered (DOMContentLoaded event). The red line is basically when all the images have loaded (onload).

You can quickly see how many files your page is calling and just how bloated things have become.

NOTE: If you run advertising such as Google Adsense you will see many (too many) calls as all the ad scripts and images are rendered. See more about making these calls faster.

Step 2 – Check Your Plugins

HTML source of a wordpress site with lots of plugins.

HTML source of a wordpress site with lots of plugins.

Most WordPress plugins do not take performance into account.

Every time you add a plugin to your site, your will usually get an extra CSS and JS file loading on your page. It doesn’t matter if the page uses the plugin or widget – you still get the extra loads.

Add in a whole bunch of plugins and you’re in trouble.

Choose your plugins very carefully and only install if absolutely necessary to your site functionality.

Step 3 – Install a Caching Solution

Every time a user requests a page, WordPress builds the page for them (database queries, PHP execution). This takes time. A cache will effectively pre-build the page and leave it on disk as a straight HTML file.

EASY: Install WP Fastest Cache.

You just switch this on, and you are done.

INTERMEDIATE: Install WP-Supercache

More complex, but more options.

DIFFICULT: Install W3 Total Cache

This is THE caching solution. Benchmarking has shown it is the fastest of the 3 solutions here. It has a million or so options and can be difficult to configure correctly.

Step 4 – Use Minify

Minify is a process that compresses Javascript and CSS. They become non-readable for humans, but readable for machines.

If multiple files can be minified and then concatenated together, you will greatly reduce your page weight and load time.

This can be done as part of your development environment on your computer (more control). Or you can use a plugin to do some of the heavy lifting for you.

NOTE: W3 Total Cache already does minify.

Plugins: WP-Minify or WP-Better-Minify

BEFORE MINIFY

before-minify

AFTER MINIFY

after-minify

Notice the size difference here (25 KB vs 35 KB). If you have multiple CSS files being loaded, the plugins will combine them into a single file.

The same process can be done on Javascript files. Many external files (such as jQuery) are already minified).

STEP 5 – Optimize images

Most of the page weight tends to be big images.

The ideal image format (for photographic-type images) is a Progressive JPEG.

You can use a plugin like EWWW Optimizer , Jetpack Photon Module, or optimize the images on your computer before uploading (see ImageOptim). You can use an online service like SmushIt, or (one of the best optimizers) Kraken.io. These services have browser extensions to make the process easier.

110K Image

tiger-before

60K Image

tiger-after

Notice the difference? Yeah what difference… about 50KB less download time in the second image.

STEP 6 – Check Your Hosting Provider

This is a tricky one.

For starters, make sure you choose a host that’s based in the country where your users are. This will help keep latency down. Latency is the time between your browser requesting something, and it actually beginning to arrive.

Take a look at the Chrome Network Waterfall again.

waterfall

Notice the Latency figure for most of the resources – it’s almost half a second! That’s because I’m in NZ and my server (Media Temple) is in the US.

Network latency is particularly bad on mobile devices with 3G connections.

One option is to use a Content Delivery Network (CDN) – that’s beyond the scope of this article. You also need to make sure you are not hosted on an overloaded server. This often happens in cheaper shared hosting environments.

Who do I use? After years of working with different hosting providers I now have everything with Media Temple (aff link). Yes this is an unashamed plug for MT – I’m a happy customer.

I use the Dedicated Virtual servers. For a time (years ago) I used the grid service but wasn’t happy (hopefully they’ve improved this by now).

STEP 7 – Backup Properly

Not really a performance issue, but if you screw something up without a backup, you’ll have no site.

Over the years I’ve worked my way through so many different backup plugins. The one I’m using now is BackWPUp (there is a paid and non-paid version).

I can happily say this is the best I’ve used ever. Not only does it handle database backups with ease, but you can easily backup all your files to almost anywhere.

3 backups a week going to 3 different places.

3 backups a week going to 3 different places.

 

Going Further

Setup a Local Development Environment

Most beginner wordpress users tend to make changes to their theme on the live site. This is very risky, and a great way to break your site. Don’t do this.

Set up a local development environment on your computer. Make and test all your changes locally before uploading to the live server.

I use DesktopServer.

desktopserver

It’s great. No messing around with MAMP and WAMP configurations and editing files. No tracking down obscure hosts files. Just point and click and you’ve got your very own mysite.dev setup in an instant.

Other Useful Tools

  1. Get Sequel Pro (Mac) for editing your local database (it beats using PHPmyadmin).
  2. Use a nice local editor. Try Coda 2 (Mac)Sublime Text (Mac/Windows), or  Espresso (Mac). Adobe Dreamweaver is another option.
  3. If you’re seriously getting into Javascript, use a tool like Codekit to automate the minification and validation process (or try Prepos for Windows).
  4. Try starting off with a “bare bones” theme, and customizing it to suit. Examples: Bones. Roots. My favorite is Kraken.
Hi, I'm James, and for the last decade I've made a living by making my own blogs and websites.
Updated: September 20, 2016

11 Comments

  1. hello there and thank you for your info

    • Hello there to you too, and you are most welcome.

  2. Thanks James! Great stuff. 🙂

    • Thanks for sharing. Looks far more powerful than Sequel Pro.

  3. Thanks for sharing!

    • You’re most welcome.

  4. Excellent post. Its funny that although this post was geared toward beginner I run into alot of so called professionals who can learn from it.

  5. Nice One thanks

Add a Comment