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 So this: Becomes this: Even better, XSSI these files directly into high traffic pages, like this: 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.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.<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>
<link rel="stylesheet" type="text/css" href="/css/combined.css" />
<script src="/js/combined.js" type="text/javascript"></script>
<style type="text/css">
<!--
<!--#include virtual="/css/combined.css" -->
-->
</style>
<script type="text/javascript">
<--
<!--#include virtual="/js/combined.js" -->
// -->
</script>
Further Reading
By website optimization on 17 Dec 2003 AM