Browser Cache Control | Individual Resources

Question

The boss suggested to read the documentation on Google Leverage Browser Cache after testing with Google Page Speed Insights ...

There was a list of about 30 or so resources that need to be cached for at least one week. These resources are various png, gif, css, and js files.

I understand how I could go into .htaccess and set the cache control for all png, gif, css, and js files across the entire site.

//// something like this
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

However, I am more interested in cacheing only the individual files that have been presented to me in this list. They will all have the same directives, the same max-ages, etc ...

I ran across this when I was looking through the google documentation ...

I believe this is more along the lines of what I am going for, but it seems a bit more complicated and ongoing process than what we are looking for.

Looking for more of a set it and forget it strategy.

Answer 1

You seem to be asking two different questions here.

The best way to handle caching of static assets is to set the max-age/expires date far in the future, but have the URL to the asset automatically change whenever the asset itself is updated. That way you're taking full advantage of the browser cache, but the browser will always grab a fresh copy when you want it to. When you see a filename like style.3da37df.css, that's probably what is happening. The 3da37df will be a hash based on the file version or last modification time.

There are a number of different ways to automate this, but broadly it'll either be being done in advance (possibly as part of the deployment process) using a tool like grunt or bower, or it will be done by the CMS.

If all you want to do is set a max-age for a particular set of files, you've already included the code for that in your question. The FilesMatch line is a regular expression, so you can change that to match whatever set of files you want to set the header for, e.g.:

<filesMatch "^(foo\.css|bar\.jpg)$"> 
    Header set Cache-Control "max-age=2628000, public" 
</filesMatch>

You can include multiple FilesMatch blocks, or match all files in a particular directory (if that's more appropriate).