Join over 55,891 Subscribers Today! FREE UPDATES!
Get The Only Freelancer crash course you will ever need to read!
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.
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 ).
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.
Loading time: 1.2 seconds (quickest tested)
Site size: >220kb
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.
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.
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!
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 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.
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
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.
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.
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.
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.
Justin Tadlock has written a useful guide on how to disable scripts and styles belonging to many plugins.
This includes images both in the themes design, and any you use in your posts.
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);
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!
Get The Only Freelancer crash course you will ever need to read!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!