The Hidden Latency of 304 Not Modified: Why Frontend Engineers Must Own CDN Headers

Frontend Engineers Should Care More About Infrastructure

Author Gavin Clive describes a CDN migration where missing Cache-Control headers led to a significant LCP regression detected in RUM data two weeks post-launch. While ETag validation via 304 Not Modified saves bandwidth, the resulting network round-trips caused rendering delays on high-latency 4G connections.

Why This Matters

In an ideal development model, 304 Not Modified is viewed as a successful cache hit because it prevents redundant data transfer. However, the technical reality is that every validation request requires a round-trip to the edge, which can block the Largest Contentful Paint (LCP) even if the payload size is zero. For users on mid-range devices or mobile networks, these aggregated validation spans create invisible latency that can compromise KPI cycles if frontend engineers do not verify the underlying infrastructure’s freshness policies.

Key Insights

• LCP regression surfaced in RUM data two weeks after a successful CDN migration despite normal error rates and transfer sizes (2026).
• Heuristic caching occurs when browsers calculate a short, unpredictable freshness window based on the gap between Last-Modified and the current date in the absence of explicit headers.
• ETag vs. Cache-Control: ETag asks ‘has this changed?’ which requires a network request, while Cache-Control asks ‘do I need to ask right now?’ which can eliminate the request entirely.
• Sentry traces can reveal a ‘page full of tiny validations’ where multiple 304 responses delay rendering even when bandwidth usage is optimized.
• Conditional GET requests using If-None-Match still incur the cost of a round-trip before the browser can render the Largest Contentful element.

Working Examples

Explicit freshness policy providing seven days of cache freshness with a one-day window for background revalidation.

Cache-Control: max-age=604800, stale-while-revalidate=86400

Practical Applications

• Use case: Applying long max-age directives to versioned assets and stable UI images to ensure browsers skip validation requests entirely during repeat visits.
• Pitfall: Using long max-age on non-versioned URLs where the image content might change, creating a ‘footgun’ where users see stale content without a way to invalidate it.
• Use case: Analyzing Sentry or DevTools waterfalls specifically for validation spans that occur before the LCP mark to identify missing infrastructure-level caching.
• Pitfall: Assuming infrastructure migrations are ‘correct’ based solely on status codes like 200 or 304 without auditing the injected response headers.

References:

• https://dev.to/gavin_clive/frontend-engineers-should-care-more-about-infrastructure-id7