Why WebSockets enable real-time features in NestJS - Performance Evidence

Performance: Why WebSockets enable real-time features

HIGH IMPACT

WebSockets impact the interaction speed between client and server by enabling instant two-way communication, improving responsiveness and user experience.

Implementing real-time chat updates

NestJS

const socket = new WebSocket('wss://example.com/chat');
socket.onmessage = event => updateUI(JSON.parse(event.data));

Maintains a single open connection that pushes updates instantly without repeated requests.

📈 Performance GainReduces network requests to 1 connection; improves input responsiveness (INP); lowers CPU and network load

Implementing real-time chat updates

NestJS

setInterval(() => fetch('/api/messages').then(res => res.json()).then(updateUI), 3000);

Polling repeatedly requests the server, causing unnecessary network traffic and delayed updates.

📉 Performance CostBlocks rendering briefly every 3 seconds; adds network overhead and increases CPU usage

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Polling with HTTP requests	Multiple DOM updates per poll	Triggers reflow each update	Higher paint cost due to frequent updates	[X] Bad
WebSocket real-time updates	DOM updates only on new data	Minimal reflows triggered	Lower paint cost with targeted updates	[OK] Good

Rendering Pipeline

WebSockets keep a persistent connection open, allowing the server to push data directly to the client without repeated HTTP requests, minimizing delays in the rendering pipeline.

→Network

→JavaScript Execution

→Paint

⚠️ BottleneckNetwork latency and JavaScript event handling

Core Web Vital Affected

INP

WebSockets impact the interaction speed between client and server by enabling instant two-way communication, improving responsiveness and user experience.

Optimization Tips

1Use WebSockets to keep a single persistent connection for real-time data.

2Avoid repeated HTTP polling to reduce network and CPU load.

3Handle incoming WebSocket messages efficiently to minimize DOM updates.

Performance Quiz - 3 Questions

How do WebSockets improve real-time feature performance compared to HTTP polling?

A By caching all data on the client

B By keeping a persistent connection open to push data instantly

C By sending repeated HTTP requests faster

D By reducing the size of data packets

DevTools: Performance

How to check: Record a session while interacting with the app; look for network requests and JavaScript event timing related to data updates.

What to look for: Fewer network requests and faster event handling indicate good WebSocket usage; frequent polling shows as repeated network activity spikes.