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.

Practice

1. What is the main purpose of app.listen() in an Express server?

easy

A. To define a route for GET requests

B. To start the server and listen for incoming requests

C. To import the Express library

D. To send a response to the client

Solution

1. Step 1: Understand the role of app.listen()

   This function starts the Express server and makes it listen on a specified port for incoming requests.

2. Step 2: Compare with other functions

   Functions like app.get() define routes, but do not start the server. Importing Express or sending responses are done elsewhere.

3. Final Answer:

   To start the server and listen for incoming requests -> Option B

4. Quick Check:

   app.listen() starts server [OK]

Hint: Remember: listen means server waits for requests [OK]

Common Mistakes:

• Confusing route definition with server start
• Thinking app.listen() sends responses
• Mixing import statements with server functions

2. Which of the following is the correct way to import Express in a modern Node.js project?

easy

A. const express = require('express');

B. load express from 'express';

C. var express = import('express');

D. import express from 'express';

Solution

1. Step 1: Identify modern import syntax

   In modern Node.js with ES modules, the correct syntax is import express from 'express';.

2. Step 2: Check other options

   require() is CommonJS style, not modern ES modules. var express = import('express'); is invalid syntax. load is not a valid keyword.

3. Final Answer:

   import express from 'express'; -> Option D

4. Quick Check:

   Modern Node.js uses import [OK]

Hint: Use 'import' for modern Node.js, not 'require' [OK]

Common Mistakes:

• Using require() in ES module projects
• Trying to use 'load' keyword
• Incorrect use of dynamic import syntax

3. What will be the output when you visit http://localhost:3000/hello given this Express code?

import express from 'express';
const app = express();
app.get('/hello', (req, res) => {
  res.send('Hello World!');
});
app.listen(3000);

medium

A. Hello World!

B. Cannot GET /hello

C. 404 Not Found error

D. Server error

Solution

1. Step 1: Analyze the route definition

   The code defines a GET route at '/hello' that sends 'Hello World!' as a response.

2. Step 2: Understand server behavior on request

   When visiting /hello, the server matches the route and sends the defined response.

3. Final Answer:

   Hello World! -> Option A

4. Quick Check:

   Defined route sends 'Hello World!' [OK]

Hint: Check if route matches URL path exactly [OK]

Common Mistakes:

• Visiting a route not defined causes 404
• Confusing response text with error messages
• Forgetting to start server with listen()

4. Identify the error in this Express server code:

import express from 'express';
const app = express();
app.get('/', (req, res) => {
  res.send('Welcome!');
});
app.listen();

medium

A. Missing port number in app.listen()

B. Incorrect route path in app.get()

C. res.send() should be res.sendResponse()

D. Express not imported correctly

Solution

1. Step 1: Check app.listen() usage

   The app.listen() method requires a port number to start the server. Here, no port is given.

2. Step 2: Verify other parts

   The route path '/' is valid, res.send() is correct, and Express is imported properly.

3. Final Answer:

   Missing port number in app.listen() -> Option A

4. Quick Check:

   app.listen() needs port [OK]

Hint: Always specify a port in app.listen(port) [OK]

Common Mistakes:

• Omitting port number in app.listen()
• Using wrong method names for response
• Incorrect route paths syntax

5. You want to create an Express server that responds with JSON at /data and listens on port 8080. Which code snippet correctly does this?

hard

A. import express from 'express';
const app = express();
app.get('/data', (req, res) => {
res.send('Hello JSON');
});
app.listen(3000);

B. import express from 'express';
const app = express();
app.post('/data', (req, res) => {
res.send({ message: 'Hello JSON' });
});
app.listen(8080);

C. import express from 'express';
const app = express();
app.get('/data', (req, res) => {
res.json({ message: 'Hello JSON' });
});
app.listen(8080);

D. import express from 'express';
const app = express();
app.get('/data', (req, res) => {
res.json('Hello JSON');
});
app.listen(8080);

Solution

1. Step 1: Check route method and path

   The question asks for a GET route at '/data', so app.get('/data', ...) is correct.

2. Step 2: Verify response and port

   Response should be JSON, so res.json({ message: 'Hello JSON' }) is correct. The server must listen on port 8080.

3. Step 3: Eliminate alternatives with errors

   Alternatives fail due to using POST instead of GET, wrong port like 3000, res.send('string') instead of res.json(object), or res.json('string') instead of object.

4. Final Answer:

   The snippet with app.get('/data'), res.json({ message: 'Hello JSON' }), app.listen(8080) -> Option C

5. Quick Check:

   GET /data + res.json + port 8080 [OK]

Hint: Use app.get + res.json + correct port [OK]

Common Mistakes:

• Using POST instead of GET for route
• Sending string instead of JSON object
• Listening on wrong port number