HTML Page Caching Question

Question

I understand the basics of HTML page caching.

My uncertainty relates to how caching works on images, included external scripts, and included CSS stylesheets that the HTML page uses.

For example, let's say I have an HTML page that is set to expire in 7 days. The page has 10 images on it, 2 included external CSS (.css) stylesheets, and 2 external included javascript (.js) files.

1. Do all of these also expire in 7 days and follow what I implement in the HTML page?
2. Any way to specify individually when these external items expire?

I seem to get mixed results on different browsers and/or with a reload or SHIFT+RELOAD action.

Perhaps there is an article somewhere that explains how this works (or should work)?

Thanks -

Answer 1

Do all of these also expire in 7 days and follow what I implement in the HTML page?

No, they all counts as separate and individual requests and have their own response headers. They do for sure not "inherit" them from the parent HTML page as you seem to think.

Any way to specify individually when these external items expire?

You normally do that at webserver level. Consult the documentation of the webserver in question. If you're using a server-side programming language like PHP/ASP#NET/JSP-Servlet, then you can often also control the response headers programmatically. For the case you're using JSP-Servlet and you've a performance concern, you may find this article useful.

Answer 2

HTTP resources expire based on their own expiration settings. An HTML document is cached if that document is cached. An image referenced by that document is cached if that image is cached.

See the Caching Tutorial for Web Authors and Webmasters