Gateway decorator in NestJS - Performance & Optimization

Performance: Gateway decorator

MEDIUM IMPACT

This affects the initialization and event handling speed of WebSocket gateways in a NestJS application, impacting interaction responsiveness.

Defining a WebSocket gateway to handle real-time events

NestJS

import { WebSocketGateway, SubscribeMessage } from '@nestjs/websockets';

@WebSocketGateway()
export class ChatGateway {
  @SubscribeMessage('message')
  async handleMessage(client: any, payload: any) {
    // offload heavy work asynchronously
    await new Promise(resolve => setTimeout(resolve, 0));
    return { event: 'message', data: payload };
  }
}

Offloading heavy work asynchronously prevents blocking the event loop, improving responsiveness.

📈 Performance GainNon-blocking event handler improves INP by reducing input delay to near instant.

Defining a WebSocket gateway to handle real-time events

NestJS

import { WebSocketGateway, SubscribeMessage } from '@nestjs/websockets';

@WebSocketGateway()
export class ChatGateway {
  @SubscribeMessage('message')
  handleMessage(client: any, payload: any) {
    // heavy synchronous processing
    for(let i = 0; i < 1000000000; i++) {}
    return { event: 'message', data: payload };
  }
}

Heavy synchronous processing inside event handlers blocks the event loop, delaying response and reducing interaction speed.

📉 Performance CostBlocks event loop causing high INP, delays user interaction response by hundreds of milliseconds.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy synchronous event handler	N/A	N/A	N/A	[X] Bad
Asynchronous lightweight event handler	N/A	N/A	N/A	[OK] Good

Rendering Pipeline

The Gateway decorator sets up WebSocket event listeners during server initialization. When events occur, handlers run in the Node.js event loop affecting responsiveness.

→Event Listener Setup

→Event Loop Processing

→Response Dispatch

⚠️ BottleneckEvent Loop Processing when handlers perform heavy synchronous work

Core Web Vital Affected

INP

This affects the initialization and event handling speed of WebSocket gateways in a NestJS application, impacting interaction responsiveness.

Optimization Tips

1Keep Gateway event handlers lightweight and asynchronous to avoid blocking the event loop.

2Specify namespaces in the Gateway decorator to scope event handling and reduce unnecessary load.

3Avoid heavy synchronous processing inside WebSocket event handlers to maintain fast interaction responsiveness.

Performance Quiz - 3 Questions

What is the main performance risk of heavy synchronous code inside a Gateway event handler?

A It causes layout shifts on the page.

B It increases CSS paint time.

C It blocks the event loop, causing slow response to user interactions.

D It increases bundle size significantly.

DevTools: Performance

How to check: Record a session while interacting with the WebSocket features; look for long tasks blocking the main thread.

What to look for: Long tasks or event loop blocking delays indicate poor Gateway handler performance.