Troubleshooting CSS/JS Caching Issues

Common Caching Problems

• Users see outdated styles/scripts after updates.
• CDN caches old files.
• Browser ignores cache headers.

How to Fix:

1. Force Cache Busting with Versioning

Add a query string or hash to filenames:

2. Configure Cache-Control Headers

Add headers to .htaccess (Apache):

<FilesMatch "\.(css|js)$">
  Header set Cache-Control "max-age=31536000, public"

    

3. Clear CDN Cache

For Cloudflare users:

1. Go to **Caching → Configuration**.
2. Click **Purge Cache** → Select "Purge Everything".

4. Disable Caching During Development

Add meta tags to HTML (temporary fix):

5. Use Build Tools for Hashed Filenames

Webpack example (webpack.config.js):

module.exports = {
  output: {
    filename: "[name].[contenthash].js"
  }
};
    

Prevention Tips

• Use unique filenames for updated assets (e.g., styles-v2.css).
• Set short TTLs for HTML files, long TTLs for static assets.
• Test caching with WebPageTest.