Broken Assets

Broken assets are failed requests for files such as CSS, JS, images, or fonts.

Why It Matters

Broken assets can degrade layout, functionality, performance, and trust. Even one missing stylesheet or script can break primary page workflows and increase bounce.

Typical Root Causes

  • 404/500 responses for static assets.
  • Incorrect paths after deploys.
  • Missing files in build output.
  • Cache invalidation mismatches between HTML and asset hashes.
  • CDN or proxy rules rewriting paths unexpectedly.

What to Check

  • Network panel for failed requests on key templates.
  • Build manifest references in production HTML.
  • Case-sensitivity/path differences between local and production filesystems.
  • CORS and MIME-type headers for font/script assets.

Remediation Best Practices

  • Use hashed asset versioning and atomic deployments.
  • Keep HTML and compiled assets deployed together.
  • Alert on rising 404 rates for static file paths.
  • Validate critical routes after each deploy.

Quick Checklist

  • No 404/500 responses for CSS/JS on key pages.
  • Hero images and fonts load consistently.
  • Build manifest paths match deployed assets.
  • CDN cache is purged/updated after releases.

Final Takeaway

Fix broken assets quickly to prevent UX and SEO regressions. Asset integrity checks should be part of every release process.