Use browser caching - expires either max-age, last-modified or etag

Question

It’s hard for me to find a clear, practical explanation of what is the right way to use browser caching to increase page speed.

According to this site :

It is important to specify one of Max-age Expires or Cache-Control, and one of Last-Modified or ETag for all cached resources. it is redundant to indicate both Expires and Cache-Control: the maximum age or specify both Last-Modified and ETag.

It is right? If so, should I use Expires or max-age ? I think I have a common understanding that they are both, but they don’t know what is usually best used.

If I need to also do Last-Modified or ETag , which one? I think I'm getting Last-Modified , but I'm still very fuzzy with this ETag concept.

Also, what files should be included to cache the browser?

Answer 1

Is it correct?

Yes, Expires and max-age do the same, but in two different ways. Same thing with Last-Modified and Etag

If so, should I make an expiration date or maximum age?

Validity depends on the accuracy of the user’s clock, so in most cases this is a bad choice (since most browsers support HTTP / 1.1). Use max-age to tell the browser that the file is good for many seconds. For example, a cache for 1 day would be:

Cache-control: max-age = 86400

Note that when both Cache-Control and Expires are present, Cache-Control takes precedence. to read

If I need to also do Last-Modified or ETag, which one? I think I get Last-Modified

You are right, Last-Modified should be better. Although this time, it is sent by the server. Therefore, there is no problem with custom watches. The browser sends the Last-Modified server sent the last time it requested the file, and if it is the same, the server is sent with the empty response "304 Not Modified"

Also, what files should be included to cache the browser?

All files can help with caching. You have two different approaches:

• with max-age: useful for files that never change (images, CSS, javascript). Until the max-age value, the browser will not send any request to the server. Thus, you will see that the page loads very quickly on the second load. If you need to update files, just add a question mark and date of change (for example, / image.png? 20110602 or for better proxy caching, something like /20110602/image.png or / image.20110602.png), Thus, you can force files to expire if they are urgent (remember that a browser almost never hits the server when it has a file of maximum age). The main purpose is to speed up the process and limit the requests sent to the server.
• with Last-Modified: can be installed on all files (including max-age). Even if you have dynamic pages, you can not change the contents of the file for a while (even if it's 10 minutes), so this can be useful. The main thing here is to tell the browser "keep asking me about this file, if it's new, I'll send you a new one." Thus, a request is sent to each page load, but the answer is empty if the file is already good (304 Not Modified), so you save bandwidth.

The more you cache, the faster your pages will appear. But it is a difficult task to clear the caches, so use them with caution.

A good place to learn all this with many explanations: http://www.mnot.net/cache_docs/