CSS + Javascript caching properly; wanting to prevent global page elements from redrawing

Question

My apologies in advance if this turns out to be a novice question. At the moment, my main frustration/oblivion stems from the absolutely confounding nature of performing a search for my particular problem.

I am using a variety of htaccess rules to ensure that my css, css images, and javascript files are caching. Based on the header response(s) I'm getting in my Firebug net panel, I am led to believe that this method is working.

What I'm after--past that successful caching, mind--is a way to prevent global site elements (header, menu, etc.) from redrawing when navigating from page to page. This phenomenon is expressed beautifully by the following sites:

http://www.alistapart.com/

jessicahisch - dot - com is also a prime example.

Note that upon clicking from section to section, post to post, anywhere to anywhere (with the same global layout), the only portions of the page that refresh/redraw are the items unique to that target page.

Typically I would chalk it up to browser-specificity (for example, Safari spoofs this phenomenon fairly well, regardless of the developers' implementation method, while Firefox seems to be a bit less forgiving), however, these two sites in particular are absolutely consistent in their page-to-page loading schema.

In my own site example, it is a crapshoot. Just when I think it's working the way I want, I will get a page reload/redraw/rebuild. Investigating the NET panel shows that this happens whether or not my external CSS/Image resources are loaded or not.

I have included the rules I'm using in my htaccess files for reference.

Many thanks in advance for help with this tricky question. While an answer is much appreciated, even suggestions for how to search for this issue effectively on the net are welcome.

#### CACHING ####
# YEAR
<FilesMatch "\.(flv|gif|jpg|jpeg|png|ico)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
# WEEK
<FilesMatch "\.(js|css|pdf|swf)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
# 10 minutes
<FilesMatch "\.(html|htm|txt)$">
Header set Cache-Control "max-age=600"
</FilesMatch>
# DONT CACHE
<FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
Header set Cache-Control "private, max-age=0, must-revalidate"
Header set Connection "keep-alive"
# Header set Pragma "cache"
</FilesMatch>

<FilesMatch "\.(ico|pdf|flv|jpg|JPG|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header set Expires "Thu, 15 Apr 2012 20:00:00 GMT"
Header unset ETag
FileETag None
</FilesMatch>

# enable expirations
ExpiresActive On
# expire GIF images after a month in the client's cache
ExpiresByType image/gif A2592000
# HTML documents are good for a week from the
# time they were changed
ExpiresByType text/html M604800 
# expire CSS images after a month in the client's cache
ExpiresByType text/css A2592000

RewriteRule css[\.][0-9]+/(.*)$ css/$1 [L]

Answer 1

I may be misunderstanding the question, but assuming each page on your site served as a separate HTML page, the elements on it will be redrawn each time. (And that’s okay. That’s how virtually every site on the internet works.)

The only way to prevent this is to use <frame>s, which is a big faff, and makes it really awkward for people to link to specific pages within your site, which is kind of what the web is based on.

I suspect that on the two sites you mention, they’re simply loading so fast that you don’t perceive they’re different pages.

Answer 2

Alistapart is most assuredly redrawing the header on each page, however, because the site is laid out with CSS, and uses image sprites for navigation, and in general has a very small footprint.

It just seems like its not redrawing for this reason.

The fact that your site does not behave as well could be for DOZENS of reasons, although the most common culprit would be large amounts of elements used in your layout - for example, lots of images.

Answer 3

Alright. So I feeeeeeel like I might have figured it out. Thanks to you. I asked:

"IS my footprint as low as I think it is?"

And so I started removing my external files, one by one. Actually, chunk by chunk. I removed my CSS files, no change. I removed my JS files, change.

So I added my library files back in (MooTools) and the 'persisting' maintained. I added back in some of my plugin files (squeezebox, etc.) and still things looked good.

Then I added sifr back in. This was apparently the culprit.

Circumstantially, ALA and Jessicahische do not use this flash-text replacement library. It makes sense, too: sifr adds classes and ids to the body tag onload which....well, sort of is a no-brainer when you (I) think about it.

So there you go. I'll open back up if it turns out I'm wrong.

Thanks--again.