Speeding Up WordPress

Wordpress Speed

Several weeks ago I decided to speed up my WordPress blog since I thought it was running quite slowly. In the last few weeks I’ve been doing a lot of research and this article is what I came up with on how to best increase the speed of a WordPress blog.

Before we can start optimizing our WordPress blog we first need to see how long it takes to load it and what it’s size is. To be able to do that I would recommend using tools such as Pingdom or Firebug with an additional add-on called YSlow.

Through these tools you should be able to measure your progress, i.e. a decrease in load time.

Before using all these little tweaks make sure that you back up your blog first!

1. Basic Optimization

1.1 Choosing the Right Web Host

First of all it is really essential to use the right web host. If you have not yet signed up for web hosting than take your time to pick a web host that you might think is good, also take a look at reviews and review web sites.

If you don’t know what kind of web hosts are available then take a look at WordPress’ web hosting page.

1.2 Upgrade WordPress

Upgrading to the latest WordPress version is also necessary because upgrades usually include several performance upgrades and they further fix bugs which could slow down your server.

Therefore download the lastest WordPress version.

1.3 Reduce Reliance on External Web Sites

This is another general aspect that you can improve on your blog, not relying heavily on other web sites. One problem you encounter when you rely on other web sites is that additional DNS queries have to be made which eventuallyslows down your blog.

By reducing the reliance on external web sites you improve your load time since the number of DNS queries are reduced.

2. Template Optimization

Code Optimization

2.1 CSS Includes

All CSS files that are used on a web site should be included in the header section or the header.php file for that matter. Combined with flushing early, this will increase the speed of your web site since all the CSS files are included in the header and can be downloaded right after flushing.

Also putting CSS files in the header means that the content can be rendered progressively, i.e. it can be presented fast to the visitor. This is especially important for people with a slow Internet connection as loading the CSS sheets will indicate progress to the visitors.

2.2 Javascript Includes

Javascript is used on most web sites these days. Usually though Javascript is not used to render content or anything of real importance. Therefore it makes sense to move it into the footer (or footer.php). Another issue is that usually a web browser can download two files in parallel, with Javascript this is different:

While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.

This makes it necessary to move all the Javascript files to the bottom of your web site.

2.3 Internal CSS and Javascript

Every sort of internal style sheet or Javascript code should be avoided if you aim at increasing your web server’s speed. The reason for that being that servers can’t cache internal code, and therefore every time a person visits your web site the internal data is downloaded again. Ultimately it increases the load on your web server.

Therefore try to switch internal stylesheets to external ones.

2.4 Flush Early

A web server has to generate a web site every time a person visits it.  Usually the web server creates the whole code and then sends it to the visitor. By using the flush function from PHP the server sends a message to the browser right after having created the header. That way the browser can already load the CSS files linked to in the header while waiting for the other requests.

To speed up your web site add this to header.php file, right after the </head> tag:

<?php flush(); ?>

2.5 Database Calls

Reducing the number of database calls is another requirement to speed up WordPress. This is easily done by swapping dynamic properties to static ones:

Instead of

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

you could use

<link rel="pingback" href="http://yourwebsite.com/xmlrpc.php" />

which is static and thus does not require a database query. If want to read more about this then head over to Joost de Valk’s blog and his post about speeding up WordPress.

Note: If you use a cache, such as WP-Super-Cache, it might not make a difference but it’s still good practice.

2.6 Plug-in Code

Everyone using WordPress is certainly using plug-ins because they are great and save you a lot of time but one problem with them is that they usually add code to your web site that you actually didn’t know about.

Because of that it is important to take a look at the raw source code of your web page from time to time. As I was searching the web I found a web site with the following code in the header of the homepage.

<link rel="stylesheet" href="http://website.com/dd-formmailer/formmailer.css"
 type="text/css" media="screen" />

dd-formmailer is, as the name suggests, a form mail plug-in. The only thing wrong with it is that it’s included in the homepage even though a mail form is not used on it. It only makes sense to load this code in one of the pages for example the contact page. So one way to make sure that it’s only loaded in the pages is to just tweak the code a little bit to the following:

<?php if(is_page()) { ?>
<link rel="stylesheet" href="http://website.com/dd-formmailer/formmailer.css"
type="text/css" media="screen" />
<?php } ?>

if(is_page()) is a PHP query to check whether the site loaded is a page (WordPress understanding of a page, they are created in the page section of WordPress) and if so the code is added to the header.

Now instead of loading the CSS file on every page, it is just loaded on WordPress pages.

3. External Objects

Now will take a look at how to optimize external objects such as Javascript, CSS and image files.

3.1 Reduce Number of External Objects

This is obvious but I still wanted to mention it. Most of the time people think that they cannot get rid of a stylesheet or an image but usually you easily could. Just ask yourself whether a Javascript, CSS or image file is really needed and then try out ways to avoid using these files.

Another way to reduce the number of external components is to just combine similar files into one file. You have to be careful though not do use this technique too much, for example it does not make that much sense to add the CSS code for a form to your style.css if that form is only used on one particular page of yours.

3.2 Compress CSS Files

XHTML and CSS are becoming more and more popular these days. Since this means relying more on CSS and less on HTML, the CSS files are becoming bigger and the HTML code smaller. Therefore it is necessary to compress your CSS files if you want to speed up your web site.

I used a plug-in called WP-CSS which compresses your CSS files. By using it I went from 18.9kb to 4.5kb with just one CSS file.

There are also web sites that offer compressing CSS files through your browser, such as CSS Drive.

Use Shorthand CSS

Shorthand CSS is a technique to reduce the size of your stylesheet files which is supported by every browser. Instead of writing:

.link { padding-top:3px; padding-right:10px;
padding-bottom:5px; padding-left:2px; }

you could write:

.link { padding: 3px 10px 5px 2px; }

which is a much shorter version of the code above. WPCandy has created an article which describes the steps taken to reduce CSS files more perfectly than I do.

3.3 Compress Javascript Files

Javascript are usually rather big files and thus it  is essential to reduce their size through compression. Here is a list of Javascript compressors taken from an excellent article on Nettuts about speeding up WordPress:

3.4 Reduce the Size of Images

The load put on servers these days is tremendous with people using lots of images in each article. Reducing the size of images should thus speed up your blog too.

One step to do this is to use an image editing software. With this software you can reduce the height and the width of a picture. This is important as this is directly related to the image’s size. If you want a picture to take up the whole width of your content section then go ahead and scale its width down to 500 pixels as this is the usual content section width.

Smush.it

Another step to implement is to use software that actually reduces the size of an image even further. Smush.it is a great web site which decreases the size of a picture to a minimum without reducing its quality.

Now there is also a WordPress plug-in available that will take all these steps automatically. WP Smush.it sounds great and probably is a huge time saver.

4. WordPress Plug-in Optimization

4.1 Reducing the Number of Plug-ins

Obviously this is the first step to decrease the load time. Every WordPress blogger uses lots of plug-ins but are they all really needed?

Just ask yourself whether a plug-in adds value to your blog. If it does than keep it running, otherwise get rid of it.

One thing to keep in mind is that comment plug-ins usually add a lot of load onto your server.

4.2 Use WordPress Caches

WordPress Super-Cache is a great plug-in which decreases the load time of your blog a lot. What it actually does is to cache the web site, meaning it saves the page locally instead of generating a new page every time a person visits the web site.
The same applies to W3 Total Cache which is supposed to be even better than WordPress Super-Cache. Definitely check it out. I use this plugin on my blog and it’s great especially for bigger blogs.
Remember to only install one of the plugins mentioned above!

4.3 Split Comments into Different Pages

If you are getting lot’s of comments on your blog then it might make sense to split the comments onto different pages. You can do this via your WordPress dashboard.

Go to Settings -> Discussion. There should be an option Break Comments into Pages of … to activate it just click on the check box.

4.4 Use PHP Speedy

PHP Speedy is another plugin that can help your WordPress blog. It speeds up WordPress by reducing the number of scripts the browser has to download. It does this using compression. Be sure to take a look at it.

5. Database Optimization

5.1 Optimize your Database Every Week

As Noupe pointed out in an article, it is important to optimize your database. You can either do this manually or just use a plug-in, either way should work fine.

If you want to use the plug-in than head over to Yoast and grab his Optimize DB plug-in, upload it to your blog and activate it.

phpMyAdmin Database Tables

If you want to do this manually then go and log into phpMyAdmin. Find your WordPress tables and select all of them by clicking on the check box. At the bottom of the page you should then be able to choose the Optimize Table and/or Repair Table option. This will reduce the database size.

5.2 Disable Post Revisions

I think post revision is a great feature of WordPress but have you ever used it? Have you ever thought about the additional load it puts on your database? I haven’t until now.

The problem is simple with post revisions. To be able to open up an old post revision, WordPress has to save the old article in the database. This means that an article is put twice into the database if you have edited it twice. Think about something even worse. Maybe you have been editing an article for a long time. Maybe there are 10 post revisions (which is not that rare) saved and this practically means that the article exists 10 times in your database.

While researching I found a post which explained how to disable post revisions all together. Just add this code to your wp-config.php file:

<?php define('WP_POST_REVISIONS',false); ?>

5.3 Use a WordPress Database Cache

Queries to the database are made everytime a person visits your WordPress blog. A cache is vital to reduce the number of queries and therefore speed up your blog.

I recently found a WordPress plug-in that does just that. It caches, again meaning it saves queries locally, and thus reducing the number of queries made to the database. The plug-in is called DB-Cache, upload it to your blog and then activate it.

5.4 Delete Unnecessary Database Tables

This might be necessary since a lot of plug-ins use the database to store information. When the plug-in is no longer needed you just uninstall it, right? No. You also have to delete the entries the plug-in made in the database.

Not every plug-in does leave traces in the database but the heavier plug-ins do. To remove a table, log in to phpMyAdmin and select the WordPress table. Click on the check box next to the table you want to delete and then at the bottom on the page, choose the option Drop.

Be very careful about deleting tables in your database as you might end up removing the wrong table.

If you do disable post revisions it’s advisable to also delete the post revision table all together but as said before always back up. Here is the query to delete post revisions:

DELETE FROM wp_posts WHERE post_type = "revision";

Conclusion

This is all I was able to come up with until now, so if you want to give feedback or add something to the article, then please contact me. I will of course update the article over time.