2

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 ...

enter image description here

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.

  • Are you suggesting that the filenames of these individual files that need caching will keep changing? Will these filenames follow the same pattern? However, I would have thought the same principle will apply? Not sure why you think this is an "ongoing process"? Can you provide an example? – MrWhite Apr 10 '17 at 14:01
  • @w3dk From the example in the image, it seems to me that anytime we change a .css or .js file we would have to rename the file with an included md5 of the file ... /script.123abcde.js ... etc – TT4M.C Apr 10 '17 at 14:06
2

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).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.