How to Fix Browser Cache Showing Old Site Version

Clear Browser Cache

• Google Chrome:
  • Press Ctrl+Shift+Delete (Windows) or Cmd+Shift+Delete (Mac).
  • Select “Cached images and files” and clear data for “All time.”
  • Reload your site with Ctrl+F5 for a hard refresh.
• Firefox:
  • Press Ctrl+Shift+Delete, select “Cache,” and clear.
  • Reload with Ctrl+F5.

Test your site to confirm the latest version loads (e.g., check updated text or images). Alternatively, open your site in Incognito mode to bypass the cache.

Update Cache-Control Headers

• Log into your hosting control panel (e.g., cPanel, DirectAdmin) and open File Manager.
• Navigate to your site’s root directory (typically public_html) and edit the .htaccess file.
• Add or modify cache-control headers for dynamic content:

  <IfModule mod_headers.c>
    <FilesMatch "\.(html|php)$">
      Header set Cache-Control "no-cache, no-store, must-revalidate"
    </FilesMatch>
    <FilesMatch "\.(css|js|jpg|png|gif)$">
      Header set Cache-Control "public, max-age=604800"
    </FilesMatch>
  </IfModule>
  

Save, right-click .htaccess, select Change Permissions, and set permissions to 644. Alternatively, via SSH: Edit .htaccess with nano .htaccess and set permissions with chmod 644 .htaccess.

Implement Cache Busting

• For WordPress: Install a plugin like Autoptimize to add versioned URLs (e.g., style.css?ver=1.1).
• Alternatively, in your theme’s functions.php:

  <?php
  function add_cache_busting($src) {
      return $src . '?ver=' . time();
  }
  add_filter('style_loader_src', 'add_cache_busting', 9999);
  add_filter('script_loader_src', 'add_cache_busting', 9999);
  ?>
  

For non-CMS sites: Append query strings to static files (e.g., <link href="style.css?v=1.1">) in HTML/CSS. Test your site to ensure new files load.

Clear CDN and Server-Side Cache

• CDN (e.g., Cloudflare):
  • Log into your CDN dashboard and navigate to Caching > Purge Cache.
  • Select “Purge Everything” to clear cached files.
• WordPress Caching Plugins:
  • Log into wp-admin, go to your caching plugin (e.g., WP Super Cache), and clear the cache.
  • Alternatively, in File Manager, delete cache files in wp-content/cache.
• Server-Side Cache:
  • In your control panel, check for server caching (e.g., LiteSpeed Cache) and clear it.
  • Contact your hosting provider to flush server cache if needed.

  

Address Service Workers and Network Cache

• For PWAs: Open Chrome Developer Tools > Application > Service Workers and unregister any active service workers.
• Clear browser storage: Developer Tools > Application > Clear storage > Clear site data.
• For network cache: Restart your router or switch to a different network (e.g., mobile data) to bypass ISP proxies.

Verify and Finalize

• Hard refresh your site (Ctrl+F5) to confirm the latest version loads.
• Check Developer Tools > Network to ensure files have updated timestamps or versioned URLs.
• If the old version persists, contact your hosting provider for server-side caching issues.