HTTP caching headers (ETag, Cache-Control) in Express - Performance & Optimization

Performance: HTTP caching headers (ETag, Cache-Control)

HIGH IMPACT

This affects how fast the browser can load resources by reusing cached files instead of downloading them again.

Serving static files with caching

Express

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

Browser caches files and uses ETag to validate, reducing network requests.

📈 Performance GainReduces network requests; improves LCP by up to 50% on repeat visits.

Serving static files with caching

Express

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

Browser must re-download files on every visit, increasing load time and bandwidth.

📉 Performance CostBlocks rendering until files download; increases LCP by hundreds of milliseconds.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No caching headers	N/A	N/A	High due to delayed resource loading	[X] Bad
Cache-Control with max-age and ETag	N/A	N/A	Low due to cached resources	[OK] Good

Rendering Pipeline

When caching headers are set, the browser checks cache before requesting resources, skipping network fetch if valid. This reduces time spent in network and parsing stages.

→Network

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork latency and resource download

Core Web Vital Affected

LCP

This affects how fast the browser can load resources by reusing cached files instead of downloading them again.

Optimization Tips

1Always set Cache-Control max-age to enable browser caching.

2Use ETag headers to allow conditional requests and avoid full downloads.

3Check DevTools Network tab for 304 responses to confirm caching works.

Performance Quiz - 3 Questions

What does setting Cache-Control max-age do for resource loading?

A Disables caching completely

B Tells the browser how long to reuse a cached resource without rechecking

C Forces the browser to always download the resource fresh

D Only works for images, not scripts or styles

DevTools: Network

How to check: Open DevTools > Network tab, reload page, look for 304 Not Modified responses and Cache-Control headers in resource details.

What to look for: Presence of 304 responses and Cache-Control max-age headers indicate effective caching.