All notes

The Hidden Website Problem Beginners Face (And the 1-Line Fix)

Your code may be fine: the browser could simply be serving an old cached version of your CSS or JavaScript.

Code editor on a laptop

You update your website’s CSS or JavaScript, refresh, and nothing changes. Your code is not broken; the browser is loading a cached (old) version of your file.

Why This Happens

Browsers cache static files like:

  • CSS
  • JavaScript
  • Images

This makes websites load faster. But while updating your CSS or JS, the browser may still use the old saved version instead of the updated one.

Where to Apply the Fix

You apply cache busting inside your HTML file, where you link your CSS and JS.

Inside the <head> (for CSS):

  • <link rel="stylesheet" href="styles.css?v=2">

Before the closing </body> or with defer (for JS):

  • <script src="app.js?v=2"></script>

How It Works

When you update your CSS or JS, change the version number:

  • ?v=3

The browser treats it as a new file and downloads the latest version.

When to Use It

Use cache busting:

  • While updating CSS and JS
  • When changes don’t reflect
  • When deploying updates
  • In static websites without build tools

:)

Important

Only change the version when the file changes. If it changes every time the page loads, caching is disabled and performance drops.

Caching improves speed. Cache busting ensures users see your latest updates.