Setting response headers in Node.js - Performance & Optimization

Performance: Setting response headers

MEDIUM IMPACT

Setting response headers affects how quickly the browser can start rendering content and how efficiently resources are cached or processed.

Setting HTTP headers for caching and content type in a Node.js server

Node.js

const http = require('http');
http.createServer((req, res) => {
  res.setHeader('Content-Type', 'text/html');
  res.setHeader('Cache-Control', 'public, max-age=31536000');
  res.end('<h1>Hello</h1>');
}).listen(3000);

Enables browser caching for one year, reducing repeated network requests and speeding up load.

📈 Performance GainReduces LCP by avoiding unnecessary network fetches on repeat visits.

Setting HTTP headers for caching and content type in a Node.js server

Node.js

const http = require('http');
http.createServer((req, res) => {
  res.setHeader('Content-Type', 'text/html');
  res.setHeader('Cache-Control', 'no-cache');
  res.end('<h1>Hello</h1>');
}).listen(3000);

Using 'no-cache' disables caching, causing browsers to re-fetch resources every time, increasing load times.

📉 Performance CostIncreases LCP by causing repeated network requests, blocking rendering longer.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No caching headers or 'no-cache'	N/A	N/A	Blocks rendering until network response	[X] Bad
Proper Content-Type and long max-age caching	N/A	N/A	Allows fast rendering from cache	[OK] Good

Rendering Pipeline

Response headers are sent before the body, informing the browser how to handle the content and caching. Proper headers reduce network delays and improve rendering start time.

→Network

→Critical Rendering Path

→Cache

⚠️ BottleneckNetwork latency caused by inefficient caching headers

Core Web Vital Affected

LCP

Setting response headers affects how quickly the browser can start rendering content and how efficiently resources are cached or processed.

Optimization Tips

1Always set Content-Type header correctly to avoid rendering delays.

2Use Cache-Control with appropriate max-age to enable browser caching.

3Set all headers before sending the response body to ensure proper browser handling.

Performance Quiz - 3 Questions

Which response header setting improves repeat page load speed the most?

A Content-Type: text/plain

B Cache-Control: no-cache

C Cache-Control: public, max-age=31536000

D No headers set

DevTools: Network

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

What to look for: Look for Cache-Control with max-age or public directives and correct Content-Type to confirm good header setup.

Practice

1. What is the purpose of setting response headers in a Node.js server?

easy

A. To execute JavaScript code on the server

B. To provide the browser with important information about the response

C. To store data permanently on the server

D. To create new files on the server

Solution

1. Step 1: Understand what response headers do

   Response headers tell the browser details about the response, like content type or caching rules.

2. Step 2: Identify the correct purpose

   Only To provide the browser with important information about the response describes this role correctly; other options describe unrelated server tasks.

3. Final Answer:

   To provide the browser with important information about the response -> Option B

4. Quick Check:

   Response headers = browser info [OK]

Hint: Headers tell browser about response before body [OK]

Common Mistakes:

• Thinking headers run code on server
• Confusing headers with server storage
• Believing headers create files

2. Which of the following is the correct syntax to set a response header named Content-Type to application/json in Node.js?

easy

A. response.setHeader('Content-Type', 'application/json');

B. response.header('Content-Type', 'application/json');

C. response.set('Content-Type', 'application/json');

D. response.addHeader('Content-Type', 'application/json');

Solution

1. Step 1: Recall Node.js method for setting headers

   Node.js uses response.setHeader(name, value) to set headers.

2. Step 2: Match syntax with options

   Only response.setHeader('Content-Type', 'application/json'); uses setHeader correctly; others use incorrect method names.

3. Final Answer:

   response.setHeader('Content-Type', 'application/json'); -> Option A

4. Quick Check:

   Use setHeader(name, value) [OK]

Hint: Use setHeader method exactly as shown [OK]

Common Mistakes:

• Using header() instead of setHeader()
• Using set() or addHeader() which don't exist
• Wrong method name casing

3. What will be the value of the Content-Type header sent to the client after running this code snippet?

const http = require('http');
const server = http.createServer((req, res) => {
  res.setHeader('Content-Type', 'text/html');
  res.setHeader('Content-Type', 'application/json');
  res.end('{}');
});
server.listen(3000);

medium

A. 'text/html'

B. Both 'text/html' and 'application/json'

C. No Content-Type header is sent

D. 'application/json'

Solution

1. Step 1: Understand header overwriting behavior

   Setting the same header twice overwrites the previous value in Node.js.

2. Step 2: Identify final header value

   The second setHeader call sets 'Content-Type' to 'application/json', replacing 'text/html'.

3. Final Answer:

   'application/json' -> Option D

4. Quick Check:

   Last setHeader call wins [OK]

Hint: Last setHeader call overwrites previous [OK]

Common Mistakes:

• Thinking both headers are sent
• Assuming first header stays
• Believing no header is sent

4. Identify the error in this Node.js code that tries to set a response header:

const http = require('http');
const server = http.createServer((req, res) => {
  res.write('Hello');
  res.setHeader('Content-Type', 'text/plain');
  res.end();
});
server.listen(3000);

medium

A. res.end() is missing a parameter

B. The method setHeader does not exist on res

C. Headers must be set before writing the response body

D. The server.listen port number is invalid

Solution

1. Step 1: Check order of header setting and response writing

   Headers must be set before sending any part of the response body.

2. Step 2: Identify the error in code order

   res.write('Hello') sends body first, so setHeader after it causes error.

3. Final Answer:

   Headers must be set before writing the response body -> Option C

4. Quick Check:

   Set headers before body [OK]

Hint: Set headers before any res.write or res.end [OK]

Common Mistakes:

• Setting headers after writing body
• Thinking setHeader is invalid method
• Assuming res.end needs data always

5. You want to set multiple headers including Content-Type as application/json and Cache-Control as no-cache in a Node.js server. Which code snippet correctly sets both headers before sending the response?

hard

A. res.writeHead(200, {
'Content-Type': 'application/json',
'Cache-Control': 'no-cache'
});
res.end(JSON.stringify(data));

B. res.end(JSON.stringify(data));
res.setHeader('Content-Type', 'application/json');
res.setHeader('Cache-Control', 'no-cache');

C. res.setHeader('Content-Type', 'application/json');
res.end(JSON.stringify(data));
res.setHeader('Cache-Control', 'no-cache');

D. res.setHeader({'Content-Type': 'application/json', 'Cache-Control': 'no-cache'});
res.end(JSON.stringify(data));

Solution

1. Step 1: Understand setting multiple headers at once

   writeHead allows setting status and multiple headers before sending response.

2. Step 2: Check order and correctness

   res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-cache' }); res.end(JSON.stringify(data)); sets both headers before res.end, correctly using writeHead.

3. Step 3: Identify errors in other options

   res.setHeader({'Content-Type': 'application/json', 'Cache-Control': 'no-cache'}); res.end(JSON.stringify(data)); incorrectly passes an object to setHeader (expects name, value); B and C set headers after res.end (which sends headers).

4. Final Answer:

   res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-cache' }); res.end(JSON.stringify(data)); -> Option A

5. Quick Check:

   Use writeHead for multiple headers before response [OK]

Hint: Use writeHead to set many headers at once before response [OK]

Common Mistakes:

• Using setHeader with object (like Express)
• Setting headers after res.end
• Confusing setHeader and writeHead usage