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.
But!
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!
What exactly am I trying to explain?
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.
How to Disable Caching of particular JS/CSS file?
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.
One efficient way of disabling caching of CSS/JS files
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
You can see that all the resources (I have filtered JS resources) have been fetched from network and not loaded from disk/memory cache.
- Disable Cache not selected
You can see that when I refreshed the page but didn't select the "Disable Cache" feature, almost all the resources were loaded from Cache.
This works fine for local web development but there are certain limitations that I'd like to highlight.
Limitations
- 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.
Requestly Query Parameter Rule to add random parameter
After adding the rule, JS/CSS files are not cached
Here you can see that "Disable Cache" is not selected and still the resources are not loaded from Cache because of a random parameter (cb - Read it as Cache buster) in the URL.
- 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.
How to get the Rule
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.
Top comments (0)