Below we have listed a complete guide to increasing the speed of your wordpress blog. Over the course of several months we have worked through all of these steps and more to improve the speed wordpress works at. We have used all of these steps to reduce the overall load time by 60%. There are a lot of things you can do to reduce the load times of your WordPress blog, but here are some things we have tried that have actually worked!
There are many factors that cause your WordPress site speed to change. Everything from the server, the database to the theme you use. As Google has started to take speed into account site and for their own user experience in general, you need to begin to speed as a factor in the design of your site, and something that a long-term problem is for your SEO.The main reason you want your website to work fast, is that it has been shown to be a major factor in conversions. Yahoo and Google have shown that one second increase in speed can mean a 20% upward adjustment of the conversions!
-2 Choose the right host
This is a hard one to do if you are already with a host, or have a website that has been around for a while. The difference in having a good web host can be quite profound. Choosing the right host is critical, and can make the difference of a few seconds when a website loads. Considering it is what all your systems run on, it can make the difference between a 5 second load time, (the slowest 60% of websites,) and a 2 second load time (the fastest 10%). The key measure of a good host is the time to first byte. This is the time it takes for the server to send that first bit of data after receiving the request.
So how do you find out which one is the best before hand? Well here is a post about the fastest web host. Other than that, if you are looking for a fast web host in your local area, the only thing you can really do is look in forums for people mentioning speed and run tests on the home website to see if that runs fast on its own.
-1 Backup Your Website
The most important thing you can do before you start tweaking WordPress is to Backup your database. If you are going to go an start pulling things to bits, adding new plugins and changing the way WordPress works you MUST back up your website. There are plenty of good back up plugins available from the Wordpress plugins website, but ideally you want one that will back up your theme files and the database.
0. Benchmark Yourself
The next thing you need to do is set a standard for your website. We use Load Impact to see where we can make savings on our website speed. As you can see from the image above, Load Impact is a free service that shows you where the time is going into loading your website. The best thing about Load Impact is that it offers you all the elements that are loading on your website in an easy to understand manner. We use Load Impact later when you want to select elements that you don’t need to load. When we started this process, we were getting load speeds of around 8 seconds. According to Google Webmaster tools, we were getting an average of almost 10 seconds, which in website terms is an absolute eternity. The only upside was that we saw one of our competitors benchmarking their own website and getting around 12 seconds!
1. Install Page Speed from Google
There are other plug ins that offer good reporting on website speed and changes you can make. We recommend Page Speed by Google for a few reasons. One is that it is easier to see, and copy and paste the links from, resources that are slowing your website down. The other reason is that it is Google’s own system, so you know you are getting the recommendations straight from the horse’s mouth.The only word of caution is to not rely on Page Speed too much. Our score went from 70 something to 80 something with one small tweak, and yet we still did not see a major change in the speed of our website. In fact we found the website slowed down. So following the rules does not always mean a better website.
2a. Choose the right WordPress Theme
Choosing the right theme will make a huge difference in the first place. There are a few criteria you want to go off;
- Menu bar across the top.
- Space for your logo in the top left hand corner.
- Background colour of the body (main text area) is white.
- Stretchable side areas (outside of the body)
- CSS menu (not images)
- Reduced Javascript and CSS
We have written two posts on the best theme for business and the best wordpress theme for speed before. These give you a good idea of the free themes you can use that work well for any business, and are lightweight and fast. The main two things you are looking for in a theme is a CSS menu, which is usually standard, and no redundant CSS and JS. If a theme is build as a child theme, this can leave a lot of CSS unused. There are other consideration as far as SEO goes, but these are the main ones for speed.
2b. Think Low Impact Design
Another part of selecting the right theme is making the design low impact overall. Whilst there are some things you can do with caching to reduce the impact of your design, the first visit from users will require them to download all the images and files on your website. So what is low impact?
- Use a colour as the background, not an image
- If you have to use an image as the background, make it a small gif that repeats
- Keep header images and logos as small as possible
- If you are using images in the sidebar or post, make them as small as possible, and don’t use too many
3. Do not scale your images
The first and biggest change you can make to your website is by not scaling images. Within WordPress pages it is easy to alter the scale of an image just using the tools available in each post. DO NOT do this! Although it is tempting, for every small tweak of an image, you are actually wasting a HUGE amount of time for page loading. You really only have two choices;1. Use a photo editing tool to upload a 72dpi optimised image. This is the best option by far, as you will see later on.2. Use the WordPress standard image sizes when you insert an image. This is a secondary option, but not bad if you are in a hurry or don’t have access to photoshop. WordPress does some compression to make the image smaller, not great but useable.
When you scale your images in a WordPress page or post, WordPress uses HTML to adjust the dimensions. This basically means that the browser downloads the full size image, and then shrinks the image to fit the dimensions. As you can imagine, this is a huge waste of resources.
You can use your page speed plug in to see which images have been scaled by accident. Before you change the images on your page, look at point 4;
4. Optimise your images (Image type and lossless compression)
I am not going to go into what lossless compression is, but choosing the right image type and compression can save you a lot of loading time. Using software like Gimp or Photoshop can help you make the right choices for image type, because they show the size of the images when you save them. However two rules of thumb apply;
1. Use JPGs for images of “scenes” and “people” and try to lower the quality down as much as acceptable.
2. Use PNG 8/24 for logos and buttons. You can use a GIF too.
Lossless compression on an image can save you up to 33% of the image size. Using the right image type of backgrounds and logos is particularly important because these will be loaded several times by the browser.
5. Install W3 Total Cache
We installed several different cacheing plugins and speed plugins, and this was the only one that a) worked and b) did not wreck our theme and plugins. W3 Total Cache has all the options you need to increase the speed of your website. And actually, if you work through all the options available on this plug in, you will learn how to speed your website up as you go. There are many reasons why a caching plugin like this is good for speed. It cuts down the size of your pages automatically, loads pages as HTML and offers you methods to incease your speed that you might not have thought of.
It is better than WP Super Cache for a few reasons.>
1. It is easier to use.
2. The second is that it has better support for minify and CDNs, which we will come to in a minute.
3. Out of the box it compressed and optimised our website better.
6. Minify
There are a couple of minify plug ins for wordpress, but W3 Total Cache comes with it as standard. Minify has the biggest impact of Javascript and CSS. Another big benefit of W3TC is that it allows you to change the order of when JS and CSS loads. If you use your Load Impact tool, you can alter the order of these scripts so they don’t hold up the process. Some browsers will not load anything until all the CSS has been read, and the same goes for JS.All minify really does is it removes spaces and comments from your code, to give browsers only what they want.
The best thing about W3TC was that you can minify the JS and CSS, and then move the files around to make them load in the right order. If you use your Load Impact page correctly, you can see what CSS files and JS files hold the process up.
7. Use Google Libraries
The difference using jQuery from Google makes is a 70kb jQuery from Google loads about 25% faster than another 1.6kb file loaded from our server. Overall, using this method, we saved another 10%. If you do nothing else to speed up your website, it is worth looking into the “Use Google Libraries” plug in. jQuery is a big block of javascript that is usually used on every page and can take up a huge chunk of your loading time.
There is an alternative for those who are keen to get their hands dirty, and that is you can use the Google:Load command to call the file directly from Google. By offloading the burden onto Google, you not only get a faster loading time, but you will also always get the latest and greatest version.
8. Use a Content Delivery Network
There are two aims of using a CDN. One is to use a faster server to host things like images, which take ages to load. The second is to change the burden of loading objects from just one server to multiple servers. Using a CDN usually means moving website assets off your slow shared server and onto a faster server that might even be a cloud server. However there are a few options, free and paid, that can also be as complex or as easy as you want them to be.
1. Use Amazon S3. This is a paid option, but it is dead easy to use, especially if you have W3TC installed. Basically you want to offload big images onto the server, as this will reduce the burden on your own server. The downside is that this will cost per MB, not a lot, but it will cost. Some WordPress gurus have experienced a 50% increase in web speed using Amazon S3, so if you have the money and time, it is worth it.
2. You can use the Coral CDN, which is free, but we had really poor results with it, so we abandoned it. It might be worth looking at if your website is getting smashed by Reddit or something.
3. Hosting our own CDN. It does not shift the bandwidth burden on to anyone else, so it is not so good if you are looking to save on that. However it does use some browser trickery to parralellise the downloads. All this means is that browsers will grab resources simultaneously. There is a good post by riaz.net on setting up your own CDN. Basically all you do is set up a subdomain that just points to the root of your website. That means the browser can call images.yourdomain as well as javascript.yourdomain.
Overall using our own CDN decreased the load time by about 20%, but as we said, if you are looking at saving bandwidth and increasing the speed seriously, you should set something up with S3.
9. Remove redundant post revisions
This was the most obvious move we made, but only at the end. Our blog has been up for nearly 3 years, and some of the pages had nearly a hundred revisions. Keeping revisions can be redundant because we back up our blog every day.We found that our WP_Posts database had reached nearly 15MB, with over 90% of this space taken up by revisions. So we installed Delete Revisions, a plug in that allows you to remove all the post and page revisions.The most noticeable effect on this was that, reducing the database, reduced out time to first byte by about 50%.
10. Optimise your blog (remove dead plugins/themes)
The last thing you should look at doing is removing redundant plug ins, and themes, and making sure your code is up to date. At the moment we have not seen any major differences between versions of WordPress in terms of speed. However plugins do change, and if you are not using one, then you should get rid of it.Also when you get rid of a plug in, you should have a look at the database and see if there is anything left behind. From time to time we have a look at our database and find tables left by old plugins, which can slow down your blog.Another thing worth thinking about is checking if there are any smaller plugins that do the same job. We did that and found W3TC, so you never know what you might find!
11. Optimise your database
Sometimes your database can start to carry overhead, which will slow your website down. You can use PHPmyAdmin to reduce the overhead you have, or you can use a database optimise plug in.
12. Using FastCGI to process PHP – Reduce TTFB
We have recently set up our WordPress site to use FastCGI instead of CGI to process PHP. We have found that this has reduced our TTFB from around2 seconds to 200ms.
FastCGI is a protocol which allows a web server such as apache to invoke another program to serve a page, but without the overhead of CGI (which needs to fork a process for every request) or the security problems of running scripts in-process in the web server (discussed above).
To set this up, start by creating a directory called fcgi in the root of your web site. Inside it create a script called php, containing the following:
#!/bin/sh PHPRC=/etc/php5/fcgi exec /software/bin/php5 "$@"
Make it executable. Also create a .htaccess file in the same directory:
Options +ExecCGI SetHandler fastcgi-script
This tells apache to run scripts in the /fcgi/ directory as persistent FastCGI processes. The next step is to have your individual PHP files processed using this interpreter. To do this, add the following lines to a .htaccess file in the root directory of your site (create one if none already exists):
AddType application/x-httpd-fastphp .php Action application/x-httpd-fastphp /fcgi/php