I am experiencing this weird issue where my Chrome browser keeps loading a old version of my website whose code doesn't even exist on my server any more. I assume it's a typical cache issue.
I tried to clean the browser cache, use igcognito mode, and clean DNS cache. The old cached page is still being loaded.
This issue seems to have been discussing on this google group for three years but there is still no solutions. https://productforums.google.com/forum/#!topic/chrome/xR-6YAkcASQ
Using firefox or any other web browsers works perfectly.
It doesn't just happen to me. All my coworkers experience the same issue on my website.
<?php Header("Cache-Control: max-age=3000, must-revalidate"); ?>
You can implement a PHP script that must be the first line of code in your index file . It is an http header typically issued by web servers. You can also rename the resource that is considered "stale". This tutorial will give you more details. https://www.mnot.net/cache_docs/
I'm not sure if I understand your problem correctly, but I was experiencing something similar and instead of clearing the cache I disabled it by doing this:
Open chrome and then go to your website
Press Command + Option + C(Mac)
Now that you've opened chrome's DevTools, go to the main menu where it says: Elements Console Sources ...
Click on the menu element that says Network
Make sure that the "Disable Cache" checkbox is checked
Then reload the page without closing the DevTools
This worked for me.
Let me know if it worked for you :)
A short term fix to view the new version of your site would normally be to clear out the cache and reload, for some reason this doesn't always work on Chrome. This short term solution is not going to fix the problem for every user that's on your site though, it will just allow you to see the new version of your site.
Adding version numbers to CSS and JS files will allow you and every other user, to see the most recent version of your site. A version number will force any browser not to load from the a user's personal computer cache, and instead load the actual files on the server, if the version number varies from the one in the user's cache.
So if you have these files on your server:
ExJS.js
ExCSS.css
and change them to:
ExJS.js?v=1.01
ExCSS.css?v=1.01
the new version of these files will load in any browser.
Normally, a browser will always load the HTML file from the server, but there are some HTML meta tags you can use to make sure that the most recent HTML version will load for any user:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
There are also ways to make sure that files in other languages always load the most recent version as well, which is discussed on this post:
How to add version number to HTML file (not only to css and js files)
You can press on Inspect, then Network and check Disable cache.
change the name of images and make the necessary image name changes in html file.. found this quick fix for my website
I ran into the same issue, and I also tried to disable caching on my JSP pages
<% response.setHeader("Cache-Control","no-cache");
response.setHeader("Pragma","no-cache");
response.setDateHeader ("Expires", 0); %>
But it didn't help.
This is a known issue with google chrome and chromium browsers, even though you clear cache and cookie.
However it may or may not happen for most of the users.
Also this has been unresolved till the date since last 9-10 years.
Hence for testing purposes I would highly recommend to use Mozilla Firefox or Opera.
However it does sounds that your application is limited to certain browsers for best experience, and may not sound convincing to Business/End users.
But having said that, this caching issue may or may not happen to most of us.
You should be able to clear the problem by resetting Chrome. This is the only way I found to clear this condition - after tearing my hair out for half a day.
Prior to finding this, I tried clearing the cache, deleting the contents of the various cache directories etc. in vain.
[As of today May 3 2021] You can do this by gong to 'Settings > Advanced > Reset and clean up > Restore settings to their original defaults'. Note that this will not remove any bookmarks but will log you out of all accounts you are signed into.
Adding CNAME Will help also if you always run site without www, try with www.example.com will work.
I came across this issue developing locally, and tried the following things:
Clearing Cache + generally ALL files in Chrome
Setting the Cache-Control Header like Eli Duhon mentioned.
Setting the Cache Control Header in multiple other ways.
And the only thing that fixed the problem for me was to basically re-start my docker containers on which the app was running.
so I did this:
docker-compose down
And then
docker-compose up
and everything was updated after that.
HOWEVER, if you have changes again, they are still not updated...
So this is certainly not a fix to this problem, as I dont even know what causes this behaviour in the first place, but I assume it has to do something with hot reloading and/or Docker but that was the only thing that did the trick for me so I thought I would mention it here...
I had this problem moving a Wordpress site to new hosting where the URL redirects to .../wp, which hadn't been the case before.
Chrome was helpfully presenting a directory listing showing the file dates from the old server, despite the DNS having updated fully a week ago. So it was obviously demonstrating the problem discussed here.
I added an index.html file with just the following in it:
<meta http-equiv="refresh" content="0; URL='http://my-wp-site.com/wp'"/>
which fixed the problem straight away, including on Chrome browsers that had not had their cache cleared and that had no knowledge of any Google account of mine.
I don't know why this worked, however, given all the problems people have listed above.
you have two options
a) consider fingerprint the stale resources like
<script src="js/app-4829382839238882882bb3442bbbbdhh3kh3.js" type="text/javascript"></script>
b) Add cache control headers such as Cache-Control, Expires on your webserver.
This is a good read on browser caching
I use Glyphicons on my website, they are served as a part of Bootstrap 3. In viewing the Network tab of the dev console I realized they were loading late (when the browser's parser got to it), and there was room to improve performance by bringing that element to the browser sooner.
In Chrome it is possible to do this via:
<link rel="subresource" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/fonts/glyphicons-halflings-regular.woff">
In the <HEAD> of the document.
I am seeing the DOMContentLoaded time increase in a way which suggests this file is loading twice (first on line 5 in the screenshot, and again on the 2nd to last line). My suspicion is further confirmed that it is loading twice by the HTTP Response Code (200) which tells me it came from the remote server both times, and was not fetched from Cache.
You can see what the dev console looks like here:
http://oi60.tinypic.com/2t9n7.jpg
(In case tinypic goes down, here it is in my dropbox: https://www.dropbox.com/s/vlwgywatg9rsg8v/subresourcenotcached.png)
The Cache Headers on the HTTP version of that asset are, but it's worth noting the network tab output on the dev console looks the same for both HTTP and HTTPS.
HTTP/1.1·200·OK(CR)(LF)
Server:·cloudflare-nginx(CR)(LF)
Date:·Mon,·02·Jun·2014·17:49:06·GMT(CR)(LF)
Content-Type:·application/octet-stream(CR)(LF)
Content-Length:·23320(CR)(LF)
Connection:·close(CR)(LF)
Last-Modified:·Thu,·13·Feb·2014·22:45:07·GMT(CR)(LF)
Expires:·Sat,·23·May·2015·17:49:06·GMT(CR)(LF)
Cache-Control:·public,·max-age=30672000(CR)(LF)
Access-Control-Allow-Origin:·*(CR)(LF)
CF-Cache-Status:·HIT(CR)(LF)
Accept-Ranges:·bytes(CR)(LF)
CF-RAY:·13457c53f04d0378-LAX(CR)(LF)
(CR)(LF)
Does anybody have insight into how I can get this .woff file to cache, and properly utilize the LINK SUBRESOURCE capability in Chrome?
It's a bug in the current Chrome. Have a look at https://code.google.com/p/chromium/issues/detail?id=312327
The files listed in the .mf file are the same files i am trying to load when the page first runs. Does having a manifest attribute defer processing of the rest of the document until the appcache loads?
No. On the very first load the cache gets built in the background, using the same files that where just downloaded, provided they have proper cache settings. E.g. If you have foo.css with long cache headers in your HTML page and the manifest, the browser will:
Load and render the page.
Look at the manifest.
Load foo.css from browser cache to appcache.
BUT: Appcache will however result in a FOUC (brief white page on reload), even if online and the page/app was made well enough so far to show smooth reloads.
With AppCache, the browser loads the document and its associated resources directly from the cache, without accessing the network, so this should load just as fast if not faster.
How do I force caching of pages, scripts, images(resources) including the results of dynamicly generated content (php,asp,etc etc), I do not have control of the website in question and I understand that if I cache a dynamic page it becomes static,, thats fine for me,,
However... I do not want to cache everything.. the pages loads default.asp,,,as well as a tone of .js scripts,,, in turn which make calls to a API returning some XML,,
I want to cache the default.asp and all .js but not the xml files.
im using chrome and chrome is aggressively caches what it can but all the stuff from this site has a max-age=0 header.
so from chrome how can I override headers for individual resources?
I read in a source that chrome, when it goes to a domain, it prefetches most of the pages that might be used for that domain. As a result of this, I'm facing a problem. I have a greasemonkey script which is to be injected in every page. But what seems to happen is that the browser injects the script for the first page in a domain and that remains when i go to another page, instead of being re-injected (which is what i would want). Any ideas on how i could achieve this behavior ??
Google Chrome will precache DNS entries on the page but it doesn't pro-actively go and fetch pages, Firefox however, does prefetch pages.
Actually, there is a case where Chrome will proactively pre-cache any page that is mentioned in the cache manifest. This is designed for offline scenarios. However, each page when downloaded will not be executed against any injected script, nor will it run any JS on those pages.