Template partials and layouts in Express - Performance & Optimization

Performance: Template partials and layouts

MEDIUM IMPACT

This affects the server-side rendering speed and the size of the HTML sent to the browser, impacting the Largest Contentful Paint (LCP).

Rendering repeated HTML structures in multiple pages

Express

app.set('view engine', 'ejs');

// layout.ejs contains common header and footer
// page1.ejs and page2.ejs include only page-specific content

app.get('/page1', (req, res) => {
  res.render('page1', { title: 'Page 1' });
});

app.get('/page2', (req, res) => {
  res.render('page2', { title: 'Page 2' });
});

Using layouts and partials avoids repeating HTML, reducing server work and response size.

📈 Performance GainReduces server render time and HTML size, improving LCP by 100-200ms.

Rendering repeated HTML structures in multiple pages

Express

app.get('/page1', (req, res) => {
  res.render('page1', { title: 'Page 1' });
});

// page1.ejs contains full HTML including header and footer hardcoded

app.get('/page2', (req, res) => {
  res.render('page2', { title: 'Page 2' });
});

// page2.ejs also repeats full HTML header and footer

Duplicated HTML in each template increases server processing and response size, slowing rendering.

📉 Performance CostBlocks server rendering longer and sends larger HTML, increasing LCP by 100-200ms on average.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Duplicated full HTML in each template	High (large HTML size)	N/A (server-side)	High (large HTML to parse)	[X] Bad
Using partials and layouts for common HTML	Low (smaller HTML size)	N/A (server-side)	Low (smaller HTML to parse)	[OK] Good

Rendering Pipeline

Template partials and layouts reduce duplicated HTML generation on the server, lowering the time to produce the final HTML sent to the browser.

→Server-side Rendering

→Network Transfer

→Browser Parsing

⚠️ BottleneckServer-side Rendering time due to duplicated template processing

Core Web Vital Affected

LCP

This affects the server-side rendering speed and the size of the HTML sent to the browser, impacting the Largest Contentful Paint (LCP).

Optimization Tips

1Use layouts to wrap common HTML like headers and footers.

2Use partials for repeated smaller pieces like navigation or widgets.

3Avoid duplicating full HTML in each template to reduce server render time.

Performance Quiz - 3 Questions

How do template partials and layouts improve server rendering performance?

A By reusing common HTML to reduce duplicated template processing

B By increasing the number of DOM nodes on the client

C By adding more CSS styles to the page

D By delaying the server response intentionally

DevTools: Network and Performance panels

How to check: Open DevTools, go to Network tab, reload page and check HTML response size; then use Performance tab to measure LCP timing.

What to look for: Smaller HTML response size and faster LCP time indicate good use of partials and layouts.