Compression middleware in Node.js - Performance & Optimization

Performance: Compression middleware

HIGH IMPACT

Compression middleware affects the time it takes for the browser to receive and render content by reducing the size of data sent over the network.

Serving HTTP responses with compression to improve load speed

Node.js

import express from 'express';
import compression from 'compression';

const app = express();

// Compress only text-based responses
app.use(compression({
  filter: (req, res) => {
    const contentType = res.getHeader('Content-Type') || '';
    return /text|json|javascript|css/.test(contentType);
  }
}));

app.get('/', (req, res) => {
  res.sendFile('large-image.png');
});

Skips compression for already compressed files, saving CPU and speeding up response delivery.

📈 Performance GainReduces CPU blocking, lowers TTFB, improves LCP by sending smaller payloads only when beneficial

Serving HTTP responses with compression to improve load speed

Node.js

import express from 'express';
import compression from 'compression';

const app = express();

// Compress all responses including already compressed files
app.use(compression({
  filter: () => true
}));

app.get('/', (req, res) => {
  res.sendFile('large-image.png');
});

Compressing already compressed files like images wastes CPU and delays response without reducing size.

📉 Performance CostBlocks response for extra CPU time, increasing TTFB and delaying LCP

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Compress all responses including images	No impact	No impact	No impact	[X] Bad
Compress only text-based responses	No impact	No impact	No impact	[OK] Good

Rendering Pipeline

Compression middleware reduces the size of HTTP responses before they reach the browser, speeding up network transfer and enabling faster rendering.

→Network Transfer

→First Contentful Paint

→Largest Contentful Paint

⚠️ BottleneckCPU time spent compressing large or already compressed files

Core Web Vital Affected

LCP

Compression middleware affects the time it takes for the browser to receive and render content by reducing the size of data sent over the network.

Optimization Tips

1Compress only text-based responses to save CPU and improve speed.

2Avoid compressing already compressed files like images or videos.

3Use compression middleware to reduce network payload size and improve LCP.

Performance Quiz - 3 Questions

What is the main benefit of using compression middleware in Node.js?

A Reduces the size of HTTP responses to speed up page load

B Increases CPU usage to slow down the server

C Adds extra HTML elements to the page

D Prevents caching of static files

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and check the 'Content-Encoding' header and size of responses.

What to look for: Look for 'gzip' or 'br' encoding on text files and verify images are not compressed again. Smaller transferred size indicates good compression.