Improving the Performance of your WordPress Site: Part 1

Throughout this guide I’ll be showing you how to improve the overall performance of your WordPress site. This main elements of your site we’ll be looking at are your theme’s code, and your database, site performance is something you can spend countless hours working on. Though a few smart decisions and half an hour can make a massive difference. I’ll also point out none of this is WordPress specific, though it is written with WordPress in mind all these changes can be used on nearly any CMS.

Example Site ZOMG How

As an example throughout this article I’ll be using my gaming site ZOMG How.
Its running WordPress 3, using The Source with no modifications, as its theme. I’ve also disabled plugins while working on it.

Heres the sites stats before I do any work to the site. Though I’ll mention the theme is a well coded, and the hosting is really great. Blacknight’s hosting and support is 1st class (Author’s personal opinion. We don’t endorse it. Check out Eleven2 which we recommend for all your hosting needs ).

Stats Before

Average loading time: 3.3+ seconds
Site size:
320+ kb

Not a slow site then, some might even call it a fast site! Though lets see how much this can be improved on.

Stats after

Loading time: 1.2 seconds (quickest tested)

Site size: >220kb

Note:

I haven’t shown exactly what improvement each tweak made to my site, as it was too hard to be exactly sure as I noticed there were too many variables. Sometimes it seemed tweaks actually slowed the site down, when really it was a family member using the internet connection for downloads. Or even the amount of traffic the site was getting. This is probably a sign my sites out reaching its hosting. I’ll be covering what do with regards to databases in Part 2.

Hosting

As we are aiming to cut down the loading time of your blog, these tips will work alot better if you get quality hosting got your blog, as one of the most important factors in a sites performance is its hosting. Free hosts are quite easy to find now, and though the thought of free hosting may seem great, but your visitors wont thank you for having a slow site.

The hosting plan you decide to go for should cover the amount of traffic you expect to get, though don’t aim for something our of your budget. though eve with a relatively small budget its possible to find quality hosting for around 5 Euro a month. Though the playing field seems level when it comes to hosting you do need to be careful when deciding who to host your site with.

Important factors when choosing your host, and hosting plan:

Make sure it supports WordPress

Aim for hosting with the following features as standard.

  • PHP 5 , four will do though 5 is the newer and better supported version.
  • MySQL
  • .htaccess allows you to have added control over how your site runs.
  • cron jobs

Decent bandwidth. 100GB is more than enough, though again unlimited isn’t necessarily good. As with storage.

Make sure your hosting plan has enough databases for the work you plan to carry out online, though a hosting plan with unlimited databases can be a bad idea as its more open to abuse from other people on the same server as you. Therefore slowing down or even crashing your site. Be sure to read up reviews on the hosting company too (though watch out for “review” with affiliate links). good fast support is always  useful for when you’re having a problem with your hosting. Ask around for people’s thoughts on certain hosts, they’ll more than likely steer you in the right direction!

Something else to note is the uptime of your host: Saad has written a great article on How to monitor your sites uptime

You may also be interested in setting up a CDN ( content delivery network) which stores your static files, (images, css) on different servers around the world. So depending on where a visitor is, the files are loaded from  the server closed to them.

Remove un needed Plugins

Remove any plugins that are unnecessary, a plugin should add to your site and benefit you or your readers. If your blog doesn’t need a certain plugin remove it, and  delete it too. Its only slowing down your site.

W3 Cache

Though I’ve included this very near to the top of the post (For anyone one who is too lazy to read the whole post ), I do recommend completing the other steps first, as they ensure your site is well-built from the ground up. And then this plugin will further increase your performance


W3 Cache has become an increasingly popular plugin in recent times, seemly replacing WP super Cache on many big sites too. You more than likely already have it installed on your site too! thought be sure to spend time tweaking its options as they can make a massive difference in the loading of your site, as well as the strain on your server.

This awesome plugin by Frederick will actually do alot of the work involved in speeding up your site too. The features list is too long to post without having the post overwhelmed by it too! So I’ll only run through the basic functions of it.  You can find the full feature list here

  • Caching of (minified and compressed) pages and posts in memory or on disk
  • Caching of (minified and compressed) CSS and JavaScript in memory, on disk or on CDN
  • Caching of RSS (comments, page and site) feeds in memory or on disk
  • Caching of search results pages (i.e. URIs with query string variables) in memory or on disk
  • Caching of database objects in memory

Though this plugin covers alot of what you need to do. I think it best to have your site optimised as much as possible, as well as using W3 Cache.

Optimising your sites code

For the next few parts the following addons (sometimes known as extensions) will prove invaluable if you want to shave those seconds, ans possibly milliseconds off your loading times.

  • Firefox you’ll need this for the addons I’ll recommend you to use
  • Firebug though you’ll probably already have this if you develop with Firefox
  • Page Speed From Google which allows you to analyze how long it takes the files that make up your site to load.
  • YSlow Another great tool, from Yahoo this time, it’s quite like Page Speed

It’s a good idea to familiarise yourself with these great tools as they’ll be a great help improving your site performance and benchmarking the results.

Cut down on server requests

The overall idea of this is by reducing the amount of http requests and packet transfers you’re site will load quicker. There is a massive amount of ways to do this, I’ll cover a few of them in this post.

Instead of having 5 css files at 10kb each, it’s better to have just the one file weighing in at 50kb. Though the amount of data remains the same, the amount of http requests has been reduced by 5. This may not seem like a big improvement, but as the downloading of each file (and every file for your site) include a setup and teardown phase this really reduces loading times.

When you also take into consideration browsers only down load a certain amount of files from one domain at a time (by default I believe its 2 from both FireFox and Internet Explorer) it means that instead of downloading other files your visitors are busying going through all your css and javascript files. Its something to take into consideration, as it can make a massive different to your site.

Optimising CSS & JavaScript

With the above informatinon in mind aim to lower the amount of css and javascript files your theme has, for example include your reset.css in your style.css, and for wp-page-navi add it to your style.css too.

Some plugins add css or JavaScript to your theme It’s a good idea to filter these files out and add them to your own style.css or a javascript file.

Justin Tadlock has written a  useful guide on how to disable scripts and styles belonging to many plugins.

http://justintadlock.com/archives/2009/08/06/how-to-disable-scripts-and-styles

You can also minimise you css with CSS Drive’s CSS Compressor to lower your style sheets size by that extra bit. It all adds up!

Images

This includes images both in the themes design, and any you use in your posts.

Image optimisation
Yahoo has a great image optimisation service called Smush.it which optimising the size of images without reducing their quality. WP Smush.it adds these services via the smush.it API to WordPress

Replace images with CSS

With the rise in CSS3 we can now add alot of features to a design, that required images before. Think such as shadows and gradients. I’ll quickly give you an example of how to do each.

Adding a gradient with css

background: -moz-linear-gradient(top, #0099ff 0%, #0066cc 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#0099ff), to(#0066cc));

Adding box shadow with css

-webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.7);-moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.7);
box-shadow: 0px 2px 5px rgba(0,0,0,0.7);

CSS Sprites

Depending on the amount of images left in your sites design you may want to consider using a css sprite which will further decrease the amount of http requests when loading your site. Though this step does require alot of work. Sprite Me does make this job alot easier though.

After reading this you’re now on your way to a faster website!

DarrenM

I'm Darren ,A teenager living in Ireland.I run a few different sites around the web, zomghow.com being my newest addition Connect with me on twitter. Look forward to hearing form you!

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Nathan says

    Thanks for sharing such a valuable information. It is really going to improve performance of my wordpress site.

  2. sanjeev says

    can you please mention the version of the plugin of w3-edge..so it will help us alot more

  3. Derick Schaefer says

    Load time is one thing. Serving up content under duress is another. The items outlined in this blog are excellent for load time improvements. If you want to preserve your load time with 500+ concurrent users, you have to get Apache out of the way. In our opinion, using NGINX as a reverse proxy in front of Apache does this very reliably. We do this for all VPS plans as well as shared hosting. We’ve had up to 4400 concurrent users on a VPS with 2-6 second load times. Apache would have crashed after the 500th user.

  4. says

    Great information! I did write the same post a while ago, but in different approach and technique beside using plugin. . I guess this link might interest you. Guide To Improve Your WordPress Blog Performance For Free: http://bit.ly/hIDlgw

    Cheers

    Ivan

  5. Hashem E.Zahran. says

    I’m new in using wordpress, and I’ve installed one of elegant themes myself on my personal site from about 2 weeks ago, I’ll start optimizing it the same way you did, as i can see some slow loading on my site especially of the user is opening it for the first time. Thanks for those great tips and I’ll be waiting for your next part.

  6. PhamKy says

    I think if you have a good host, use W3 Total Cache plugin, all image save with normal or high quality and your theme codes are valid with W3C validator you will improve your performance wordpress blog!
    My site do all that things and i have load time is 2.8 seconds for 147.7 KB! (I use Siteground hosting) You can see my site by click to my name in this comment ^^ Thanks for post!