Minimizing HTTP Requests with WordPress Themes

How quickly your website is downloaded by a particular user is dependent on a number of factors, including obvious ones like how large the files required to create the page are as well as a few less obvious ones like where the user is in relation to the hosting company providing the website’s real estate. After the total file size of the page though, HTTP requests are probably the other single largest factor.

Right out of the box, before any posts are created or plugins added, and using the default TwentyEleven theme, WP is calling over 10 other files. This is actually pretty darn good, considering how easy it is to stuff your <head> tags with links to do everything from load web fonts to make old browsers HTML5 compliant.

Still, here are a few ways we can reduce that number even further.

Remove Any Unnecessary Files

WordPress is loading the following files by default:

<link rel=”pingback” href=”http://wptest.clicknathan.net/xmlrpc.php” />
I personally don’t get pingbacks. I guess it’s a way of providing a link back to someone else who linked to your site. If I want to do that, I’ll do it manually, I don’t need any automatic link happening in the comments section of my posts. In fact, it’s kind of SPAMmy and makes comments more confusing for readers. To remove it, open header.php and delete this code (line 50):  

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<script src=”https://wptest.clicknathan.net/wp-content/themes/twentyeleven/js/html5.js” type=”text/javascript”></script>
This only loads for Internet Explorer 8 and below to give those browsers the oomph they need to play in the HTML5 world. You’ll want to leave this in.
<link rel=”alternate” type=”application/rss+xml” title=”Test Blog &raquo; Feed” href=”http://wptest.clicknathan.net/feed/” />
The call to your RSS Feed, you’ll want to leave this in if you’re interested in keeping your RSS Feed detectable by the user’s browser.
<link rel=”alternate” type=”application/rss+xml” title=”Test Blog &raquo; Comments Feed” href=”http://wptest.clicknathan.net/comments/feed/” />
I don’t think an RSS Feed for comments is that useful of a feature. You may disagree. If you don’t though, you can get rid of this by adding the following to your functions.php file: 

remove_action('wp_head', 'feed_links', 2);
<link rel=’stylesheet’ id=’admin-bar-css’ href=’http://wptest.clicknathan.net/wp-includes/css/admin-bar.css?ver=20110622′ type=’text/css’ media=’all’ />
I very much dislike the admin bar. I don’t want it as the site administrator on my site and certainly don’t want other people who are a logged in to see it mucking up my beautiful design! To get rid of it altogether, and therefore cancel out this stylesheet, add this to your functions.php file: 

function my_function_admin_bar(){
return false;
}
add_filter( 'show_admin_bar' , 'my_function_admin_bar');
<script type=’text/javascript’ src=’http://wptest.clicknathan.net/wp-includes/js/l10n.js?ver=20101110′></script>
Apparently this is an important script for WP to handle creating HTML character entities. You should probably leave it in, but if you’d like to remove it, you can add this to your functions.php file:

function my_deregister_javascript() {
wp_deregister_script( 'l10n' );
}
<link rel=”EditURI” type=”application/rsd+xml” title=”RSD” href=”http://wptest.clicknathan.net/xmlrpc.php?rsd” />
Used by external Weblog Clients (such as the WordPress for iPhone App. If you don’t use external clients, you can remove it by placing this line in functions.php:

remove_action('wp_head', 'rsd_link');
<link rel=”wlwmanifest” type=”application/wlwmanifest+xml” href=”http://wptest.clicknathan.net/wp-includes/wlwmanifest.xml” />
The most annoying automatically inserted bit of code, this line ahs to do with using Windows Live Writer. I’ve never even heard of the program outside of this context, but apparently it’s a Weblog Client as well. Remove it by adding this to functions.php:

remove_action('wp_head', 'wlwmanifest_link');

Merge Stylesheet Images into a Sprite

An image sprite is basically one image that contains multiple graphics used on a site, with only some parts of the graphic displayed at a time. By combining multiple images into one sprite, we can exponentially (though somewhat tediously) reduce the number of HTTP requests. Here’s a quick example of how you can reduce the couple of images called by the TwentyEleven script into one image sprite. There are only two images being called for the homepage via the CSS, so this isn’t going to be a major performance boost, but it’s a great little starter kit for getting into sprites.

  1. Upload this image sprite to your /wp-content/themes/twentyeleven/images/ folder.
  2. Open up the TwentyEleven theme’s style.css
  3. On line 457, replace the background property of the input#s selector with this line: background:url('images/sprite.png') no-repeat -44px 7px;
  4. On line 1012, replace the background property of the .entry-header .comments-link a selector with this line: background: #eee url('images/sprite.png') no-repeat 0 0;
  5. Save that file, you’ve now setup the CSS that will make the image sprite we loaded in the first step appear correctly.

If you’d like to learn more about creating CSS image sprites, here’s a handy website that outputs the CSS for you, once you’ve got the sprite created.

Up Next: Social Networking "Share" Buttons and their Impact on Site Performance