Brotli compression in Nginx - Step-by-Step Execution

Process Flow - Brotli compression

Client sends HTTP request

↓

Nginx receives request

↓

Check if Brotli module enabled?

No→Serve uncompressed content

Yes↓

Check if client supports Brotli (Accept-Encoding)

↓

Compress response

↓

Send compressed response to client

Nginx checks if Brotli is enabled and if the client supports it, then compresses the response before sending.

Execution Sample

Nginx

brotli on;
brotli_comp_level 5;
brotli_types text/html text/css application/javascript;

Enable Brotli compression in nginx with level 5 for HTML, CSS, and JS files.

Process Table

Step	Action	Condition	Result	Response Sent
1	Receive HTTP request	N/A	Request received	No response yet
2	Check if Brotli enabled	brotli on?	Yes	No response yet
3	Check client Accept-Encoding	Includes 'br'?	Yes	No response yet
4	Compress response	Content type matches brotli_types?	Yes	No response yet
5	Send response	N/A	Response sent with Content-Encoding: br	Compressed content sent
6	End	N/A	Request complete	Process ends

💡 Process ends after sending compressed response or uncompressed if conditions not met

Status Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
brotli_enabled	undefined	true	true	true	true
client_accepts_brotli	undefined	undefined	true	true	true
response_compressed	false	false	false	true	true
response_sent	false	false	false	false	true

Key Moments - 2 Insights

Why does nginx send uncompressed content even if Brotli is enabled?

Because the client’s Accept-Encoding header does not include 'br', as shown in execution_table step 3 where condition is No, leading to uncompressed response.

What happens if the content type is not listed in brotli_types?

Nginx will not compress the response even if Brotli is enabled and client supports it, as in step 4 where content type check fails, so response is sent uncompressed.

Visual Quiz - 3 Questions

Look at the execution table, at which step does nginx decide to compress the response?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Check the 'Action' and 'Result' columns in step 4 for compression decision

According to variable_tracker, what is the value of 'response_compressed' after Step 3?

A false

B undefined

C true

D null

💡 Hint

Look at the 'response_compressed' row under 'After Step 3' column

If the client does not support Brotli, how does the execution_table change?

A Step 4 compresses anyway

B Step 3 condition is No and response is uncompressed

C Step 5 sends compressed response

D Step 2 disables Brotli

💡 Hint

Refer to step 3 condition and response sent columns

Concept Snapshot

Enable Brotli in nginx with 'brotli on;'.
Set compression level with 'brotli_comp_level'.
Specify file types in 'brotli_types'.
Nginx compresses only if client supports 'br' encoding.
Compressed response sent with 'Content-Encoding: br'.

Full Transcript

Brotli compression in nginx works by first enabling the module with 'brotli on;'. When a client sends a request, nginx checks if Brotli is enabled and if the client supports Brotli compression via the Accept-Encoding header. If both conditions are true and the content type matches configured types, nginx compresses the response using Brotli and sends it with the appropriate header. Otherwise, it sends the response uncompressed. This process ensures efficient delivery of web content when supported.

Practice

1. What is the main purpose of enabling Brotli compression in Nginx?

easy

A. To increase the security of the website

B. To reduce file sizes and speed up website loading

C. To change the website's color scheme

D. To block unwanted visitors

Solution

1. Step 1: Understand Brotli compression purpose

   Brotli compression is designed to reduce the size of files sent from the server to the browser.

2. Step 2: Connect compression to website speed

   Smaller files load faster, improving website speed and user experience.

3. Final Answer:

   To reduce file sizes and speed up website loading -> Option B

4. Quick Check:

   Brotli compression = faster loading [OK]

Hint: Compression reduces file size to speed up loading [OK]

Common Mistakes:

• Thinking Brotli improves security directly
• Confusing compression with design changes
• Assuming it blocks visitors

2. Which of the following is the correct way to enable Brotli compression in an Nginx configuration?

easy

A. brotli on;

B. brotli_enable on;

C. enable_brotli true;

D. brotli_compression = yes;

Solution

1. Step 1: Recall Nginx Brotli syntax

   The correct directive to enable Brotli compression is brotli on;.

2. Step 2: Check other options for syntax errors

   Options A, C, and D use incorrect directive names or syntax not valid in Nginx.

3. Final Answer:

   brotli on; -> Option A

4. Quick Check:

   Enable Brotli = brotli on; [OK]

Hint: Use exact directive 'brotli on;' to enable compression [OK]

Common Mistakes:

• Adding extra words like 'enable' or 'compression'
• Using '=' instead of ';' to end directive
• Wrong directive names

3. Given this Nginx snippet, what will happen when a browser requests a CSS file?

brotli on;
brotli_comp_level 5;
location /css/ {
  brotli_types text/css;
}

medium

A. Compression level 5 disables Brotli

B. CSS files will not be compressed because brotli_types is missing

C. CSS files will be compressed with Brotli at level 5

D. All files will be compressed regardless of type

Solution

1. Step 1: Analyze the configuration

   Brotli is enabled with brotli on; and compression level set to 5.

2. Step 2: Check brotli_types directive

   Only files with MIME type text/css will be compressed, so CSS files are included.

3. Final Answer:

   CSS files will be compressed with Brotli at level 5 -> Option C

4. Quick Check:

   brotli_types text/css = CSS compressed [OK]

Hint: brotli_types controls which file types get compressed [OK]

Common Mistakes:

• Assuming all files compress without brotli_types
• Thinking compression level disables Brotli
• Ignoring MIME type filtering

4. You enabled Brotli in Nginx but notice no files are compressed. Which configuration mistake could cause this?

medium

A. Missing brotli on; directive

B. Setting brotli_comp_level to 0

C. Not specifying brotli_types for file types

D. Using brotli on without a semicolon

Solution

1. Step 1: Check syntax correctness

   In Nginx, directives must end with a semicolon. Missing it causes config errors.

2. Step 2: Understand impact of missing semicolon

   Without the semicolon, Nginx will fail to load the config properly, so Brotli won't work.

3. Final Answer:

   Using brotli on without a semicolon -> Option D

4. Quick Check:

   Missing semicolon breaks config [OK]

Hint: Always end Nginx directives with a semicolon [OK]

Common Mistakes:

• Ignoring semicolon syntax errors
• Assuming 0 disables compression but config still loads
• Thinking brotli_types is mandatory to enable Brotli

5. You want to optimize Brotli compression for your website serving HTML, CSS, and JavaScript files. Which Nginx configuration snippet correctly enables Brotli for these types with maximum compression level?

hard

A. brotli on;\nbrotli_comp_level 11;\nbrotli_types text/html text/css application/javascript;

B. brotli on;\nbrotli_comp_level 5;\nbrotli_types image/png image/jpeg;

C. brotli enable;\nbrotli_level 11;\nbrotli_types text/html text/css application/javascript;

D. brotli on;\nbrotli_comp_level 11;\nbrotli_types text/plain text/xml;

Solution

1. Step 1: Identify correct directive names and values

   Enable Brotli with brotli on; and set max compression level with brotli_comp_level 11;.

2. Step 2: Choose correct MIME types for HTML, CSS, JavaScript

   Use text/html, text/css, and application/javascript in brotli_types.

3. Step 3: Eliminate incorrect options

   The snippet starting with 'brotli enable;' uses invalid directive names ('brotli_level' instead of 'brotli_comp_level'). The snippet with 'image/png image/jpeg' targets unsuitable file types. The snippet with 'text/plain text/xml' uses wrong MIME types and misses JavaScript.

4. Final Answer:

   brotli on;\nbrotli_comp_level 11;\nbrotli_types text/html text/css application/javascript; -> Option A

5. Quick Check:

   Correct directives + right types = brotli on;\nbrotli_comp_level 11;\nbrotli_types text/html text/css application/javascript; [OK]

Hint: Use brotli_comp_level 11 for max compression [OK]

Common Mistakes:

• Using wrong directive names like brotli_level
• Compressing image types with Brotli
• Forgetting JavaScript MIME type