Minimize HTTP Requests

Summary: By combining external files and embedding CSS and JavaScript within your HTML you can minimize the number of HTTP requests required to render your page. Each unique HTTP request requires a round trip to a server, introducing indeterminate delays.

By combining external files and optionally including CSS and JavaScript directly within your XHTML pages, you can minimize the number of HTTP requests required to render your page. Each unique HTTP request requires a round trip to a server, introducing indeterminate delays. Users attune to fast, consistent response times. The more HTTP requests that your pages require, the slower and less consistent their response time will be.

This technique is especially important in the head of your XHTML documents. With few exceptions, browsers must load and parse external CSS and JavaScript files referenced within the head of your XHTML before they parse the body content. By minimizing the HTTP request load you can maximize the initial display speed of your content.

So this:

<link rel="stylesheet" type="text/css" href="/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/css/nav.css" />
<script src="/js/functions.js" type="text/javascript"></script> 
<script src="/js/validation.js" type="text/javascript"></script>

Becomes this:

<link rel="stylesheet" type="text/css" href="/css/combined.css" />
<script src="/js/combined.js" type="text/javascript"></script>

Even better, XSSI these files directly into high traffic pages, like this:

<style type="text/css">
<!--
<!--#include virtual="/css/combined.css" -->
-->
</style>
<script type="text/javascript">
<--
<!--#include virtual="/js/combined.js" --> 
// -->
</script>

Note that while JavaScript files are not reliably cached by browsers, CSS files are. The SSI technique included above should only be used on high traffic pages, like home pages. Note also that you can use XSSI or pre-merge these files into high traffic pages, to create conditional style and behavior. You can link to them normally for other pages and still separate presentation and behavior from structure, and benefit from caching. This technique also applies to adjacent graphics, which can also be combined or eliminated.

Further Reading

CSS Optimization
Summary of chapter on optimizing CSS from Speed Up Your Site: Web Site Optimization.
Optimizing JavaScript for Download Speed
Summary of chapter on optimizing JavaScript for file size and minimum HTTP requests from Speed Up Your Site: Web Site Optimization.
Optimizing Web Graphics
Summary of chapter on optimizing web graphics for minimum file size from Speed.
Response Time: Eight Seconds, Plus or Minus Two
Summary of chapter on the psychology of response time, delay, and attunability from Speed. See the Roach cites in particular.

By website optimization on 17 Dec 2003 AM