[O'Niel]

Hello

So my all my web-pages include CSS and Javascript files.
E.g:

<script src="/scripts/example.js"></script>
<link rel="stylesheet" type="text/css" href="/css/example.css">

Now I want to make a caching policy to make my website load faster. The problem with caching is that when your Javascript and CSS files are cached for a user, and you update one of those files, the user does not receive the update because the browser serves the cached version. Resulting in breaking the website for that user in the worst case.

So I wanted to solve this by making a kind of version control. If I would simply rename my files from "<script src="/scripts/example_1.js"></script>" to "<script src="/scripts/example_2.js"></script>" every time I edited example.js, the problem would be solved.
First I wanted to automate this by doing something like "<script src="/scripts/example_$TIMESTAMP$_.js"></script>", or $COTENT_HASH$,... But that seemed a bit overkill.

The solution I am currently considering is just adding ?v=VERSION_NUMBER to the files. Like this:

<script src="/scripts/example.js?v=1.0.0"></script>
<link rel="stylesheet" type="text/css" href="/css/example.css?v=1.0.0">

I'd edit the updated versions manually in my source code. Is this a good solution? How do you guys do it? In some (old) articles I read that not all browsers cache files containing a '?'. Is that true?

Thanks!

[Martyr2]

I have used that very technique of "cache busting" for years. Works perfectly fine and makes sense. Sometimes instead of a version, I just append the date like example.css?v=20220129 But if you are in the habit of making multiple version changes in a day, using just the version number might be best.

Nothing wrong with how you do it. It actually works well in situations where you might be developing inside a CMS or bigger platform that can automatically generate the version number and insert it into your script/css linking.

Edit: Other options you can use is to have your server use proper caching expiring headers. Check out the following link about how to use "ETags" to accomplish this sort of thing. Many web servers like Apache also allow you to set expiring times on various assets. I put a link below for that too.

Etags: https://developer.mo...TP/Headers/ETag
Apache Expires directives: https://www.inmotion...le-mod-expires/

This post has been edited by Martyr2: 29 January 2022 - 11:36 AM

[O'Niel]

So ETag just checks if the resource an URL is pointing to has changed since the caching?
If I'm right Nginx has this enabled by default, so I can stop bothering with putting ?v=xxx after my script/css includes?