Single file upload in Express - Performance & Optimization

Performance: Single file upload

MEDIUM IMPACT

This affects the page load speed and interaction responsiveness when uploading files through a web form.

Uploading a single file from a client to the server

Express

app.post('/upload', (req, res) => {
  const file = req.files.file;
  // Asynchronously save file
  fs.writeFile(`./uploads/${file.name}`, file.data, (err) => {
    if (err) return res.status(500).send('Upload failed');
    res.send('File uploaded');
  });
});

Asynchronous file saving allows Node.js to handle other requests while saving, improving responsiveness.

📈 Performance GainNon-blocking file save reduces INP and improves server throughput.

Uploading a single file from a client to the server

Express

app.post('/upload', (req, res) => {
  const file = req.files.file;
  // Synchronously save file
  fs.writeFileSync(`./uploads/${file.name}`, file.data);
  res.send('File uploaded');
});

Using synchronous file system operations blocks the Node.js event loop, delaying other requests and slowing response time.

📉 Performance CostBlocks event loop during file save, increasing INP and causing slower server response.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Synchronous file save	Minimal (file input only)	0	0	[X] Bad
Asynchronous file save	Minimal (file input only)	0	0	[OK] Good

Rendering Pipeline

When a file is uploaded, the browser sends the file data to the server, which processes and saves it. The server's handling affects how quickly it can respond to the client, impacting interaction responsiveness.

→Network Transfer

→Server Processing

→Response Rendering

⚠️ BottleneckServer Processing when using synchronous file operations

Core Web Vital Affected

INP

This affects the page load speed and interaction responsiveness when uploading files through a web form.

Optimization Tips

1Always use asynchronous file handling to avoid blocking the Node.js event loop.

2Keep file upload handling lightweight to improve interaction responsiveness (INP).

3Monitor server response times in DevTools Network tab to detect blocking operations.

Performance Quiz - 3 Questions

What is the main performance problem with synchronous file saving in Express during file upload?

A It causes the browser to reflow the page multiple times.

B It increases the size of the uploaded file.

C It blocks the Node.js event loop, delaying other requests.

D It reduces the network bandwidth available.

DevTools: Network

How to check: Open DevTools, go to Network tab, upload a file, and observe the request timing and response time.

What to look for: Look for long server response times indicating blocking operations during upload.