Why caching improves performance in Express - Performance Evidence

Performance: Why caching improves performance

HIGH IMPACT

Caching reduces server response time and network load, improving page load speed and interaction responsiveness.

Serving repeated API responses efficiently

Express

const cache = new Map();
app.get('/data', async (req, res) => {
  if (cache.has('data')) {
    return res.json(cache.get('data'));
  }
  const data = await fetchFromDatabase();
  cache.set('data', data);
  res.json(data);
});

Returns cached data instantly on repeated requests, reducing database calls and response time.

📈 Performance GainReduces server response time to under 10 ms, lowers CPU usage significantly

Serving repeated API responses efficiently

Express

app.get('/data', async (req, res) => {
  const data = await fetchFromDatabase();
  res.json(data);
});

Fetches data from the database on every request, causing slow responses and high server load.

📉 Performance CostBlocks rendering for 100+ ms per request, increases server CPU usage

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
No caching, fetch on every request	N/A	N/A	High due to slow data arrival	[X] Bad
In-memory caching for repeated data	N/A	N/A	Low, fast data delivery	[OK] Good

Rendering Pipeline

Caching reduces the time spent waiting for server data, allowing the browser to start rendering sooner and improving the overall user experience.

→Network

→Server Processing

→First Paint

⚠️ BottleneckServer Processing and Network Latency

Core Web Vital Affected

LCP

Caching reduces server response time and network load, improving page load speed and interaction responsiveness.

Optimization Tips

1Cache frequently requested data to reduce server load and speed up responses.

2Use in-memory or external caches to avoid repeated expensive operations.

3Monitor cache hit rates to ensure caching is effective and up to date.

Performance Quiz - 3 Questions

How does caching improve web performance in Express apps?

A By increasing the number of database queries

B By reducing server processing time and network latency for repeated requests

C By forcing the browser to reload all resources every time

D By adding extra data to each response

DevTools: Network

How to check: Open DevTools, go to Network tab, reload the page, and observe response times for repeated requests.

What to look for: Look for faster response times and smaller payloads on cached requests indicating improved performance.