[Apache] Using browsers cache

Because web sites are more and more aesthetics and as a result need more and more static resources (javascript, CSS or images), it's mandatory to use a cache policy. There are many sophisticated tools as cache servers (Squid), CDN but there is a simple and often forgotten method : the browser cache.
The browser cache usage is simple to do and consists in setting headers in the HTTP response. Setting up these headers is quiet simple with the httpd server provided by the Apache Foundation.

The cache headers
Setting up httpd
About ETag

The cache headers :

Internet browsers have an internal cache which is used to quickly provided elements without querying the server more than once and so to gain in transfert delay.

It's possible to set up HTTP headers to force the cache usage or to forbidden it.
These headers are :

Cache-Control
Expires

Cache-Control is the header allowing to cache or not the resource. This header can take multiple values as :

max-age : sets up the duration in second to keep the resource in the browser cache;
store and no-store : mean if the resource can be put in the browser.

Cache-Control is a header managed by the Headers module.

Expires sets the cache duration based on the resource content-type. It is specified with a duration to add defined in seconds, minutes, hours, days, months or years number.
This header is managed by the Expires module.

Setting up httpd :

Required modules aren't provided by httpd by default. so, it must be compiled with the following options --enable-headers and --enable-expires.

ExpiresActive On

ExpiresByType text/css "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType image/gif "access plus 1 year "
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType application/x-shockwave-flash "access plus 1 year"

<FilesMatch ".(gif|jpg|jpeg|png|js|css)$">
        ExpiresDefault "access plus 1 year"
        Header unset ETag
        Header set Cache-control "max-age=31536000, store"
</FilesMatch>

Some explanations :

ExpiresActive On : Expires module activation
ExpiresByType : followed by the wanted content-type, allows to put in cache for a wanted duration. Here 1 year from the access date. Available options are seconds, minutes, hours, days, months and years. It's possible to cumulate these options
Lines between FilesMatch markup are used by the Headers module and set up cache duration for specified resources (Cache-Control and ExpiresDefaullt for 1 year) and desactivate the ETags.

About ETag :

There is another way to put in the browser cache static resources : using Etag. This header is generated by httpd by default but can be a problem if web servers farm is used because it's generated by an internal machnism based on resource size and modification date or by a checksum. These methods can be different depending servers and the cache management can be compromised.

Pavnay