Preflight requests behavior in Express - Performance & Optimization

Performance: Preflight requests behavior

MEDIUM IMPACT

Preflight requests add extra network round-trips before the main request, impacting page load speed and interaction responsiveness.

Handling cross-origin requests with CORS in Express

Express

const cors = require('cors');
const corsOptions = {
  origin: 'https://example.com',
  methods: ['GET', 'POST'],
  allowedHeaders: ['Content-Type'],
  optionsSuccessStatus: 204
};
app.use(cors(corsOptions));

Using specific CORS options reduces unnecessary preflight requests by limiting methods and headers.

📈 Performance GainReduces preflight requests, cutting network round-trips and improving LCP by 100-300ms.

Handling cross-origin requests with CORS in Express

Express

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  if (req.method === 'OPTIONS') {
    res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    return res.status(204).json({});
  }
  next();
});

This generic CORS setup triggers preflight OPTIONS requests for many calls, causing extra network delay.

📉 Performance CostEach preflight adds one network round-trip, increasing LCP by 100-300ms depending on network.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Generic CORS middleware allowing all origins and methods	N/A	N/A	Adds network delay before DOM can render	[X] Bad
Specific CORS middleware with limited origins, methods, and headers	N/A	N/A	Minimal network delay, faster content rendering	[OK] Good

Rendering Pipeline

Preflight requests add an extra network request before the main request can proceed, delaying the browser's ability to start rendering content.

→Network

→Critical Rendering Path

→LCP

⚠️ BottleneckNetwork round-trip time for OPTIONS preflight request

Core Web Vital Affected

LCP

Preflight requests add extra network round-trips before the main request, impacting page load speed and interaction responsiveness.

Optimization Tips

1Use simple CORS requests with standard methods (GET, POST) and headers to avoid preflight.

2Limit allowed origins and headers in Express CORS middleware to reduce unnecessary preflight calls.

3Check network tab for OPTIONS requests and optimize server CORS settings to improve LCP.

Performance Quiz - 3 Questions

What causes a preflight request in CORS?

A Using only simple headers like Content-Type with GET method

B Using custom headers or methods other than GET/POST

C Requesting a resource from the same origin

D Caching the response on the client side

DevTools: Network

How to check: Open DevTools, go to Network tab, filter by 'OPTIONS' method, and observe preflight requests before main requests.

What to look for: Look for OPTIONS requests that delay subsequent GET/POST requests; fewer OPTIONS means better performance.