Definition

Browser caching is the mechanism by which a browser stores copies of a site's files — such as images, CSS and JavaScript — so that repeat visits can load them from the local cache instead of re-downloading them over the network.

Caching behaviour is controlled by HTTP response headers the server sends with each file. The Cache-Control header specifies whether and for how long a response may be reused, while ETag lets the browser check whether a cached file is still current without downloading it again. Reusing cached files cuts network requests and can improve load performance for returning visitors; because Google's page-experience signals include loading performance, caching is one of several factors that can affect how fast a page feels.

Examples

• Versioned assets

  A site serves its stylesheet as `styles.abc123.css` with `Cache-Control: max-age=31536000`. Returning visitors load it from cache, and a content change ships under a new filename.

• Revalidation with ETag

  A browser holds an expired cached image and sends its ETag to the server; the server replies '304 Not Modified', so the image is reused without re-downloading.

Sources

• web.dev — Prevent unnecessary network requests with the HTTP Cache

Related terms

• Page Speed
  How quickly a web page loads and becomes interactive, measured by metrics such as Largest Contentful Paint, Interaction to Next Paint, and Time to First Byte.
• Content Delivery Network
  A network of geographically distributed servers that cache and deliver web content from a location close to each user.
• Render-Blocking Resources
  Resources — typically CSS and synchronous JavaScript — the browser must fetch and parse before it can paint the first frame of a page.

Where QueryCatch uses this

• SEO Audit
• Page Optimisation