8 Quick Wins to Boost the Performance of your WordPress Website

WordPress Performance Tuning

Increasingly, I’m being asked my advice on how you can optimise your WordPress website to reduce loading times. Reducing loading times improves the user experience for your visitors, so they get to see your website more quickly. Search engines such as Google also use page loading times as a factor in their ranking algorithm. If you want great rankings, ensure your website loads quickly.

Performance tuning is a bit of an art, and you need a fair amount of technical ability to squeeze every last drop of speed from your WordPress website. Ultimately, you want to get data down the internet pipe as quickly as possible. Reducing wastage where possible is a key part of that.

There are some very quick wins you can make with just a basic technical understanding of WordPress… and I’ve compiled them into this article. You’ll notice that there is technical language in this article, and I assume some familiarity with WordPress themes, HTML and CSS. You should get noticeable improvements in page load times just by following these tips!

1) Minimise the number of plugins you have

Too many plugins can slow a WordPress website down very easily. There’s no optimal number of plugins to have installed, simply because it depends on how complex a plugin is and what your server specifications are. Based on my own personal experience, the average number of WordPress plugins installed on a website tends to be between 10 to 25.

  • If you’re not using a plugin, remove it – This is good house-keeping, and will slightly speed up the loading of the admin area of WordPress.
  • For basic plugins, see if the functionality can be added directly to your theme – e.g. basic shortcodes and many social media plugins can often be moved to your template files by a half-decent WordPress developer. Plugins add an overhead to load times as they are initialised, so moving essential functionality to theme files removes that overhead.
  • Use plugins that blend the functionality of several plugins – some plugins combine useful functionality into a single plugin. Again, this marginally reduces load times. e.g. Yoast’s WordPress SEO combines XML sitemaps, SEO tweaking and navigation breadcrumbs.

2) Remove embedded stylesheets from your header

There are some WordPress plugins and themes that are badly implemented, storing cascading style sheet (CSS) information in the header of the web page.

<style="text/css"> h1 {font-size: 150%; color: red; } h2 {font-size: 120%; color: blue; } p {font-size: 100%; color: black; }

Why it’s bad…

Say you had 5kb of CSS information in the header area. That’s 5kb being added to every single web page the user visits. Now 5kb doesn’t sound like a lot, but it still adds crucial miliseconds to the page loading time.

So if a website visitor views 5 pages, they download the same CSS data 5 times. Since the CSS data is 5kb, then the user downloads a total of 25kb of CSS data (5x 5kb) to view 5 web pages.

How to fix it…

If that CSS was stored in an external CSS file, rather than embedded in the header, then the website visitor only downloads that CSS information once, as it’s stored in the web browser’s cache. Any subsequent page that’s loaded just references the external CSS file, and still benefits from the style information in that file.

The HTML


The CSS (which goes in a CSS file, e.g. styles.css for your WordPress theme)

h1 {
font-size: 150%;
color: red;
}
h2 {
font-size: 120%;
color: blue;
}
p {
font-size: 100%;
color: black;
}

Now if the website visitor views 5 pages, they download the CSS data on the first visit. The CSS data is stored as an external file in the browser cache, and it’s then referenced 4 times on the subsequent page views. Since the CSS data is 5kb, then the user downloads a total of 5kb of CSS data. So on 5 web page views, you save them 20kb of waste.

3) Remove inline style information from HTML

This mostly affects WordPress themes, it’s where style information is embedded with the HTML. It’s called inline CSS. It looks like this:

<table style="padding: 3px 5px; border: 1px solid #CDD;">
<tbody>
<tr>
<td style="background: red; color: #fff;">Error</td>
<td style="background: red; color: #fff;">This is the error message</td>
</tr>
</tbody>
</table>

Why it’s bad…

As with point 2) above, with header CSS, having lots of style information in the HTML also slows down the page loading time. If you have exactly the same style information on several pages, then you have considerable waste. It also makes the style harder to adjust in the future (e.g. colour changes), as the CSS is spread out over many different pages.

How to fix it…

You should use CSS correctly, and give HTML elements a CSS class or ID, so that you can reference them in a CSS file. As in point 2) above, the CSS information is then loaded just once, which is much faster for your website visitors. So split the HTML and CSS into 2 places:

The HTML

<table class="error-table">
<tbody>
<tr>
<td>Error</td>
<td>This is the error message</td>
</tr>
</tbody>
</table>

The CSS (which goes in a CSS file, e.g. styles.css for your WordPress theme)

.error-table {
padding: 3px 5px;
border: 1px solid #CDD;
}
.error-table td {
background: red;
color: #FFF
}

4) Compact your images

Most images are not stored in the most efficient way when you save them in a graphics package. You can get some great savings on page load times if you use an image compacting tool.

There’s a great tool from Yahoo called Smush.it, which will remove all of the unnecessary data from an image file, without damaging the quality of the image. It’s a lossless size-reduction tool (I’m intentionally not using the word “Compression”), so you don’t need to worry about your images looking blocky or distorted.

The Smush.it tool preserves folder locations too. So if you point the tool at a website, it will resize the images and provide a zip file for you to download. When you extract the zip file, you can just upload the complete file structure to overwrite your existing images with their smaller counterparts.

There’s also a Smush.it WordPress plugin, which will compact your images as you upload them via the Media Uploader.

You can save hundreds of kilobytes by compacting your images, so this represents one of the biggest savings you can make in reducing waste data, and therefore one of the most effective performance tweaks you can do.

5) Use WP Minify to compact your CSS and Scripts

Usually, CSS and Javascript files contain lots of comments and white-space (e.g spaces and blank lines). From a developer’s point of view, those comments and white-space make maintenance considerably easier, as the code is easier to navigate. However, your website users aren’t going to be doing anything with your website source code, so those extra white-space characters and comments are pure wastage.

WP Minify - Before minification

WP Minify – Before minification

Therefore I recommend using a plugin such as WP Minify, which will compact all of your stylesheets and scripts automatically. You’ll typically achieve a 30% to 60% reduction in script sizes as a direct result.

WP Minify - After minification

WP Minify – After minification

For Developers: The reason why I suggest using this plugin rather than compacting scripts before uploading them to the website, is so that the Minify engine can work its magic on scripts and stylesheets that you haven’t developed. e.g. Scripts from 3rd party plugins. Spending your time compacting those scripts each time a user updates a plugin is possible but impractical if you’re as busy as I am! So WP Minify gives you quick results with the least fuss.

6) Using WordPress caching plugins

Using plugins that cache your website files and database queries can considerably improve your loading times. You can shave valuable seconds off each page load simply by configuring your caching plugin correctly.

If you’re not that technical, then WP Super Cache will give you great results, just by selecting all of the Recommended options. If you’re more technically inclined, then you definitely need to spend time with W3 Total Cache. Mastering W3 Total Cache takes a long time, but as you do, you’ll find your websites perform very well indeed.

7) Enable gzip Compression Mode

gzip

The above caching plugins have a gzip compression mode, which will compress all of the data sent from your server to your visitor’s web browser. The compression is done on-the-fly, and can easily reduce page load times by as much as 50% yet again. It’s a bit like automatically sending someone a zip file of your website each time they visit a new web page.

Using gzip mode can have a dramatic effect on page load times, but beware, some servers don’t properly support gzip. When that’s the case, your visitors just see garbled data. So just make sure you test your website in the major web browsers to make sure all is well.

8) Have a Facebook Fan Box? Cache it!

Facebook Like Box

If you have a Facebook Like/Fan Box, you’ll notice that it does take a little while to load. However, Facebook fan boxes are great for getting valuable traffic from Facebook, so they are worth having.

I’ve been having great results with the Facebook Fan Box Cache plugin. The widget massively reduces the number of HTTP requests, making your website finish loading much sooner. You will need to add your own CSS to make it look good, but I find that the improvements in loading times are worth it.

Conclusion

So there you go, 8 quick wins to improve the performance of your WordPress website. Although some of the tips require some technical ability, they are pretty easy to implement, which is why I justify them as being quick ;) !

In an age of impatient visitors, you want your website to load within 2-3 seconds. Just remember, shaving off milliseconds and kilobytes from different areas of your website will add up to reductions of several seconds in overall page load times. Using a plugin such as YSlow for Firefox will help you diagnose where your performance problems are.

I wish you good luck with your tuning adventures! Please do share your own tips for WordPress performance tweaking in the comments area below.

Your First Name * Your Email Address *

Written by Dan Harrison

Dan Harrison is the lead developer and director of WP Doctors Ltd, a web development agency specialising in writing bespoke tools for WordPress-based websites that save time, hassle and money. You can follow Dan on Twitter here: @DanJHarrison and WP Doctors here: @wpdoctors.