Conceptual
3 min read

How Compression Works for the Edge Network

To save bandwidth and make your application or site faster, Vercel's Edge Network implements two compression algorithms: gzip and brotli.
Table of Contents

To save bandwidth and make your application or site faster, the Vercel Edge Network cache implements two compression algorithms: gzip and brotli.

While gzip has been around for quite some time, brotli is a relatively new compression algorithm built by Google that best serves text compression. brotli also has an advantage over gzip since it uses a dictionary of common keywords on both the client and server-side, which gives a better compression ratio.

These compression methods are widely used to allow for the best performance and least maintenance.

To leverage compression on the Edge Network, you should use the Accept-Encoding request header.

Any client that sends a request to your deployment needs to define the  Accept-Encoding header to opt into compression. Many clients (e.g., browsers like Chrome, Firefox, and Safari) already do this out of the box.

The following clients may not include the Accept-Encoding header by default:

  • Custom applications, such as Python scripts, Node.js servers, or other software that can send HTTP requests to your deployment
  • HTTP libraries, such as http in Node.js, and networking tools, like curl or wget
  • Older browsers. Check MDN's browser compatibility list to see if your client supports Accept-Encoding by default
  • Bots and crawlers sometimes do not specify Accept-Encoding in their headers by default when visiting your deployment

To set this header, review the documentation for the library, application or tool you're using. The following examples demonstrate setting the header in Node.js using the https library.

To compress using brotli:

encode-brotli.ts
const https = require('https');
 
const options = {
  hostname: 'your-deployment-url-here.com',
  port: 443,
  path: '/',
  method: 'GET',
  headers: {
    'Accept-Encoding': 'br',
  },
};
 
const req = https.request(options, (res) => {
  console.log(`statusCode: ${res.statusCode}`);
 
  res.on('data', (d) => {
    process.stdout.write(d);
  });
});
 
req.on('error', (error) => {
  console.error(error);
});
 
req.end();

Alternatively, some clients might not support it, so to use gzip:

encode-brotli.ts
const https = require('https');
 
const options = {
  hostname: 'your-deployment-url-here.com',
  port: 443,
  path: '/',
  method: 'GET',
  headers: {
    'Accept-Encoding': 'gzip',
  },
};
 
const req = https.request(options, (res) => {
  console.log(`statusCode: ${res.statusCode}`);
 
  res.on('data', (d) => {
    process.stdout.write(d);
  });
});
 
req.on('error', (error) => {
  console.error(error);
});
 
req.end();

If your client supports brotli, it's recommended over gzip because:

  • brotli compressed Javascript files are 14% smaller than gzip.
  • HTML files are 21% smaller than gzip, and
  • CSS files are 17% smaller than gzip.

Assuming that the application requests deployment resources with the appropriate Accept-Encoding header, the response will be compressed automatically.

Vercel's Edge Network regularly maintains a configuration file for the MIME types that will be compressed for both gzip and brotli:

  • json
  • x-web-app-manifest+json
  • geo+json
  • manifest+json
  • ld+json
  • atom+xml
  • rss+xml
  • xhtml+xml
  • xml
  • rdf+xml
  • javascript
  • vnd.ms-fontobject
  • wasm
  • otf
  • svg+xml
  • bmp
  • cache-manifest
  • css
  • dns
  • javascript
  • plain
  • markdown
  • vcard
  • calendar
  • vnd.rim.location.xloc
  • vtt
  • x-component
  • x-cross-domain-policy
Last updated on February 6, 2023