Implementing this method will save you incredible amounts of bandwidth and drastically speed up your site for your site visitors.
Basically most images, css, javascript, and other files can be optimized for faster download by telling your site visitors to cache them for a certain period of time. The default behaviour is to check the last-modified and/or the Etag headers of the file EVERY time it is requested.
So a user goes to /home/index.html, and the browser caches all the images and files. Then the user leaves the site and comes back later, and the browser has to send If-Modified-Since conditional GET requests for every cached item, basically to see if the file has been changed and if they should update their cache.
When you implement the caching method described in this article, you can specify that certain files or filetypes be cached for a specific amount of time. These files are then cached by your site visitors and they do not send the
If-Modified-Since until the set cache time has completed.
CODE
#=============================================================================#
# TIME CHEAT SHEET
#=============================================================================#
# 300 5 M # 604800 1 W
# 2700 45 M # 1814400 3 W
# 3600 1 H # 2419200 1 M
# 54000 15 H # 14515200 6 M
# 86400 1 D # 26611200 11 M
# 518400 6 D # 29030400 1 Y (never expire)
# TIME CHEAT SHEET
#=============================================================================#
# 300 5 M # 604800 1 W
# 2700 45 M # 1814400 3 W
# 3600 1 H # 2419200 1 M
# 54000 15 H # 14515200 6 M
# 86400 1 D # 26611200 11 M
# 518400 6 D # 29030400 1 Y (never expire)
The first solution is the Apache Module mod_expires 1.3|2.0|2.2
CODE
ExpiresActive On
ExpiresDefault A300
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType text/plain A604800
ExpiresByType application/x-shockwave-flash A604800
ExpiresByType video/x-flv A604800
ExpiresByType application/pdf A604800
ExpiresByType text/html A300
ExpiresDefault A300
ExpiresByType image/x-icon A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A2592000
ExpiresByType image/gif A604800
ExpiresByType image/png A604800
ExpiresByType image/jpeg A604800
ExpiresByType text/plain A604800
ExpiresByType application/x-shockwave-flash A604800
ExpiresByType video/x-flv A604800
ExpiresByType application/pdf A604800
ExpiresByType text/html A300
The second solution is mod_headers 1.3|2.0|2.2
CODE
# YEAR
<FilesMatch "\.(flv|gif|ico)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
# WEEK
<FilesMatch "\.(pdf|swf|js|css)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
# NEVER CACHE
<FilesMatch "\.(html|cgi|php|htm)$">
Header set Expires "Thu, 01 Dec 2003 16:00:00 GMT"
Header set Cache-Control "no-store, no-cache, must-revalidate"
Header set Pragma "no-cache"
</FilesMatch>
<FilesMatch "\.(flv|gif|ico)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
# WEEK
<FilesMatch "\.(pdf|swf|js|css)$">
Header set Cache-Control "max-age=604800"
</FilesMatch>
# NEVER CACHE
<FilesMatch "\.(html|cgi|php|htm)$">
Header set Expires "Thu, 01 Dec 2003 16:00:00 GMT"
Header set Cache-Control "no-store, no-cache, must-revalidate"
Header set Pragma "no-cache"
</FilesMatch>
NOTE: Using FilesMatch and Files in htaccess
Here is what the Headers look like when downloading a JPEG image, with this caching scheme implemented, and without.
JPEG WITHOUT CACHING
CODE
Last-Modified: Wed, 22 Feb 2006 12:16:56 GMT
ETag: "b57d54-45e7"
Accept-Ranges: bytes
Content-Length: 17895
Connection: close
Content-Type: image/jpeg
ETag: "b57d54-45e7"
Accept-Ranges: bytes
Content-Length: 17895
Connection: close
Content-Type: image/jpeg
WITH CACHING
CODE
Cache-Control: max-age=2592000
Expires: Tue, 28 Mar 2006 16:23:52 GMT
Last-Modified: Wed, 22 Feb 2006 12:16:56 GMT
ETag: "b57d54"
Accept-Ranges: bytes
Content-Length: 17895
Connection: close
Content-Type: image/jpeg
Content-Language: en
Expires: Tue, 28 Mar 2006 16:23:52 GMT
Last-Modified: Wed, 22 Feb 2006 12:16:56 GMT
ETag: "b57d54"
Accept-Ranges: bytes
Content-Length: 17895
Connection: close
Content-Type: image/jpeg
Content-Language: en
Many more examples and detailed information available here. You may also enjoy this Webmasters Caching Tutorial.