Skip to content
HeyNode

Add Compression to Express in Node.js

In this tutorial we will use the Node.js Express compression middleware package to implement basic compression our server. Compression encodes information into a smaller size than the original, decreasing the bandwidth usage of an application and providing faster download speeds for clients.

By the end of this tutorial, you should be able to:

  • Enable compression of responses
  • Check response size using DevTools

This tutorial is part 6 of 7 tutorials that walk through using Express.js to create an API proxy server.

Goal

Implement compression middleware to increase server performance using Node.js Express.

Prerequisites

Watch: Add Compression to Express

Check initial response size

Before we add compression to our server, let’s check the current size of our responses. First, open a terminal and start the server:

Terminal window
npm run dev

Load localhost:3000/planets in your browser and open the browser’s DevTools panel to the “Network” tab. Do a hard refresh of the page (CMD + SHIFT + R on Mac for most browsers, and CTRL + SHIFT + R on Windows).

Take a look at the “Size” column for the planets page. You should see that the page was somewhere around 800KB in size. That’s a fairly large payload of data, nearly 1 megabyte just for the JSON response!

The planets endpoint returns a lot of data, somewhere around 2000 JSON records. Much of that data is the repeated key names in the JSON payload — each individual record contains the same set of keys. This means we can likely save a lot of space through compression, which works quite well when data has duplication.

In this tutorial we’re going to implement compression and decrease the size of the payload sent to the browser.

Set up compression

To enable compression we will use the compression Express middleware.

Install the compression module into your project:

Terminal window
npm i compression

Then open the server’s index.js file in an editor, require the compression package, and pass compression() to app.use immediately after creating the app instance:

const express = require("express");
const compression = require("compression");


const app = express();
app.use(compression());

This enables the compression middleware at the application level, which compresses the responses from every route.

That is all you need to do to enable compression in an Express application. If you need to fine-tune what is compressed, and how, there are additional options you can pass to compression.

Check compressed response size

Next, make sure the server is running and hard refresh the localhost:3000/planets page while your DevTools are open to the Network tab.

Under the Size column in the Network tab, you should see the size has dropped to something like 81KB! That is a huge saving versus the original uncompressed payload size of around 800KB — especially for what was essentially a single line change to your server.

Each unique payload will vary in how much space compression saves, but most payloads will benefit from being compressed (images and files which have already been compressed being a notable exception).

If you click on the planets request in the “Network Tab”, you should also see a section called “Response Headers”. The compression middleware has added a new header to the response, “Content-Encoding”, which is set to “gzip”. This tells clients what type of compression was used to encode the response, so they can properly reverse the compression. Reversing the compression is something that all modern browsers, and most HTTP client libraries, will handle by default so long as they receive the “Content-Encoding” header.

The presence of this header, along with the reduced payload size, is how you can tell that compression was applied to a response.

Recap

In this tutorial we reduced the payload size of responses sent from our Express server. In a single line of code we added the compression middleware module to enable compression for all responses from the server. This reduced the size of our largest response by nearly a factor of 10, reducing the bandwidth our application uses providing clients with a much smaller payload to download.

Keep going with the next tutorial in this set: Add Response Caching to a Node.js Express Server.

Further your understanding

  • Gzip compression works best on text-based data, like CSS, HTML, and JS files as well as JSON responses. Why don’t binary data types like images and videos benefit from gzip compression?

Additional resources