Chrome keeps loading a old cache of my website

Question

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.

Answer 1

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)

Answer 2

change the name of images and make the necessary image name changes in html file.. found this quick fix for my website

Answer 3

<?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/