CSS Loading and caching

[burghboy]

I was wondering how browsers typically handle the loading of a css file. How does it determine if the CSS has been updated? Also, once on a site, does a CSS only get loaded once if used on every page?

I ask because I am getting keynote reports on page weight and they indicate that my stylesheet in a LINK tag is 24K for every page. I am wondering if this is giving me a skewed page weight total then.

Thanks!

[HarryM]

If the CSS file is loaded for one page it should stay in the browser cache and should not be loaded for the next page.

If you change the CSS in your CSS file and do not change the name you may run into problems. Old CSS files can hang around in network caches and if the name has not been changed this is the file that may be used. The browser has no way of knowing the CSS file is obsolete.

One way out of this is to add version numbers to CSS file names and modify the link command in your pages to this version. The browser will then always pick up the latest version, whether cached or not. Also if the old CSS versions are left on the server then old cached pages (such as in Google's cache) will still link to the old CSS versions and display correctly.

[drbrain]

Handle caching of CSS files like any other file.

Set an Expires header for a reasonable amount of time, and the browser will give a conditional response for it. No need to add version numbers, since HTTP has all the cache-invalidation stuff built in.

Typically, a browser will do a conditional request for the first request to a page for the session, and again when the file has lived past its Expires time.

[stef25]

i had no idea about this.

could someone post the meta tag to such an expires header?

[Rambo Tribble]

Since a .css file is a text file, no HTML, you won't be able to set the expires header with a meta tag. You'll need to do it at the server.

[drbrain]

In my .htaccess, I have:

## Expires

ExpiresActive on
...
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/html "access plus 1 day"
...
ExpiresDefault "access plus 6 hours"

These are reasonable times for my visitors and for how I update my pages and CSS. You may require different times depending on your visitors and how often you update your content.

[bigbobby73]

drbrain -- that is an excellent suggestion.
Thanks!