 |
Whether you’re using WordPress as a CMS, a blog or somewhere between the two, as a portfolio site, making sure your site runs quickly is absolutely paramount in this day and age. This article and screencast combo takes you through how to use a variety of tips, tricks and techniques in order to make your WordPress powered site load faster.
Contents
- Introduction
- Premium Themes Vs Custom Themes
- Optimising Images
- The 30%, 30kb Rule
- Using CSS Sprites
- Removing Database Heavy Plugins
- Caching Plugins Compared
- Setting Up W3 Total Cache
- Using a CDN
- Setting Up WordPress To Utilise A CDN
- Wrapping Up
Introduction
Since last year, page load speed has been included in Google’s ranking algorithm. Thus, it’s become absolutely vital that your site, regardless of its usage, loads as fast as possible.
The first thing we’re going to do is test load speeds to see what point we’re starting from. I’ve taken two sites — my fairly heavily optimised WPShout and my friend Marco’s blog, which runs a normal premium theme from ThemeForest.
We’ll be using a tool called Pingdom throughout this article in order to test the speed of our site.
To start with, we’ll compare the two sites — the fairly heavily optimised WPShout and Marco’s blog, a normal WordPress blog running a premium theme.
- Clearly, WPShout loads far faster than Marco’s blog and there are a number of reasons for this:
- Fewer files: WPShout loads with only a handful of CSS, Javascript and image files whereas Marco’s blog has a lot of CSS, Javascript and then a load more images added on top. We’ll cover optimising images later
- Faster files: WPShout is using a Content Delivery Network, or CDN in order to deliver the files faster. More on this, later.
- Cached files: you’ll note that images don’t show up as being downloaded again. This is because files which aren’t changed regularly are stored locally and so don’t need to be downloaded again. We get to caching later.
- Custom theme: WPShout runs a custom theme, whereas Marco’s blog runs an out-the-box premium theme. The pros and cons of each method are weighed up in the next section.
Premium Themes vs. Custom Themes
It’s obvious, but I’ll say it regardless: an out-the-box theme, free or paid, won’t get anywhere near the performance of a well made custom theme. Even premium themes from some of the largest marketplaces have horrendous performance.
However, help is at hand!
We can using something called a caching plugin in order to save a copy of your site and then show that when people visit, thus circumnavigating the problem of out-the-box themes using up a lot of resources.
Imagine you had a written document and wanted to give copies to everyone who visited. At the moment, you have to write it all out by hand, but if you use a photocopier, you just need to do the work once and give out copies!
A caching plugin is like the photocopier — it loads the page once and then distributes copies of the page to visitors, meaning the page loads faster as visitors don’t have to wait for the server to load the page — or for you to write out the document.
There are a number of caching plugins available and we’ll visit them later.
Optimising Images
- Images are likely to be the single biggest factor that slow down your site so are well worth taking the time to optimise!
If you’re running a blog or magazine style layout, unoptimised images are likely to be your downfall. A couple of years ago when I used my first WordPress powered magazine theme, I remember being astounded at how slowly the site loaded. The culprit, of course, was having huge file sizes for images.
The following screencast runs through ways of optimising your images.
The 30%, 30kb Rule
I use something we’ll call the 30%, 30kb rule. Images should be at 30% quality and/or no more than 30kb large. Whilst images containing text might need to be larger, as a general rule it works well in keeping file sizes down. Of course, you also need to make sure images are no wider than your post’s content area.
Using CSS Sprites
- CSS Sprites let you combine what would have otherwise been multiple images — and multiple downloads — into a single file.
We can also use image sprites in order to combine multiple images into a single file. Chris Coyier has an excellent post on CSS-Tricks explaining “what they are, why they’re cool and how to use them�.
The graphic above shows the image that forms the CSS Sprite for WPShout. The top row is icons and social media buttons and the two rows below are the logo and hover state for the logo which show up on the coloured background on the site (I’ve added in a background here but on the site the sprite is a transparent PNG). Instead of five files at 100kb, I’ve got one file at just under 20kb. The savings are obvious so there’s no reason not to try out sprites on your site.
A great tool for quickly making a sprite is “SpriteMe�, a bookmarklet you can just click and it does all the work for you! This is a great way of avoiding getting stuck into CSS if you’re not too confident with them.
Further Image Optimisation
You can go further with your image optimisation, though. Yahoo has a service called “Smush.it� which takes your images and optimises them, keeping the same quality but lowering the filesize.
It would be a pain to individually optimise each image so thankfully there’s an excellent free plugin called “WP Smush.it� which automatically runs all your images through Smush.it when you add them to a post or page.
Remove Database Heavy Plugins
- Lots of plugins dosn’t necessarily mean your blog will load slowly, but one may lead to the other.
- Plugins which make lots of database queries aren’t a problem if you use a caching plugin.
It’s a common myth that having lots of plugins = your site loads slowly. One doesn’t necessarily imply the other, but often the two are linked, hence the myth.
It is true, though, that having a lot of plugins can both be a security risk and just a pain when upgrading to new versions of WordPress (you’ll have to check they’re all compatible with the latest version). It’s easy to get carried away installing plugins that do jobs you think you might need, but it’s considered good practice to keep the number below ten.
Jeff Starr ran a very interesting poll on Digging into WordPress a couple of years ago which is still relevant today. Just about two thirds of respondents used up to ten plugins, with only ten percent using more than twenty. Those who used a lot of plugins ran with the argument that their plugins didn’t hinder their site’s performance so using them was fine. Whilst this is true in the majority of cases, this isn’t necessarily always true.
The first plugins to reconsider using are ones which add Javascript. Load your homepage and then view source. In the section, look for Javascript and see if you can find any plugins. If you can, it’s time to reconsider whether you really need that plugin as it’s adding to the load time of every single page.
However, the big culprits are plugins which use the database a lot. Joost De Valk has a post, explaining how you can use the Debug Queries plugin in order to work out which plugins are causing your server a lot of work. In Joost’s case, it was the Yet Another Related Posts Plugin that was causing the problems. I’m using the same plugin on WPShout but decided to keep it as it’s so powerful and so any performance lost can be justified by extra user experience gained. Speed shouldn’t be the only factor you consider when deciding whether to keep plugins or not.
There is hope, though. You can create a cache using a caching plugin in order to save a copy of your page — and thus database queries.
Caching Plugins Compared
And now for the big one: caching plugins! These will give you by far the biggest performance boost but there are lots of plugins to choose from so it’s vital some time is spent comparing the performance of each on your site.
Whilst there are a good number of plugins available, there are a couple of main ones:
I switched to W3 Total Cache from WP Super Cache about a year ago after testing out various options and it’s been absolutely fantastic. That said, it’s not necessarily fastest on your site so it’s important you try out a couple and compare the results. Tutorial9 has a really good post comparing the different plugins available, but I must stress it varies from site to site which ones work best. However, I’ve found W3 Total Cache to be consistently fast on various set-ups so we’ll explore how to use it here.
Setting Up W3 Total Cache
Installing such a complicated plugin is surprisingly easy. Total Cache installs like most other plugins — under the plugins tab, do a search for W3 Total Cache and it’ll show up as the first result. Click “install nowâ€� and then activate the plugin.
However, the plugin isn’t set up yet! You’ll see a new tab on your admin bar “Performance�. Open this up.
Total Cache does some impressive detective work and gives you some recommend settings. It’s now just a case of going through all the settings, activating each one and seeing what performance boost each option gives you. Some may decrease performance so it’s vital you test.
Total Cache has some excellent documentation built in — select the various options under the Help tab. The FAQ is brilliant at going through more or less every single question you could possible have and answering it clearly.
However, there may be some extra set up required. You might get some messages popping up at the top of the page telling you you need to add some code to a file called .htaccess. .htaccess is a file which allows you to locally configure your Apache settings, and thus is impressively powerful. To access it you’ll need to log into your site’s FTP and then navigate to the root. If you then can’t see it, show hidden files.
Download it (again, show hidden files), make a copy as a backup and then load it in your text editor. Add the lines of code to the bottom of the file, upload again and you’re done! Make sure you try loading your site immediately to check it still works. If it doesn’t, check you’ve copied all the code exactly and you haven’t deleted any other code in the file.
And you’re done! Total Cache is set up!
Using a CDN
“A CDN can increase a website’s performance by serving items from the closest possible location to the visitor.
For example, let’s say that you have a web server in Los Angeles. A visitor from the United Kingdom wouldn’t get the best possible performance, because images and other content would go through many “hops” and a lot of distance to get across the USA and the Atlantic Ocean.
With CDN, those items would be served from a location much closer to the visitor, e.g., Amsterdam. The web server would still provide the pages, but images and other larger items would be served from the CDN.�
Mark Bailey, WPCDN
Essentially, a CDN, or content delivery network, takes all your static files you’ve got on your site (CSS, Javascript and images etc) and lets visitors download them as fast as possible by serving the files on servers as close to them as possible.
CDNs used to be for the elite, but in the last 18 months have become available to the masses and are now something I thoroughly recommend to anyone and everyone. The first thing you need to do is to find a CDN provider!
CDNs to consider
I use WPCDN on my sites and I’ve been very pleased with it, but by no means are they the only CDN providers! There are a fair few, but these are ones I’ve been personally recommended by others or use myself:
- Akamai
- Free CDN (this is, obviously, free, but I’ve had no experience with it; you may very well get what you pay for)
- Google! You can let Google host your jQuery/Javascript libraries for you on their CDN
- MaxCDN
- WPCDN
It’s certainly worth looking and shopping around to get the best deal, and most importantly, test out various provider’s speeds!
Once you’ve chosen a provider, setting it up is blissfully easy.
Setting Up WordPress to Run a CDN
If, as I suggested, you’re running W3 Total Cache, setting up your site to utilise a CDN is really easy. Go to the CDN tab and then tick the boxes you want and simply fill out the Configuration section with details provided by your CDN provider.
If you’re not running W3 Total Cache, a plugin such as My CDN will also do the trick.
Wrapping Up
Hopefully this article has been valuable in giving you some tips on how to run your WordPress site faster. I can’t stress enough how important a fast loading site is in this day and age. If your site hasn’t loaded within three seconds, a good chunk of your search engine traffic will have left and gone onto the next search result. Not only will having a faster site get you more visitors, but it’ll also help you rank higher as Google now takes site speed into account in its search algorithm.
(rb)