How to Minimize HTTP Requests

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.

You may also like...