How To Increase The Loading Speed Of WordPress Blog

by Bob Alpakar on May 27, 2011 in Articles 17 Comments

Today it is the matter of seconds on web browsing. Based on researches on website loading speed it has been said every second added to loading time cause a percentage of users to close the page which results to traffic loss. Even loading speed affects SEO as search engines ranks web pages to how fast they load. Slow speed oppress page views and cause users to have bad experience while surfing on you pages and become a never come back user.

There are around 100 million WordPress blogs and most of them mainly running by only a person who literally called blogger. If you are one of them, I recommend spare some time to deal with your site performance. In this article I mentioned most of main technics and tweaks to speed up your blog.

First step: test and analyze your website

Most of bloggers think that their blog is fast, but they don’t assume that the site has been cached on their browser therefore It is not accurate to test speed from their own computer. There are some tools that analyze your site speed based on some technics which counts the loading speed of each object and make a report to analyze. Pingdom is a free test tool to start with. Right now go to tools.pingdom.com and start testing, then come back to read the rest of the article.

If your site speed is less than 5 seconds, you don’t need to do anything, go ahead and enjoy with your site
If your site speed is more than 5 seconds but less than 10, you still can have a chance to reduce it few seconds, so keep reading.
If your site speed is more than 10 but less than 20 seconds, you should worry about it. Right now you might lose your users.
If your site speed is more than 20 seconds, I am afraid your most of users close the page even before loading completely; I recommend you continue reading to see how you will tune your website.

Find out why slow…

Yslow is an excellent tool to evaluate your site performance

Yslow is an excellent tool by Yahoo to test your site components to find out what actually makes your site slow. It is an add-on which can be installed on Firefox and based on 22 rules it gives an overall grade as well as a grade to each rule defined on Yahoo performance analysis. So you can monitor your blog problems and start to solve them. I will explain some of those rules in this article.

Disable unnecessary plugins

There are pros and cons for using plugins. Yea, one of the cool features of WordPress is to support pluggable codes which some of them makes life much more easy. But there are many that they are just cool and fancy and they don’t give any benefit rather than adding some more extra load to your lovely blog. If your content is really good you visitors certainly will not leave you because you just don’t put that crappy loading Plugins. Even some plugins have CSS, JavaScript files stand alone and create tables on your database which means more queries will take place. If you test how many queries have been sent to database you might ask is it actually necessary to use costly plugins? If you really need to use a plugin, search the best one for your need and evaluate how will make your site attractive. If you have some knowledge about coding, look for alternative solutions to write a custom scripts to avoid using plugins.

There are some best practices on using plugins on specific occasions so you load plugins if needed.
For example if you need to insert a call to a certain function of plugin do NOT just put that way

<?php call_to_plugin(); ?>

Instead make a condition as follow:

<?php if(function_exists('call_to_plugin')) { call_to_plugin(); } ?>

Function_exists is a php function which checks whether there is a function defined as call_to_plugin or not, so you prevent from errors if the plugin does not respond or you deactivated and forgot to remove this function from your theme files.
You can also use IF condition to customize its execution on different kind of pages for example:

if(is_single() && is_page()) {

if(function_exists('call_to_plugin')) { call_to_plugin(); }

}

So by using this condition you just simply ask function to load on your post and page templates, as you may not need to load it on your home page or on archives and search templates. This is a good practice to use resources wisely and call on a needed condition.

Remove unnecessary dynamic php calls

If you use a theme of course you won’t use it somewhere else on different blog, therefore stop using dynamic generated data. There are some dynamic information that WordPress query to database to retrieve them, for example:

<?php bloginfo('charset'); ?>
<?php bloginfo('name'); ?>
<?php bloginfo('description'); ?>
<?php language_attributes(); ?>
<?php bloginfo('html_type'); ?>

These are some functions that you might never need to get them from database unless you make a theme to sell to public. Don’t forget each simple query to database is a cost for your server and makes your resources busy.
You can also use some filters to remove unnecessary calls from header that makes your HTML head section crowded and more queries to database. You may place the following filters on your theme functions.php file to prevent getting such data.

remove_action( 'wp_head', 'feed_links_extra', 3 ); // Display the links to the extra feeds such as category feeds
remove_action( 'wp_head', 'feed_links', 2 ); // Display the links to the general feeds: Post and Comment Feed
remove_action( 'wp_head', 'rsd_link' ); // Display the link to the Really Simple Discovery service endpoint, EditURI link
remove_action( 'wp_head', 'wlwmanifest_link' ); // Display the link to the Windows Live Writer manifest file.
remove_action( 'wp_head', 'index_rel_link' ); // index link
remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 ); // prev link
remove_action( 'wp_head', 'start_post_rel_link', 10, 0 ); // start link
remove_action( 'wp_head', 'adjacent_posts_rel_link', 10, 0 ); // Display relational links for the posts adjacent to the current post.
remove_action( 'wp_head', 'wp_generator' ); // Display the XHTML generator that is generated on the wp_head hook, WP version

Even showing WP version which included on above filters makes hackers job easy as they get to know what version you use. Each version of WordPress has security leak (the worst is that also you use old versions which has alot of security issues) so hackers take advantage of this extra info to attack your blog.

Choose good web hosting

Image by Craig Rodway

Well, there are thousands of web hosting companies but most of them use old and out-dated machines, although they are cheap but not that much considerably much. You can spend some few dollars a month and use excellent servers that proved them on the market with their high quality. If your daily pageviews are less than 1000, you definitely don’t need to use VPS or dedicated servers which might be very costly and useless for you. As an example I recommend Media Temple, though they offer a bit expensive service but with few dollars you feel yourself premium and special with their excellent care to customers and quality as well.

Move scripts at the bottom

The reason for this rule is that, in fact scripts block parallel downloads. It means when browser is busy with downloading scripts NO other files such as images and other elements could be downloaded parallel to JavaScript files. Therefore it is necessary to put them at the bottom of HTML document in order to get page layout loading before scripts. But unfortunately in WordPress you can’t move scripts to bottom as on the core it has been implemented to register JS file to wp_head() instead of wp_footer. However solution for this lack lies on using some few lines of filters to get them at the bottom without bothering WordPress core:

place the following into your functions.php

remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 1);
add_action('wp_footer', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_head_scripts', 1);

Upgrade to latest wordpress version

By each new version of wordpress you get many features, but beside all these cool staff there are many speed enhancement and security improvements that come with every new version. So make sure to update when a new version releases. You can even do it right from your admin panel with only one click and automatically in few minutes it will be done. As far as you did not hack the WordPress core files there will not be any danger to your website. but I recommend you always have a backup from your database and files and before doing it on web server first test on your computer’s test server. So you will prevent any unpredicted errors that might be happen and visible to your visitors.

Decrease image sizes and choose best format

Yea, images are one the elements what will show your web pages appealing and enjoyable, but from the other side it has downward effects while getting high volume of traffics. At least you can do some actions that can reduce your image sizes.

Choose the right file format while saving images for web. It is beneficial to give up a little of quality and reduce by 2 time of file size.
Yahoo has a tool called Smush it. that can reduce file size without noticeable quality loss. Even you can download wp Smush it plugin to use in your wordpress blog. Every image you add to a page or post will be automatically run through Smush.it behind the scenes. So you don’t need to do any extra work.

Use less external resources

Avoid using external links and scripts because it is loading a script which may take long time to be loaded. Showing how many users are online on your page or showing off your alexa rank are some examples which doesn’t give any benefit but heavy load time. Even most of the time incomplete page load lies back of those kind of external links that always they are very slow in case of loading.

Optimize your database

Visual guide on where to find optimize table right from your phpMyAdmin

Optimizing your database most of the time improve the performance of your database response. There are 2 ways to manage that:

First login to phpMyAdmin and select all of your database tables and choose from combo box => optimize table. done! you should repeat it time by time every few posts that you publish. This case is possible when you have access to your phpMyAdmin.
Download Optimize DB plugin and do it right from your wordpress admin panel.

What actually optimize table does is to reclaim the unused space and defragment the data file which sometimes can improve performance significantly.

Use CSS sprite

Each request to server whether it is 500 byte or 100 kb still sends a separate request to server. If you have many small images that are not repeatable better to place them into one PNG file and use background position property to each elements. It reduces the number of requests to server and even it is much faster to load one big size image instead of 50 small images. In fact reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.

As an example of how CSS sprite images look like

For more information about CSS sprites you may refer to the following articles

W3 Total Cache: A must have plugin

Using W3 cache tool become a MUST for every blogger. This excellent free plugin makes everything automatic and since it has many features, instead of using multiple plugins and technics you just do it with only W3 Total Cache. Many popular blogs such as Mashable and
TechCrunch use this plugin to handle millions of page views per day.

The main capabilities of this plugin are as follow:

1.Minify JavaScript & CSS:

Minifying your JS and CSS files reduce the file size, but this plugin goes much further. This process takes all of your theme’s CSS and JS files compress and squeezes them into one compact, efficient CSS and JS files.
So it reduces HTTP requests to server and file size. This plugin does not touch to any of theme files and saves another file on web server. Every time when you delete cache (it is an option on plugin) a new file generates based on your new updated files.

2.Caching Pages & Database Queries:

Caching your pages and database is different from caching in your browser. Every one may know that WordPress is dynamic, that means when someone requests a page, WordPress sends some queries to database, executes some functions and generates an static html page based on your theme files. This process is quite costly to be repeated again and again if the data does not change.
W3 Total Cache what actually does is, when a page requested it make a copy of that final html page and save it on memory. So for the rest of requests wordpress will only serve that saved static page. Caching pages and queries save a lot of web server processing resources and it is must if your pageviews are more than 10,000 per day.

3.Optimize Your Browser Cache Settings:

If you have regular visitors to your blog, this option will make your site super-fast for them since this plugin optimize your header expiration, cache control, E-tag and many more which all are important on browser caching.

4.Integration with Transparent Content Delivery Network (CDN)

This capability of W3 Total Cache gives you the chance to import your web files to your CDN storage from your WordPress admin panel.

Conclusion

I tried to mention those technics, tweaks and tools that are important. If you think there are some other efficient and effective ways exist, please leave your comment with your suggestion. So I will update this post to share with others. I hope it would be useful for everyone and thanks for reading.