This article started out as a basic tip but there have been some great comments added for those interested in delving into the topic of caching even more. So, although I do offer this as a recommendation, there are better ways to do this for larger apps, and there are some concerns to keep in mind should you choose to do this. So be sure to read the comments for links and further info on this topic.
If you’re a beginner and you’re developing HTML and CSS using an external stylesheet, you might notice that in some browsers, under some circumstances, the changes you’ve made to your CSS don’t take effect immediately.
Sometimes it’s necessary to do a hard refresh to see the updates take effect. But it’s unlikely that average web users know what a hard refresh is, nor can you expect them to keep refreshing the page until things straighten out.
So how can you ensure that any updates you’ve made to your CSS will take place immediately for all users? Here’s one way to do it:
<link rel="stylesheet" href="style.css?v=1.1">
Notice that I’m pointing to my CSS using the commonly known <link> element. But I’ve also added what’s called a query string to the end of the file name.
The browser will view a file name of style.css as different from a file name of style.css?v=1.1, so it will generally force the browser to update the stylesheet. So, each time you update your CSS on the server, you can incrementally update your version number.
If you’re new to query strings, just know that the part before the equals sign is like a placeholder, and the part after the equals sign is the value put into that placeholder. This will have no effect on the CSS. It will only serve to make the browser think it’s a completely different file.
You could add many types of characters to the query string value, but numbers are a logical way to do it, because then you can just increase the number, and even add decimal places if you want. And of course, if you don’t change the value for a while, the browser will continue to cache (or preserve) the file, and won’t attempt to download it unless other factors force it to, or you end up updating the query string value.
Great tip. Is it possible to do something similar in static html pages?
Of course. The tip is not just for dynamic server-driven pages. It should generally work to force the updating of any file, even an image file. And in virtually any type of web page, including a static page with a “.html” extension.
Yes you could use this technique on static HTML pages but I would advise against it. First off it’s bad for Search Engine Optimization unless you are using canonical tag to prevent search engines from viewing the pages as different pages which can cause ranking issues. Secondly when you include a style sheet you will usually update a template so it forces your browser to look at the updated URL, with an HTML file best you can do is link to it and let people click through. The benefit of doing this for HTML pages isn’t worth it but for CSS, JavaScript, Zip files and Images using a file includes it’s perfect solution.
To be honest, I’m not sure if he means on the actual links to the pages, or if he’s just referring to adding the query string value to the CSS file inside of a static HTML page (as opposed to a PHP page).
So yes, I agree — don’t use it on links to HTML pages, otherwise Google will view them as different pages.
Does we have to add version everytime when we upload css.
I mean
and so on..
It will be static for every upload
Looking forward reply.
No, you don’t have to add a version number. Most times it won’t really matter. But if you add some styles that you think will break pages if they don’t appear, it might be a good idea.
Sometimes the browser will load the old version of the style sheet with the new markup, so it’s safe to add the version.
Another way to try this is to put the hour, minute and second as a variable.
This way you won’t have to change the value every time you want to refresh! :)
Agreed! This is great for development, but the reason I don’t mention it for beginners is because this should not be used in production. You don’t want no caching, you just want to control caching.
So for beginners: Don’t use a time stamp in the live web page, only use this when you’re testing, so you don’t have to keep changing the value manually.
No manual refresh and no too much refresh, just the right refresh.
Good tip!
For those wondering, he’s referring to this PHP function:
http://php.net/manual/en/function.filemtime.php
According to that page:
The code will most likely eat up disk i/o everytime a request is made, for a busy website, this should be disastrous. One way to handle this is to offload the files into
/dev/shmfor linux servers, it’ll serve the files from memory.great tip!
just one question, does this query string work in javascript files?
I mean something like this:
sorry, this is the code:
<script src="/js/script.js?v=1.1"></script>
Yes … you can also use it to force favicon refresh.
… favicon.ico?v=1.1 …
Great! Thank you so much! :)
Awesome, i had always wondered why people put the version numbers in the link tag.
You could also disable Caching in Firebug/Dev Tools Settings
Steve Souders details why you should change the file name rather than revving files using the query string here: http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
Might be worth bearing in mind.
Good point, Matt, I didn’t know about this.
Although, from what I understand, what he’s saying is that users on proxy services will not have any caching occur on querystringed URLs, so the performance of the site could suffer a small hit.
My question is: How common are these proxy services? I guess you’d have to asses the situation for each site and decide if it’s a valid concern.
I don’t think it’s the best option, because static resources that include query string may not be cached by the browser. I often rename the file appending the current timestamp (only when I make some change). Optimizing Cache – Leverage proxy caching
Good article! You can also look into the html5boilerplate project by Paul Irish & Co. The project has a build script included, which updates the linked souces automatically. This solves the caching issue.
Anyways, the proposed way is really good!
An alternative to the timestamp method as described above is to use the first seven characters of the md5 string of the css file:
I think this method is cool to use automatic versioning instead of changing the version number every time.
While using version numbers or even dates to bust old cached versions of a file, they are really not a good final solution to optimal cache control. You have go go one step beyond that.
Version numbering requires manual updates and timestamps only work correctly under the assumption that you are working directly on the affected files, and not going through VCS, deployment scripts etc.
A better metod is to have a build step that renames the file itself to a hash of its content. This way the file name become an identifier of both the file and its content at the same time. Most sites have a build step for minification and bundling anyway, just add this into the process.
This way you could for example build and deploy your new versions of static files into the same directory as the ones that are already in production. They will just be there and be ready for being linked to by a new version of your html. Great for running multiple simultaneous versions for split testing.
You also avoid busting the cache by having always updated your time stamp on the minified files that are generated on deployment by the build system.
While this article mentions CSS specificly this method can and should be used for building any static asset of your page. This will give you a much more effective cache control mechanism, assuming that you have already set all static files to be served with a far future expiration date.
There are lots of tools out there that can do this job for you.
While this approach works, I think it’s very short sighted. One thing that developers ought to do is take time to minify their assets and package them up as collected files thus reducing the load time of their site. What we do is we package all our CSS and JS into one file, respectively, and we then change the name of that file to suit the commit version that’s being deployed, for example the SHA-1 that git provides. This is a nicer solution in my opinion.
About busting your cache to get the newest CSS during development I can recommend setting up a development environment where your web server specificly doesn’t send any caching headers on static content.
Refreshing the page during development still takes some time though, especially when you , like me, are doing a web application and are working on improving a part of the app that can only be seem after several clicks.
For this case I can recommend making a setup where you can refresh only the css in the browser, not the page itself. This has improved my development time immensely.
At work we have a development web server that tracks local file changes and tells the browser to refresh the updates css files through a websocket. This works extremely well.
You don’t have to go all the way there though. You could for example install https://github.com/auchenberg/css-reloader in your browser of choice and just hit the CSS reload button, which gives you the same effect, though with a bit more overhead since it reloads all CSS.
Be aware of the performance impact when doing filemtime() or md5_file() on files. You are hitting the filesystem with “useless” stat() calls. If you are running a popular site, this matters.
Yup. Better to rename your file and update the template that includes them. The template for including static assets should be static itself anyway.
i am new to this type of functonality.
a final confirmation
by mentioning like this as you mentioned <link rel=”stylesheet” href=”style.css?v=1.1″>
this is just to bypass the browser cache right. and we don’t need to wait for reflecting the changes made in CSS.
and the browser will treat the css file as a new one every time the page loads. is it just a tweek for web developers ?
No, it will not work every time you reload the page. It will only work if you update the “v=1.1″ part each time. So if you have “v=1.1″ and you make some changes, to ensure all users see the changes, just change it to “v=1.2″. But if you make more changes, then you have to update the version again. So you’ll end up with “v=1.3″ then “v=1.4″, and so on, for each set of changes.
The “v=1.1″ part can actually be anything. It doesn’t have to be numbers. You could do “style.css?v=hamburger” if you want. As long as the part after the “?” is different, it will view it as a different file and reload it automatically.
Of course, a few people mentioned that this won’t work for all users viewing the site, and it has other drawbacks, so keep that in mind. It’s not a perfect solution, just a quick and dirty one.
Well we also are using this technique in our project but, if firefox & crome a issue has been occurred, that is, CSS files with query string are considered as text/html files not as css files. Therefore the design is rendered very ugly.
Actually I am adding the Querystring to CSS files dynamically.
Hmmm. I’m not sure what you’re referring to, Ashish. Do you have a demo page you can show me? Are you adding the querystring using server side code?
hi,
i am updating my style sheet every day, some browsers don’t take Css effect immediately. So every day i want to change style sheet name dynamically. how can do it. plz give me suggestion.
There are methods to automatically update the file name on the server, but I don’t know of any off hand. You can try the method mentioned at this comment:
http://www.impressivewebs.com/force-browser-newest-stylesheet/#comment-11118
But I don’t really recommend that because then your CSS never gets cached. But that should do what you want, assuming you’re using PHP.
Thanks a lot for posting this useful tip and having a website that is easy to read, you just saved me a ton of time.
Actually I am adding the brower refresh css in website….
any other solution which we got new updating content a static html , not css. the browse will detect and load latest we changes the static html page?