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.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, likecurl
orwget
- 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:
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:
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 thangzip
.- 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
Was this helpful?