perf/cache-static-assets

Why

Without long cache lifetimes, returning visitors download the same scripts, styles, fonts and images again. With long lifetimes on HTML or on files whose names do not change, visitors keep seeing an old version after a deploy.

Fix

Let the build add a content hash to file names (Vite, webpack and the frameworks do it by default) and serve those with Cache-Control: public, max-age=31536000, immutable. Serve HTML with Cache-Control: no-cache so it is revalidated each time. Configure it in the host's headers file (_headers, vercel.json, netlify.toml, server config).

Examples

# _headers (Netlify, Cloudflare Pages)
/assets/*
  Cache-Control: public, max-age=31536000, immutable
/*.html
  Cache-Control: no-cache

Sources

• web.dev, Prevent unnecessary network requests with the HTTP Cache
• MDN, Cache-Control
• Chrome for Developers, Use efficient cache lifetimes insight

Read it in the terminal

npx github:dawidolko/frontend-skills explain perf/cache-static-assets