tags:

views:

167

answers:

6
Q: 

Are elements cached or not?

Hello,

When I check with Privoxy what my browser downloads from one site, it seems like all the elements that make up the page (CSS, JS, icons, etc.) are redownloaded every time, ie. the browser doesn't cache them (Sorry, new uses aren't allowed to include URLs):

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <TITLE>My Site</TITLE>
    <meta name="keywords" lang="fr" content="whatever">
    <meta name="Description" lang="fr" content="whatever">

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Category" content="Internet"> 
    <meta name="revisit-after" content="2 days">
    <meta name="author" content="[email protected]">
    <meta name="identifier-URL" content="http://www.example.com"&gt;
    <meta name="robots" content="index, follow">
    <meta name="classification" content="Internet">
    <meta name="distribution" content="global">

    <meta name="geography" content="Paris">
    <meta name='language' content='fr'><meta http-equiv='content-language' content='fr'><meta name='rating' content='General'>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="alternate" type="application/rss+xml" title="My RSS" href="http://www.example.com/rss.php" />


    <link rel="shortcut icon" href="favicon.ico">
    <link rel="icon" href="animated_favicon1.gif" type="image/gif">

    <link rel="stylesheet" href="miseenforme.css" type="text/css">
    <link rel="stylesheet" href="css/screen2009.css" type="text/css">
    <!--[if lte IE 6]>
    <link rel="stylesheet" href="css/screen2009-ie6.css" type="text/css">
    <![endif]-->

    <style type="text/css">@import url(jscalendar-1.0/calendar-blue.css);</style>
    <script type="text/javascript" src="jscalendar-1.0/calendar.js"></script>

    <script type="text/javascript" src="jscalendar-1.0/lang/calendar-fr.js"></script>
    <script type="text/javascript" src="jscalendar-1.0/calendar-setup.js"></script>

    <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
    <script type="text/javascript" src="jquery.scrollTo-min.js"></script>
    <script type="text/javascript" src="jquery.autogrow.js"></script>
    <script type="text/javascript" src="fonctionsjs.js?maj=v1"></script>
</head>

Fact is, I don't see any cache-related instructions in this HTML header.

Can someone confirm that browsers (IE, Firefox, Chrome) don't cache anything unless told to in the HTML header?

Do we need to configure browsers to force them to cache elements?

Thank you.

A: 

Caching (absent server configuration or other explicit instructions) is normally a browser setting for a lot of items. If you don't have a large enough cache set up, or you disabled caching, or your browser isn't sure its the same file, or any of a number of other possibilities, it will re-download the items.

There are some server controls you can set. If you let us know what server you're running you might get a better answer...

Lastly, you can look at http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html and http://www.web-caching.com/mnot_tutorial/how.html for more information.

Based on your reply (I'm guessing that's you with a new name...) you want to look at your Apache settings. I've never used Apache so I wouldn't know where to start...

You're also going to want to look at some of the articles that I and others have linked to. This isn't exactly a simple topic. One article has been linked to a couple of times. (hint hint)

Not being a PHP programmer I'm not 100% certain on this, but I'm willing to bet that PHP has a way to override the server's cache header settings. Might be worth looking into here or at php.net.

AnonJr  2009-05-28 15:55:38
+1  A: 

Short version: Don't change the browser, send the right cache related HTTP header* info.

Long version: If you don't explicitly tell the browser what and how to cache you leave it free to choose for itself. Such settings are configurable and vary enormously from user to user and browser to browser but typically you can expect the browser to aggressively cache images, js, and css, but not html (this is very rough and just my experience). It's not reasonable for you to rely on browsers to work it out though, if you care at all you need to explicitly tell them and you also need to do this with response headers rather than metatags because metatags are simply not respected.

Shorter version of the long version: caching is complicated. I advise you google a tutorial for your chosen language platform.

* not the contents of the html head tag, the contents of the HTTP header

annakata  2009-05-28 15:57:29
+1  A: 

Are you sure they are not cached? If your server does not output a cache-control header for the static elements the browser will still issue an HTTP request (with the timestamp of the cached file) to the server for each element. The server should then respond with 304 status, not modified. So the file itself isn't transmitted again but this request-response might just be what you're seeing in Privoxy.

To save the requests you'd have to configure your server to set the cache-control header. However, note that changes on your server might then not reflect on the client, so you'll want to rename your css/static files whenever you change them to make sure all clients use the most up to date version.

Ben Schwehn  2009-05-28 15:57:30
A: 

I think that the first thing to check is - Is caching disabled in your browser?

AFAIK, browsers do cache most page elements unless a browser setting or HTTP header in server response disables this caching.

The second thing would be to insert caching related headers in your output so that the browser is specifically instructed to cache all available information (for a set period).

Here's an excellent tutorial on the subject of Caching that helps to dispell many misconceptions about exactly how browser caching works.

Cerebrus  2009-05-28 16:05:10
A: 

Thanks for the input. Here's the HTTP reply when calling any PHP page from that server:

HTTP/1.1 200 OK Date: Thu, 28 May 2009 19:50:28 GMT Server: Apache X-Powered-By: PHP/5.2.0-8+etch13 Set-Cookie: PHPSESSID=15d6505aa0b355642f0acea132b0939c; path=/ Expires: Thu, 19 Nov 1981 08:52:00 GMT Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Pragma: no-cache Keep-Alive: timeout=5, max=20 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=ISO-8859-1

Based on the Cache-Control line, I guess the browser is told to not cache any of the resources that make up this page, including CSS, JS, and images?

OverTheRainbow  2009-05-28 19:57:28
Not sure why you used a different name, but it makes it kind of hard to piece all the info together when part of the information is in a reply under a different name...
AnonJr  2009-05-28 20:19:09
the cache-control only applies to the specific GET request. for each embedded css, js, image the browser will issue an separated GET request, what does the cache-control say there? Most reasonably configured servers wouldn't be configured to include this kind of cache-control header for static data. As i said before, getting a HTTP/1.1 304 reply for subsequent requests for static resources due to the browser caching it and just asking the server "has anything changed since I last checked?" is more likely
Ben Schwehn  2009-05-28 20:21:18
A: 

Use YSlow to figure out what you should do to improve page loading performance. It also tells you what you should do to maximize the client side caching (i.e. in the browser).

Wim Leers  2009-05-28 20:04:43

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?