Why real-time matters in Express - Performance Evidence

Performance: Why real-time matters

HIGH IMPACT

Real-time affects how quickly users see updates and interact with the app, impacting responsiveness and user experience.

Delivering live updates to users in a web app

Express

const http = require('http');
const express = require('express');
const { Server } = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = new Server(server);
io.on('connection', (socket) => {
  // Push updates instantly
  socket.emit('update', { data: 'new data' });
});
server.listen(3000);

Using WebSockets pushes updates instantly without repeated requests, reducing latency and server load.

📈 Performance GainSingle persistent connection per client, reducing network overhead and improving INP significantly.

Delivering live updates to users in a web app

Express

app.get('/updates', (req, res) => {
  // Endpoint for client-side polling every 5 seconds
  res.json({ data: 'new data' });
});

Polling causes repeated HTTP requests, increasing server load and latency, leading to slower updates and higher bandwidth use.

📉 Performance CostTriggers multiple network requests per user, increasing server CPU and bandwidth usage, causing slower INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Polling HTTP requests every 5 seconds	Multiple repeated DOM updates	Multiple reflows per update	High paint cost due to frequent updates	[X] Bad
WebSocket push updates	Single DOM update per event	Minimal reflows triggered	Lower paint cost with targeted updates	[OK] Good

Rendering Pipeline

Real-time data pushes bypass repeated HTTP requests, reducing delays before the browser can update the UI and improving interaction responsiveness.

→Network

→JavaScript Execution

→Paint

→Composite

⚠️ BottleneckNetwork latency and repeated HTTP request overhead

Core Web Vital Affected

INP

Real-time affects how quickly users see updates and interact with the app, impacting responsiveness and user experience.

Optimization Tips

1Avoid frequent polling; use persistent connections like WebSockets.

2Push updates only when data changes to reduce unnecessary DOM updates.

3Monitor network and scripting time to ensure real-time features do not block rendering.

Performance Quiz - 3 Questions

Which real-time pattern reduces server load and improves interaction responsiveness?

A Reloading the entire page on update

B Polling the server every second

C Using WebSockets to push updates

D Sending updates via email

DevTools: Performance

How to check: Record a session while interacting with real-time features; look for network requests and scripting time.

What to look for: Frequent network requests and scripting spikes indicate polling; steady low network activity with event-driven updates indicates good real-time performance.