Caching Scripts and Stylesheets

2008-04-28 18:55:35

After winning "High Performance Web Sites" by Steve Souders last weekend and having read most of it, I came to think about Chapter 5.
Steve talks about the benefits of having only one single stylesheet/script file to avoid HTTP requests versus having many of them to cache them better. If you got, say 5 subparts of a website with a different stylesheet each that would either have 5 files to be cached and requested each time versus not using the cache so much if you update them frequently.

At first my idea was going one step further from what was suggested, i.e. to combine them and cache them seperately. But I got the feeling it will only work if the visitors come to the site quite often (during the cache time) and also frequently switch between the various parts of the website.

Assuming the website has this layout:

• http://example.org/about/
  
• http://example.org/blog/
  
• http://example.org/forums/
  
• http://example.org/products/
  

This leads to something along the lines of

<link rel="stylesheet" type="text/css" href="/main.css" />
<link rel="stylesheet" type="text/css" href="/forums.css" />
<link rel="stylesheet" type="text/css" href="/additional.css" />

So what about combining them into stylesheets, one for each "subpart" consisting of all the needed parts.
The above example for the /forums/ part would be

<link rel="stylesheet" type="text/css" href="/MFa.css" />

being parsed by a rewrite rule that does something like this:

<?php
$parts = array(
 'A' => 'about',
 'B' => 'blog',
 'F' => 'forums',
 'P' => 'products',
 'm' => 'main',
 'a' => 'additional'
);

$match = basename($url,'css');
$len = strlen($match);

for($i=0;$i<$len;$i++){
    if (array_key_exists($match{$i}, $parts)) {
	    readfile(sprintf('%s/%s.css', $some_path, $parts[$i]));
    }
}
?>