Hands on rules for a fast website.

It is no secret that users prefer faster web sites. But what happens during the time a user waits for a page to load? The key insight is the realization that only 10-20% of the total end-user response time is spent getting the HTML document to the browser. You need to focus on the other 80--90% if you want to make your pages noticeably faster.

Yahoo! did some great research on this subject and came up with 14 rules. In a series of posts I will talk about the rules that I think are the most important. I will give some background information and explain how to implement them by examples of my own code.

The 80/20 performance rule

This rule is commonly referred to as the Pareto principle (also known as the 80-20 rule), which states for any phenomenon, 80% of the consequences come from 20% of the causes.

We see this phenomenon in software engineering or designing where 80% of the time is spent in only 20% of the code or details in the design. When we optimize our applications, we know to focus on that 20% of the code. This same technique should also be applied when optimizing web pages.

Most performance optimization today are made on the parts that generate the HTML document (apache, databases, template engines, etc.), but those parts only contribute to about 10-20% of the user’s response time. It is better to focus on optimizing the parts that contribute to the other 80-90%.

Reduce your http requests!

Every external file you include has to be processed and loaded after the html has been loaded. The more you include, the more http request the browser has to handle. The impact of having many components in the page is exacerbated by the fact that browsers download only two or sometimes four components in parallel per hostname, depending on the HTTP version of the response and the user's browser. Yahoo!'s research shows that reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.

When you cache these external files in the user's browser, you can have remarkable speed improvements. More on that in the next post.

Ways of reducing http requests

One way to reduce the number of components in the page is to simplify the page's design. But is there a way to build pages with richer content while also achieving fast response times? Here are some techniques for reducing the number of HTTP requests, while still supporting rich page designs.

Combine files

This way you reduce the number of HTTP requests by combining all scripts into a single script and combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

This is a simplified example of my library.php code. In future posts I will use this code and add caching, gzip and different ways of compressing to it.

/**
 * library.php
 * Controller to fetch css or js script files.
 *
 * @package     timbenniks.com    
 * @author      Tim Benniks - tim@timbenniks.com
 * @copyright   2009 timbenniks.com
 * @version     $Id: library.php 63 2009-01-16 09:24:18Z timbenniks $
 */

// create variables from $_GET['files']
$string 	 = explode('.', $_GET['files']);
$files	 	 = $string[0];
$extention 	 = $string[1];
$all_files	 = explode(',', $files);

$cached_file = './cache/'.urlencode($files).'.'.$extention;

// set the right content type
if($extention == 'css')
{
	header('Content-type: text/css');
}
elseif($extention == 'js')
{
	header('Content-type: text/javascript');
}

// If the file is not cached, create it. 
if(!file_exists($cached_file))
{	
	for($i = 0; $i < count($all_files); $i++)
	{
		if(is_file($extention.'/'.$all_files[$i].'.'.$extention))
		{
			$put_contents = true;
			$join_files   = file($extention.'/'.$all_files[$i].'.'.$extention);
			$all_in_one   = join('', $join_files);
		}
		else
		{
			$put_contents = false;
			header("HTTP/1.0 404 Not Found");
		}	
	}

	if($put_contents)
	{
		file_put_contents($cached_file, $all_in_one);
		echo $all_in_one;
	}
}
else
{
	echo file_get_contents($cached_file);
}

CSS Sprites

This is the preferred method for reducing the number of image requests. Only one! For multiple images. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

Conclusion

Reducing the number of HTTP requests in your page is the place to start. This is the most important guideline for improving performance for first time visitors. Most of the time 40-60% of daily visitors to your site come in with an empty cache. Making your page fast for these first time visitors is key to a better user experience.