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
- 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.
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
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
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.
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.
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.
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.
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.
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.
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
- Get Sequel Pro (Mac) for editing your local database (it beats using PHPmyadmin).
- Use a nice local editor. Try Coda 2 (Mac), Sublime Text (Mac/Windows), or Espresso (Mac). Adobe Dreamweaver is another option.
- Try starting off with a “bare bones” theme, and customizing it to suit. Examples: Bones. Roots. My favorite is Kraken.