We use analytics cookies.We use cookies to analyze site traffic and improve your experience.
Loading...
System Design Masterclass · Web Content Delivery
Free preview: the first 2 parts of this 7-part lesson.
Already bought the course? Sign in to read the whole lesson.
this lesson is part of
System Design Masterclass
Unlock this lesson and the 751 other paid lessons
$25 once, by PayPal
See the System Design courseread the rest of this lesson in
System Design Masterclass
Unlock this lesson and the 751 other paid lessons
$25 once, by PayPal
See the System Design coursein Web Content Delivery
This lesson is part of the full System Design Masterclass. Unlock it along with 769 other lessons for a one-time payment.
One-time payment by card or PayPal
Get Lifetime AccessOne-time payment: UPI, card or netbanking
Get Lifetime Access18 Foundation lessons are free, no payment needed. Try them now
It is easy and good
“It is really nice and good Please join the course”
An internal dashboard fetched a product catalog as a JSON response. 2MB of raw JSON over a 3G mobile connection: 6-8 seconds of transfer time. A developer opened Chrome DevTools, saw the response was arriving uncompressed, and enabled gzip on the Nginx reverse . The same response shrank to 200KB. Transfer time dropped to under a second.
Gzip compression is the single highest-impact, lowest-effort performance improvement you can make to a web server. One configuration line. No application code changes. Text-based content (HTML, CSS, JavaScript, JSON, XML, SVG) compresses by 60-90% because these formats contain highly repetitive patterns. The <div class=" pattern alone appears hundreds of times in a typical HTML page, and gzip replaces those repetitions with short references.
The browser decompresses transparently. The application never knows compression happened. The user sees no difference except faster load times.
Gzip compression works through a two-step negotiation built into :
Step 1: The browser includes Accept-Encoding: gzip, deflate, br in the request headers. This tells the server which compression algorithms the browser understands.
Step 2: The server picks the best algorithm it supports, compresses the response body, and includes Content-Encoding: gzip in the response headers. The browser reads this header and decompresses before passing the data to JavaScript.
The negotiation is invisible to application code. Express, Django, Rails, and Spring all sit behind a reverse (Nginx, Caddy, Cloudflare) that handles compression. The application sends uncompressed bytes, the proxy compresses on the wire.
Compression ratios for real content:
| Content Type | Raw Size | Gzipped | Reduction |
|---|---|---|---|
| React bundle (JS) | 487KB | 98KB | 80% |
| Tailwind CSS (full) | 3.7MB | 290KB | 92% |
| JSON API (product catalog) | 2.1MB | 195KB | 91% |
| HTML page (blog post) | 85KB | 12KB | 86% |
| SVG illustration | 120KB | 18KB | 85% |
| JPEG image | 500KB | 497KB | 0.6% |
Text compresses dramatically. Already-compressed binaries (JPEG, PNG, WOFF2, ZIP) do not. Gzipping a JPEG wastes CPU and can sometimes make the file larger.