GZIP Compression for HTML — How It Works and How to Enable It

GZIP compresses the HTTP response before transmission and the browser decompresses it. A 100KB HTML file often becomes 20-30KB over the wire. Minification reduces the raw file size; GZIP then compresses that smaller file further — they’re complementary, not alternatives.

Use the HTML Minifier to reduce HTML size before GZIP compression.

How GZIP works

The browser sends Accept-Encoding: gzip, deflate, br with every request. If the server supports it, it compresses the response and adds:

Content-Encoding: gzip
Content-Type: text/html; charset=utf-8

The browser decompresses transparently. Compression is CPU work on the server but saves bandwidth and speeds Time to First Byte on slow connections.

How much does GZIP save?

Typical compression ratios for text content:

Enable GZIP in Nginx

# nginx.conf or in server {} block:
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;          # 1-9, 6 is sweet spot (speed vs compression)
gzip_min_length 256;        # Don't compress tiny responses
gzip_types
  text/plain
  text/css
  text/html
  text/javascript
  application/javascript
  application/json
  application/xml
  image/svg+xml
  font/ttf
  font/woff
  font/woff2;

Enable in Apache

# mod_deflate (Apache 2.x):
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/css
  AddOutputFilterByType DEFLATE application/javascript application/json
  AddOutputFilterByType DEFLATE image/svg+xml font/ttf font/woff font/woff2
  
  # Set compression level:
  DeflateCompressionLevel 6
  
  # Don't compress already-compressed files:
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|webp|zip|gz)$ no-gzip dont-vary
</IfModule>

Enable in Express.js (Node.js)

import express from 'express';
import compression from 'compression'; // npm install compression

const app = express();

// Compress all responses:
app.use(compression({
  level: 6,
  threshold: 256,  // bytes, don't compress smaller responses
  filter: (req, res) => {
    // Don't compress responses with no-transform Cache-Control:
    if (req.headers['x-no-compression']) {
      return false;
    }
    return compression.filter(req, res);
  },
}));

app.use(express.static('public'));
app.listen(3000);

Brotli — better than GZIP

Brotli (br) compresses 20-26% smaller than GZIP. Supported by all modern browsers:

# Nginx with brotli module (ngx_brotli):
brotli on;
brotli_comp_level 6;
brotli_types text/html text/css application/javascript application/json;

# Serve pre-compressed files if they exist:
brotli_static on;  # Looks for .br files
gzip_static on;    # Looks for .gz files

Pre-compress at build time

For static sites, compress files once at build time instead of per-request:

# Compress all HTML/CSS/JS files:
find dist/ -name "*.html" -o -name "*.css" -o -name "*.js" | \
  xargs -I{} sh -c 'gzip -9 -k "{}" && brotli -9 -k "{}"'

# Result: dist/index.html, dist/index.html.gz, dist/index.html.br

# Nginx serves pre-compressed files automatically:
gzip_static on;
brotli_static on;

Vercel and CDN platforms

Vercel, Netlify, and Cloudflare handle compression automatically — no configuration needed. They serve Brotli to browsers that support it, GZIP as fallback.

Verify compression is working:

curl -H "Accept-Encoding: gzip, br" -I https://yoursite.com/
# Look for: Content-Encoding: br

Check if your site uses compression

# With curl:
curl -H "Accept-Encoding: gzip" -I https://example.com/ | grep -i content-encoding

# With browser DevTools:
# Network tab → click HTML request → Response Headers → Content-Encoding

Minification + GZIP together

Minification helps GZIP: shorter, repetition-reduced text compresses better. The combined reduction is larger than either alone.

Related tools

• HTML Minifier — minify HTML to reduce file size
• HTML Whitespace Removal — how whitespace affects HTML size
• HTML Minification Explained — what minification removes