Leverage browser caching ? How do I do it, is it very important

Leverage browser caching ? How do I do it, is it very important.

I understand in increases your page speed, but i’m not sure how to set it up, any help much appreciated.

Cacheing is client side, and it’s on by default. There’s nothing you can do if it’s not.

Actually it’s a bit more in-depth than this…

Here is a good staring point/explanation.

Where are these HTTP/1.1 caching response headers found, I take it its in a file on the webserver not in the css file. Is it setting all the cache timings for the server or just that webpage ?

mrcoda, this is the best caching tutorial I’ve ever come across, hope it’s useful: http://www.mnot.net/cache_docs/

The best way to get stuff cached is to break it down (IE: Have CSS and JS in separate files). The browser will see the files haven’t updated and therefore will not re-download them. As for your other question, HTTP headers are found in the response from the server to the browser as the document is downloaded (other header information like content-type and the browser version are included in the packet). Usually there is a browser default for how caching is handled but it can be overwritten through htaccess (at the server-side in how info is distributed) or at the client side through META tags in the HTML. :slight_smile:

so I inclued the expiries date for images in the meta tags , to make my life easy , but is it better to do it server side , I suppose its got to be server, otherwise it would involve some client server interaction and thus involve a requests to the server. RIGHT OR WRONG ? Am I getting this or not ??? or am I still the little stupid kid in the pub trying to join in with the grown ups conversation, but actually just getting patronising smiles of them whenever I speak? Haha. remember that everyone !

I think it’s better to set caching options at the server-side (as the file is already downloaded before caching is read if it’s within meta tags), however when it comes to taking advantage of code caching (such as the separation of style, structure and behaviour) you can only achieve that at the client side. What you’re asking is not a simple question at all, you can’t just bundle all caching into a checkbox, there’s different sorts of ways to leverage different caching variables. :slight_smile:

To take advantage of caching of files as much as possible you should always refer to the files the same way from all your web pages so that the browser realises it can use the cached copy that was downloaded with a prior page.

I have to agree with Alex.
There’s really nothing you can do to control how the browser caches your assets.
What you can do is to configure your web servers to include expire headers in their response to include expire headers in their response, telling the browser that the resource it already has (or not) is still the latest version (or not).

Read about it here: http://developer.yahoo.com/performance/rules.html

I would think he could do it with php or his .htaccess file no?

Another good idea is to dowload the Firebug plugin for Firefox. You can view a lot of this information on the particular page. Great tool.