Webmaster Wordpress

How to make your WordPress site faster

If you have a blog running on a WordPress installation you might have noticed that the loading time of the blog is not as impressive as other non wordpress based sites. WordPress is database driven and is developed with PHP and MySql. Contrary to a static html based website where all the available pages are already present, WordPress generates the pages on the fly with the help of database queries. If you are on a shared hosting, where there are restrictions in CPU usage and system resources, it is very much required to make your WordPress installation as optimized as possible. Failing this your site will be very very slow and increase server load considerably resulting in cancellation of your hosting account. Also a faster site will provide a better user experience and a lesser bounce rate. It has been noted that 40-60% of daily visitors to a site are first time visitors so they come with an empty cache. Making your page fast for these first time visitors is key to a better user experience.

There are various ways to improve the load time of any websites, but in this topic we will primarily discuss about a WordPress based website. Following the methods described below will definitely make your website lot faster as well as reduce the load on the server.

1. Optimizing the header.php

If you look at the header.php file of a WordPress theme, you will see a lot of php codes in it. For the easier usage of themes the theme developer usually pulls lot of data from the database. But when we install the theme we need to make as many option static and hard coded as possible. Making the header of any WordPress theme static/hard coded will reduce almost 10 to 12 queries. Let’s see this with an example of one of our in-house developed theme Mashlife:

We have the following lines in header.php that can be changed to hard-coded code once this theme is installed on a website.

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" />
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/jquery.js"></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/tabber.js"></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/superfish.js"></script>
<script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascripts/lazyload.js"></script>

The above codes can be easily changed to the below code and it will still give the same result.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="" media="screen" />
<link rel="alternate" type="application/rss+xml" title="Sitename RSS Feed" href="" />
<link rel="alternate" type="application/atom+xml" title="Sitename Atom Feed" href="" />
<link rel="pingback" href="" />
<link rel="shortcut icon" href="" />
<script language="javascript" type="text/javascript" src="http://link-to-javascript-folder-in-theme/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://link-to-javascript-folder-in-theme/tabber.js"></script>
<script language="javascript" type="text/javascript" src="http://link-to-javascript-folder-in-theme/superfish.js"></script>
<script language="javascript" type="text/javascript" src="http://link-to-javascript-folder-in-theme/lazyload.js"></script>

The best way to convert the dynamic php code to hard-coded static html code is, by viewing the source of the website and copy those lines directly from the source and replace with corresponding lines in header.php. The above example will reduce the database queries by 10.

2. Optimizing the footer.php

The footer area in WordPress blog is served by footer.php file. This file also contains some lines of code that can also be converted to static hard-coded html code. You can look for Powered by line and also “template_directory” lines in the code and replace them accordingly (refer the tips in header optimization. In our Mashlife theme we can replace the following codes:

<a href=""><img src="<?php bloginfo('template_directory')?>/images/logo-small.png" width="97" height="25" alt="Qlogix Solutions" /></a>
<a href=""><img src="<?php bloginfo('template_directory')?>/images/wp-logo.png" height="25" alt="Wordpress" /></a>

With this one:

<a href="" title="Qlogix Solutions"><img src="" width="97" height="25" alt="Qlogix Solutions" /></a>
<a href=""><img src="" height="25" alt="Wordpress" /></a>

This changes will reduce another 2 queries to the database.

3. External Stylesheet and script:

Put the stylesheets and java scripts in external files so that these files will be cached by the web broswer and will not be downloaded upon every page visits. This will also reduce the size of html document.

4. Reduce the number of http requests:

Each mention of style sheets and scripts in an html/php document increase the http request by one there by increasing load time. So whenever possible combine all css into one style sheets and all scripts into a single scripts. For images, the best method to reduce http request is the use of CSS Sprites.

Also note that the plugins add Database queries as well as style sheets, those style sheets will again take additional queries to retrieve the style information. We can combine these styles with our theme’s style sheet and reduce queries as well as clutters in the website. To see if any plugin is adding style sheets and Javascript, just view the source of the website and look in the header and footer area.

<p id="line28"><link rel="stylesheet" href="<a href="view-source:"></a>" type="text/css" media="screen" />

A code like above indicates that the sharebar plugin in my WordPress installation is adding styles through sharebar.css file. WordPress beginner has a nice post detailing the effects of WordPress plugin to site load.

5. Remove unnecessary plugins:

Use only the required plugins, do not over load your WordPress installation with unnecessary plugins which is not serving any real purpose. Most of the time I am tempted to install plugins to achieve something which is not really required. So always stay away from those plugins. We will publish a list of really important plugins for WordPress in a  future post.

6. Use a caching plugin:

The caching plugins like WP Super Cache creates html version of your WordPress pages which is directly served by Apache. This method of serving webpages does not require processing large chunk of php codes on each request, hence this substantially increase page load time to a higher extent and reduce server load.

7. Minify Javascript and css:

Minifying is the process of removing unnecessary characters, white spaces and comments from the code to reduce the size, which in turn improves the load time. You can use WP Minify plugin to compress and combine your css and javascript files. The WP Minify grabs JS/CSS files in your generated WordPress page and passes that list to the Minify engine. The Minify engine then returns a consolidated, minified, and compressed script or style for WP Minify to reference in the WordPress header.

8. Use Yslow to determine the load issue:

Yslow by yahoo is a Firefox extension which works wth Firebug add-ons. It analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.

The above methods can be performed by any one and will help in page load time to a great extent. There are other methods which may not be as easy as the above and can not be recommended for a newbie, also they may incur cost like using Content Delivery Network (CDN) to serve your static contents.

Please let us know if your site load time increased after following the methods listed here. Also please share any other emthods which you feel will contribute to sites load time without lot of efforts.