Client side cache on css/js

Question

First things first I should say I spend my time to read all topics in this case but no success, recently I faced with a problem with client/browser cache on my website, It occurred without any change. Server side cache is good but client side working so bad, I should press CTRL+F5 everytime, I don't want this because it is bad for users, I know I can disable cache when devTool is open, but I'm talking about user not just myself. This happen on desktop and mobile device too. In mobile device I should go to setting/privacy/clear cache.

Here is my website codes relate to cache:

htaccess:mod_expires

ExpiresByType text/css "access plus 1 month"

I removed css from gzip, but no success. Also changing 1 month to 1 second.

mod_gzip_item_include file .(html?|txt|css|js|php|pl)$

PHP header:

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Pragma: no-cache");
header("Vary: Accept-Encoding");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");

HTML meta:

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

As you see I tried all possible way to fight with annoying cache but no success. I know I can add version at the end of css or js but all know this is a bad habit to clear cache:

Remove query strings from static resources

Resources with a "?" in the URL are not cached by some proxy caching servers. Remove the query string and encode the parameters into the URL for the following resources:

source

So, what is the best to remove css and js heavy cache in the right direction?

Possible duplicate of How to force browser to reload cached CSS/JS files? — holden
– holden, Commented Mar 15, 2018 at 10:11

Vasudevan · Accepted Answer · 2018-03-14 17:41:45Z

1

<?php $filename "path/to/file.css";  ?>
<script src="<?php echo $filename; ?>?ver=<?php echo filemtime($filename); ?>">

This will cache in the browser but when you make changes in the file filetime will be updated and client will get fresh copy of the file.

answered Mar 14, 2018 at 17:41

Vasudevan

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Laurent P · Accepted Answer · 2018-03-14 16:11:22Z

0

Try using HTTP Etags. This will allow the client to deduce if the resource needs to be reloaded from the server.

answered Mar 14, 2018 at 16:11

Laurent P

362 bronze badges

2 Comments

Jack The Baker Over a year ago

any idea how can I use it?

Laurent P Over a year ago

Try setting the Etag Header with an md5 over the file's contents as content.

Jeremy Thille · Accepted Answer · 2018-03-14 16:15:44Z

0

This works every time : add ? + random stuff at the end of your files. For instance :

<script src="path/to/file.css?8768316833"></script>

In PHP, I believe this should be done this way (I haven't written any PHP in years, but here goes :)

<script src="path/to/file.css?<?php echo rand() ?>"></script>"

This will force the browser to download a fresh copy of the files every time.

answered Mar 14, 2018 at 16:15

Jeremy Thille

26.4k12 gold badges48 silver badges64 bronze badges

5 Comments

holden Over a year ago

Not really efficient as a solution, the file would be re-loaded anyway from the server regardless if changed or not...

Jeremy Thille Over a year ago

Unless I'm mistaken, isn't that what OP is asking for? Or maybe I misunderstood

holden Over a year ago

He simply wrote he doesn't want the "versioning" solution in query string; anyway i thing that both versioning and rand() parameter are, for different reasons, not effricient. Anyway, i did not dare "downvote" your answer cause, alla in all, it solves the opener's problem.

Jeremy Thille Over a year ago

At least you would have said why you downvoted, and that's rare enough :)

Jack The Baker Over a year ago

Thanks for your answer, but as I said I don't want to use version, because it's bad for SEO thing. I want to do this via right way, not a trick. I more want to know what is the problem exactly.

Collectives™ on Stack Overflow

Client side cache on css/js

3 Answers 3

Comments

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related