Browser Cache Busting For CSS, JavaScript, And HTML

Cache busting changes an asset URL or validator when its bytes change so browsers and intermediaries do not reuse an obsolete representation.

Why This Matters

Long-lived immutable CSS and JavaScript improve performance, but deployments must ensure HTML references the matching asset generation.

Working Model

Content-hashed filenames are the strongest default for built assets. Query versions can work when every cache key includes the query. HTML usually revalidates or has a short lifetime so it can point to the latest manifest.

Practical Rules

  • Use content hashes for built assets.
  • Send long-lived immutable caching only for versioned URLs.
  • Deploy new assets before HTML that references them.
  • Retain old assets during rollout and rollback.
  • Do not cache authenticated HTML publicly.

Failure Modes

  • Changing CSS without changing its URL.
  • Purging HTML before new assets exist.
  • Assuming every proxy keys on query strings identically.
  • Deleting old assets immediately during rolling deployment.

Verification

  • Inspect network requests and response headers.
  • Deploy two versions across multiple instances.
  • Test rollback.
  • Verify HTML and asset cache policies separately.

What You Should Be Able To Do

After this lesson, you should be able to explain query-string versions, content hashes, manifests, HTML revalidation, and deployment ordering, choose a suitable approach for a real PHP project, and verify the result instead of relying on assumptions.

Practice

Practice: Version A Static Site

Choose cache rules for index.html and hashed assets.

Your answer must:

  • state the intended outcome;
  • show the commands, data flow, or implementation shape;
  • identify at least one unsafe alternative;
  • explain how the result will be verified.
Show solution

Let HTML revalidate or use a short cache lifetime, give hashed assets a long immutable lifetime, and publish assets before HTML.

The important part is not memorising one command or vendor screen. The solution makes the invariant, failure behavior, and verification evidence explicit.

Practice: Review Query Busting

A site uses app.css?v=42.

Your answer must:

  • state the intended outcome;
  • show the commands, data flow, or implementation shape;
  • identify at least one unsafe alternative;
  • explain how the result will be verified.
Show solution

Confirm every cache layer includes the query in its key, increment the version only when bytes change, and prefer content hashes when a build manifest is available.

The important part is not memorising one command or vendor screen. The solution makes the invariant, failure behavior, and verification evidence explicit.

Practice: Plan A Safe Rollback

A deployment may roll back while browsers hold new HTML.

Your answer must:

  • state the intended outcome;
  • show the commands, data flow, or implementation shape;
  • identify at least one unsafe alternative;
  • explain how the result will be verified.
Show solution

Keep both asset generations available, make releases immutable, switch HTML or release pointers atomically, and purge only when required.

The important part is not memorising one command or vendor screen. The solution makes the invariant, failure behavior, and verification evidence explicit.