Skip to content
Last updated on February 6, 2023
4 min read

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 increase the performance of web apps. A study by Google reveals:

  • 40% of people leave a website that loads in more than 3 seconds.
  • 1-second time delay in page response reduces conversions by 7%.

That's why using these compression methods will result in the best performance and least maintenance.

It's recommended to leverage the Vercel Edge Network cache compression over a self-hosted solution. This is done by sending br along with gzip in 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. If you're requesting another type of client, make sure you use the Accept-Encoding header to take advantage of compression.

This is how you ask the Vercel Edge Network cache to compress using brotli:

encode-brotli
Accept-Encoding: br

An example Accept-Encoding header requesting brotli compression.

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

encode-gzip
Accept-Encoding: gzip

An example Accept-Encoding header requesting gzip compression.

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 program requests deployment resources with the appropriate Accept-Encoding header, the response will be compressed automatically.

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

mime-types
// MIME types compressed by `gzip` and `brotli`
 
application / atom + xml;
application / javascript;
application / json;
application / ld + json;
application / manifest + json;
application / rss + xml;
application / geo + json;
application / vnd.ms - fontobject;
application / x - web - app - manifest + json;
application / xhtml + xml;
application / xml;
application / rdf + xml;
font / otf;
application / wasm;
image / bmp;
image / svg + xml;
text / cache - manifest;
text / css;
text / dns;
text / javascript;
text / plain;
text / markdown;
text / vcard;
text / calendar;
text / vnd.rim.location.xloc;
text / vtt;
text / x - component;
text / x - cross - domain - policy;