Skip to content

Instantly share code, notes, and snippets.

@AGiallelis
Last active April 26, 2017 11:43
Show Gist options
  • Save AGiallelis/2bdfc98e130676859cb6d207ff3a804e to your computer and use it in GitHub Desktop.
Save AGiallelis/2bdfc98e130676859cb6d207ff3a804e to your computer and use it in GitHub Desktop.
What is cache-control? Cache-Control is a HTTP header that defines the amount of time and manner a file is to be cached.
<IfModule mod_headers.c>
Header set Connection keep-alive
# Cache-control headers
# 2 HOURS
#<filesMatch "*"> All files
Header set Cache-Control "max-age=7200, must-revalidate"
#</filesMatch>
# 480 weeks - 290304000
# 2 WEEKS
<filesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|swf)$">
Header set Cache-Control "max-age=1209600, public"
</filesMatch>
# 1 DAY
<filesMatch "\.(css)$"> Single file type
Header set Cache-Control "max-age=86400, public, must-revalidate"
#Header set Cache-Control "max-age=0, public, must-revalidate"
</filesMatch>
# 2 DAYS
<filesMatch "\.(xml|txt)$">
Header set Cache-Control "max-age=172800, public, must-revalidate"
</filesMatch>
# 2 HOURS
<filesMatch "\.(html|htm)$">
Header set Cache-Control "max-age=7200, must-revalidate"
</filesMatch>
<FilesMatch "\.(gif|jpg|png|ico|css|js|pdf|txt)$">
Header append Cache-Control "public"
</FilesMatch>
</IfModule>
Common max-age values are:
One minute: max-age=60
One hour: max-age=3600
One day: max-age=86400
One week: max-age=604800
One month: max-age=2628000
One year: max-age=31536000
Caching Directives
The Cache-Control header above states "public". This means that this file may be publicly cached (in contrast to being a private file).
By default, most things are considered to be publicly cacheable (able to be cached) but there do exist times when this behavior would not be advisable for sensitive documents, security, user specific content, etc.
We will cover three main directives offered by Cache-Control:
public
private
no-store
public
The "public" directive basically is saying that anyone can cache this at any level.
The official specification defines it as...
The "public" response directive indicates that any cache MAY store the response, even if the response would normally be non-cacheable or cacheable only within a private cache.
In essence, if you want something cached for page speed reasons, and it is not private or time sensitive then you should use the public directive.
private
The private directive means it is specific to one person. An example would be a Twitter page. When you go to Twitter you see one thing and another person going to the same url sees something else.
Even though the information on that page is public and not sensitive, it is specific to one person. (Note: Twitter is just a conceptual example, I have no idea what they use or how they use it)
The official specification defines it as...
The "private" response directive indicates that the response message is intended for a single user and MUST NOT be stored by a shared cache.
A private cache MAY store the response and reuse it for later requests, even if the response would normally be non-cacheable.
So if I go to Twitter.com, and then hit refresh some things will be cached for me but not you. If you go to Twitter.com and hit refresh some things will be cached for you but not me.
no-store
The no-store directive is the strongest indication that something should never ever be stored in any caching mechanism whatsoever.
The official specification defines it as...
The "no-store" response directive indicates that a cache MUST NOT store any part of either the immediate request or response.
This directive applies to both private and shared caches.
Once again I must note that this does not actually secure anything.
The directive CACHE-CONTROL:NO-CACHE indicates cached information should not be used and instead requests should be forwarded to the origin server.
This directive has the same semantics as the PRAGMA:NO-CACHE. Clients SHOULD include both PRAGMA: NO-CACHE and CACHE-CONTROL: NO-CACHE when a no-cache request is sent to a server not known to be HTTP/1.1 compliant.
Also see EXPIRES.
Note: It may be better to specify cache commands in HTTP than in META statements, where they can influence more than the browser, but proxies and other intermediaries that may cache information.
What file types should be cached?
As a very broad and general guide, I would point out the following things about certain file types...
Images - (png, jpg, gif, etc.) Images don't really change so they can have a long cache time period (a year)
CSS - CSS files tend to change more often than other files, a shorter time period may be needed (week or month)
ico (favicon) - rarely changed (a year)
JS - Javascripts for the most part are not changing very often so a longer cache time is normally possible (a month)
Things to consider
Only you can determine what is best for your site and your site resources.
One thing I would mention is that if you do change something (like a CSS file) and that file is cached, you should consider changing the name of the file so that your updated CSS file is seen by all users.
This is called URL fingerprinting. Getting a fresh (not cached) file resource is possible by having a unique name.
An example would be if our css file was named "main.css" we could name it "main_1.css" instead. The next time we change it we can call it "main_2.css".
This is useful for files that change occasionally.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment