EJS template setup in Express - Performance & Optimization

Performance: EJS template setup

MEDIUM IMPACT

This affects the server-side rendering speed and initial page load time by how templates are compiled and served.

Rendering EJS templates in an Express app

Express

const cachedData = heavyComputation();
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
  res.render('index', { data: cachedData });
});

Precomputes data once, so template rendering is fast and server responds quickly.

📈 Performance GainReduces server response blocking, improving LCP by 200-500ms.

Rendering EJS templates in an Express app

Express

app.set('view engine', 'ejs');
app.get('/', (req, res) => {
  res.render('index', { data: heavyComputation() });
});

Heavy computation runs on every request blocking template rendering and delaying response.

📉 Performance CostBlocks server response for each request, increasing LCP by 200-500ms depending on computation.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Render with heavy computation on each request	N/A (server-side)	N/A	Delays initial paint	[X] Bad
Render with precomputed data and cached templates	N/A (server-side)	N/A	Fast initial paint	[OK] Good

Rendering Pipeline

EJS templates are compiled on the server to HTML before sending to the browser. The server rendering speed affects when the browser starts painting the page.

→Server-side Rendering

→Network Transfer

→Browser Parsing

→Paint

⚠️ BottleneckServer-side Rendering when templates or data are heavy or not cached.

Core Web Vital Affected

LCP

This affects the server-side rendering speed and initial page load time by how templates are compiled and served.

Optimization Tips

1Avoid heavy computations inside EJS templates or before rendering on each request.

2Cache compiled EJS templates to reduce server-side rendering time.

3Precompute and reuse data passed to templates to speed up response.

Performance Quiz - 3 Questions

What is a common cause of slow EJS template rendering in Express apps?

A Running heavy computations on every request before rendering

B Using EJS instead of Pug

C Serving static files from Express

D Using too many CSS files

DevTools: Network

How to check: Open DevTools > Network tab, reload page, check Time to First Byte (TTFB) and total response time for HTML document.

What to look for: High TTFB indicates slow server rendering; low TTFB means fast template processing.