Content-Encoding

Content-Encoding

TL;DR: Specifies compression applied to the response body (gzip, brotli, deflate). Reduces file sizes by 60-80% for faster loading and lower bandwidth usage.

What is Content-Encoding?

Content-Encoding tells the browser how the response body has been compressed or encoded. It’s like a label on a compressed file that says “this was zipped with gzip” so the browser knows how to decompress it.

Compression reduces file sizes by 60-80%, making websites load much faster.

How It Works

1. Browser requests with compression support:

GET /style.css HTTP/1.1
Host: example.com
Accept-Encoding: gzip, deflate, br
```text

**2. Server compresses response and adds header:**

```http
HTTP/1.1 200 OK
Content-Type: text/css
Content-Encoding: gzip
Content-Length: 1234

[compressed CSS data]

3. Browser automatically decompresses the response before using it.

Common Encoding Types

gzip

Most widely supported compression:

Content-Encoding: gzip
```text

- Supported by all modern browsers
- Good compression ratio (60-70% reduction)
- Fast compression/decompression

### br (Brotli)

Modern compression algorithm:

```http
Content-Encoding: br

• Better compression than gzip (10-20% smaller)
• Supported by modern browsers
• Slower compression but faster decompression

deflate

Older compression method:

Content-Encoding: deflate
```text

- Less efficient than gzip
- Rarely used today

### identity

No compression (default):

```http
Content-Encoding: identity

• Usually omitted when no compression is used

Multiple Encodings

You can apply multiple encodings in order:

Content-Encoding: gzip, deflate
```text

Browser decompresses in reverse order: deflate first, then gzip.

## File Size Impact

**Example: 100KB CSS file**

| Encoding | Size  | Reduction |
| -------- | ----- | --------- |
| None     | 100KB | 0%        |
| gzip     | 25KB  | 75%       |
| Brotli   | 20KB  | 80%       |

**Example: 500KB JavaScript file**

| Encoding | Size  | Reduction |
| -------- | ----- | --------- |
| None     | 500KB | 0%        |
| gzip     | 150KB | 70%       |
| Brotli   | 120KB | 76%       |

## What Gets Compressed

**✅ Compress these:**

- HTML, CSS, JavaScript
- JSON, XML, SVG
- Text files, fonts
- Any text-based content

**❌ Don't compress these:**

- Images (JPEG, PNG, WebP) - already compressed
- Videos (MP4, WebM) - already compressed
- Audio files (MP3, AAC) - already compressed
- Already compressed files (ZIP, GZIP)

## Server Configuration

### Apache

```apache
# Enable gzip compression
LoadModule deflate_module modules/mod_deflate.so

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css text/javascript
    AddOutputFilterByType DEFLATE application/javascript application/json
</IfModule>

Nginx

# Enable gzip compression
gzip on;
gzip_types text/css text/javascript application/javascript application/json;
gzip_min_length 1000;
```javascript

### Node.js (Express)

```javascript
const compression = require('compression')
app.use(compression())

Browser Support

gzip: Supported by all browsers (99.9%) Brotli: Supported by modern browsers (95%+) deflate: Supported by all browsers but rarely used

Performance Benefits

Without compression:

• 500KB JavaScript takes 2-3 seconds on 3G
• Higher bandwidth costs
• Slower page loads

With gzip compression:

• Same file becomes 150KB
• Loads in under 1 second on 3G
• 70% bandwidth savings
• Much better user experience

Security Considerations

BREACH Attack: Compression can leak information when:

• Response contains user secrets (CSRF tokens)
• Response reflects user input
• Response is compressed

Mitigation:

• Don’t compress responses with secrets
• Use random padding
• Separate secret data from user input

Best Practices

1. Always compress text-based content:

Content-Encoding: gzip
```text

**2. Use Brotli for modern browsers:**

```http
Content-Encoding: br

3. Set minimum file size threshold:

Only compress files > 1KB

4. Don’t compress already-compressed files:

Skip: .jpg, .png, .mp4, .zip

5. Monitor compression ratios:

Aim for 60-80% size reduction

Common Issues

Problem: Content appears garbled Solution: Server sent compressed data but forgot Content-Encoding header

Problem: Slow compression Solution: Use faster compression levels or cache compressed versions

Problem: Double compression Solution: Don’t compress already-compressed files

Related Headers

• Accept-Encoding - Client’s supported compression methods
• Content-Length - Size of compressed content
• Content-Type - Type of content being compressed
• Vary - Cache different compressed versions