Creating a basic Express server - Performance Optimization Steps

Performance: Creating a basic Express server

MEDIUM IMPACT

This affects the initial page load speed and server response time, impacting how quickly the browser receives content to render.

Setting up a basic server to respond to HTTP requests

Express

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.listen(3000);

No blocking tasks; server responds immediately to requests, improving response time and LCP.

📈 Performance GainServer responds within milliseconds, reducing LCP and improving user experience.

Setting up a basic server to respond to HTTP requests

Express

const express = require('express');
const app = express();

app.use((req, res, next) => {
  // heavy synchronous task
  for(let i = 0; i < 1e9; i++) {}
  next();
});

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.listen(3000);

Blocking the event loop with a heavy synchronous task delays all responses, increasing server response time.

📉 Performance CostBlocks server response for hundreds of milliseconds, increasing LCP and slowing user experience.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy synchronous middleware	N/A (server-side)	N/A	N/A	[X] Bad
Minimal async route handler	N/A (server-side)	N/A	N/A	[OK] Good

Rendering Pipeline

The Express server handles HTTP requests and sends responses. Faster server response means the browser receives HTML sooner, starting the rendering pipeline earlier.

→Server Response

→Network Transfer

→Browser Rendering

⚠️ BottleneckServer Response time due to blocking or heavy synchronous code

Core Web Vital Affected

LCP

This affects the initial page load speed and server response time, impacting how quickly the browser receives content to render.

Optimization Tips

1Avoid blocking synchronous code in Express middleware and route handlers.

2Keep middleware and routes lightweight and asynchronous for faster server responses.

3Use DevTools Network tab to monitor server response times and optimize accordingly.

Performance Quiz - 3 Questions

What negatively impacts the server response time in an Express server?

A Blocking synchronous code in middleware

B Using asynchronous route handlers

C Minimal middleware usage

D Serving static files efficiently

DevTools: Network

How to check: Open DevTools, go to Network tab, reload the page, and check the Time and TTFB (Time to First Byte) for the server response.

What to look for: Low TTFB and fast response times indicate a performant Express server setup.