You fixed everything in your website the images and text everything.
You have a pretty good idea about what will appear on your screen and what will not.
There is a good chance when you open your file in the browser to see how the site is doing over there, you will see the really old version rendering at first.
Then Refresh, Refresh and Refresh….
And there it is!
When you are developing a site, there is a heck of a lot of “refreshing” going on.
That’s fine for you, you have adapted yourself with this thinking with time.
You have a reflex that when the layout is broken, you refresh.
But what about your client? If you send that same link to them and the same thing happens to them. They are most likely to get confused.
When it comes to a large scale. There can be a huge amount of people who might see a broken layout the next time they visit, because of CSS/JS caching.
There are multiple strategies to fix the problem of CSS/JS caching such as:
- Adding Timestamp to your CSS,
- Using Query Strings,
- By Changing File Name,
- Using ETags, etc.
In a nutshell, you need a strategy for breaking the cache and forcing the browser to download a new copy of the CSS.
I personally use the Requestly extension for disabling caching of CSS/JS files.
The main strategy we are using here is of Basing Cache Busting “Number” on File Updated Date.
You are most likely to come across many recommendations over the internet. Suggesting you to use the server to check when the file was last updated to create the cache-busting “number”.
The requestly extension helps you do this with ease.
Locally in development, breaking cache every page load might be OK, but modern development tools like Chrome’s web inspector can turn off caching anyway.
If you open Chrome Dev Tools and disable Cache, it makes your browsing experience very slow. And other tools that clears cache typically clears the entire cache so the best way is to keep just a handful of resources not be cached.
Follow the steps listed below to do this —
- Network Tab with Cache Disabled
- Disable Cache not selected
This works fine for local web development but there are certain limitations that I'd like to highlight.
- You have to keep the DevTools Open and Disable Cache Selected
- When you disable the cache, it is disabled for all the resources in that tab. It makes things slow and is inefficient if you want to disable cache for only 1-2 resources
Using Requestly Chrome Extension to disable Cache for particular resources (JS/CSS/Images, etc)
The trick here is to add a query parameter to your resource with random value every time the request is made. Using Requestly Query Param Rule, you can add a param like this.
URL Contains mywebsite.com/myresource.js
Add param cb rq_rand(4)
rq_rand(4) is replaced by 4 digits random number when a request is made.
- The good thing is you don't need to keep your dev tools open for having this behavior
- You can keep this permanently ON and your browsing experience won't be affected too.
Here is the link using which you can browse & download the rule if you have Requestly installed - https://app.requestly.io/rules/#sharedList/1600501411585-disable-cache-stackoverflow
Hope this helps you in your web development journey. Implement this and let us know in the comments how it goes.
Thank you for reading.
PS - This article is x-posted from an article published by Megha Pathak on Medium - https://medium.com/weekly-webtips/how-to-disable-caching-of-particular-js-css-file-84a93d005172. Her consent has been taken before publishing here.