HTTP caching headers in Node.js - Performance & Optimization

Performance: HTTP caching headers

HIGH IMPACT

This affects how fast browsers load resources by controlling if and when cached files are reused instead of downloaded again.

Serving static assets with caching

Node.js

app.use(express.static('public', { maxAge: '1d', etag: true }))

Browsers reuse cached files for 1 day, reducing network requests and speeding up page load.

📈 Performance GainReduces network requests on repeat visits by 80-90%, improving LCP significantly

Serving static assets with caching

Node.js

app.use(express.static('public')) // no cache headers set

Browsers always re-download static files, causing slower page loads and more network traffic.

📉 Performance CostBlocks rendering longer due to repeated downloads; increases LCP by 200-500ms on repeat visits

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No caching headers	N/A	N/A	High network delay delays paint	[X] Bad
Cache-Control with max-age	N/A	N/A	Reduced network delay speeds paint	[OK] Good
No-cache forcing revalidation	N/A	N/A	Extra network round-trips delay paint	[!] OK
ETag with stable value	N/A	N/A	Efficient validation reduces load time	[OK] Good

Rendering Pipeline

HTTP caching headers influence whether the browser fetches resources from the network or cache, affecting the critical rendering path by reducing network delays and resource load times.

→Network Request

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork Request stage is most expensive when cache headers are missing or misconfigured.

Core Web Vital Affected

LCP

This affects how fast browsers load resources by controlling if and when cached files are reused instead of downloaded again.

Optimization Tips

1Always set Cache-Control with max-age for static assets to enable browser caching.

2Use ETag headers for efficient cache validation to avoid unnecessary downloads.

3Avoid 'no-cache' on frequently used static resources to prevent repeated network requests.

Performance Quiz - 3 Questions

Which HTTP header helps browsers decide how long to reuse a cached resource without rechecking?

A Last-Modified

B ETag

C Cache-Control with max-age

D Content-Type

DevTools: Network

How to check: Open DevTools > Network tab, reload page, check resource headers for Cache-Control, ETag, and Last-Modified. Look for 304 status codes indicating cache hits.

What to look for: Resources with 304 Not Modified or served from disk/memory cache show good caching. Repeated 200 responses indicate poor caching.