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
If you consolidate your CSS pages server side, e.g. by placing them in a php file, you would presumably have to be careful about browser specific conditional CSS because of (network) proxy caches?
e.g. you might have a file "screenstyle.php" which combines to your layout.css, navigation.css and iehacks.css files (iehacks.css being added conditionally for IE browsers). If an IE user viewed such a page, screenstyle.php would be cached in the proxy and would contain the contents of iehack.css, subsequently if a Firefox user behind the same proxy viewed the site, they would also get the contents of iehacks.css, because they would receive the cached, combined screenstyle.php file?)
Perhaps I'm missing something obvious. I realize server side files are frequently not cached, but it is possible and would be useful to add caching information for php files used to generate CSS.
The best solution I can see is to keep the iehacks.css (along with other conditional CSS) out of the "combined" CSS file.
Stu
By: Stu on July 7, 2008 4:14 PM
Increased speeds by 30-90% with our analysis and optimization services.
Increase conversions with adaptive multivariate testing to squeeze more leads out of your exiating traffic. Quickly boost your ROI.
Improve your site's look, usability and accessibility for a more credible and successful website.
