res.set for response headers in Express - Performance & Optimization

Performance: res.set for response headers

MEDIUM IMPACT

Setting response headers affects how the browser processes and caches the response, impacting load speed and rendering behavior.

Setting HTTP headers for caching and content type

Express

app.get('/data', (req, res) => {
  res.set({
    'Cache-Control': 'public, max-age=3600',
    'Content-Type': 'application/json'
  });
  res.send(JSON.stringify({ message: 'Hello' }));
});

Enables browser caching for 1 hour, reducing repeated requests and speeding up page load.

📈 Performance GainReduces LCP by caching; lowers server load and network usage

Setting HTTP headers for caching and content type

Express

app.get('/data', (req, res) => {
  res.set('Cache-Control', 'no-cache');
  res.set('Content-Type', 'application/json');
  res.send(JSON.stringify({ message: 'Hello' }));
});

Disabling caching with 'no-cache' forces the browser to re-fetch resources every time, increasing load time and server load.

📉 Performance CostIncreases LCP by forcing repeated downloads; adds server processing for every request

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No caching headers (Cache-Control: no-cache)	N/A	N/A	Higher due to repeated downloads	[X] Bad
Proper caching headers (Cache-Control: public, max-age=3600)	N/A	N/A	Lower due to cached resources	[OK] Good

Rendering Pipeline

Response headers set by res.set influence how the browser handles the incoming response, affecting caching, content parsing, and rendering.

→Network

→Resource Loading

→Rendering

⚠️ BottleneckNetwork latency and repeated resource fetching due to improper caching headers

Core Web Vital Affected

LCP

Setting response headers affects how the browser processes and caches the response, impacting load speed and rendering behavior.

Optimization Tips

1Use res.set to add caching headers to reduce repeated network requests.

2Avoid 'no-cache' for static resources to improve load speed.

3Set Content-Type headers correctly to help browsers parse content efficiently.

Performance Quiz - 3 Questions

What is the main performance benefit of setting Cache-Control headers with max-age in res.set?

A It allows the browser to cache resources and reduce repeated network requests.

B It disables browser caching to always fetch fresh data.

C It increases server CPU usage by adding headers.

D It delays the response to improve rendering.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload the page, click a resource, and check the Response Headers section for Cache-Control values.

What to look for: Look for Cache-Control header with max-age or public directives indicating caching is enabled.