Brotli Compression
Definition
Where gzip works purely from what it has seen so far in the file, Brotli also ships with a built-in dictionary of about 13,000 common strings drawn from real web content — words like doctype, function and charset, and fragments of HTML and CSS. Short files benefit most from that head start, because a small gzip stream has almost no history to reference. Quality levels run from 0 to 11 rather than 1 to 9. Level 11 gives the best ratio and is slow enough that it belongs in a build step, not in the request path; levels 4 or 5 are the usual choice when compressing on the fly. The encoding is identified as br, not brotli, and browsers only advertise it over HTTPS, so a site still served over plain HTTP silently falls back to gzip. Like every general-purpose compressor it does nothing useful for a JPEG, a PNG, an MP4 or a ZIP, whose bytes have already been squeezed.
Why It Matters
The gain over gzip sounds modest until you look at what it applies to. A 90 KB gzipped JavaScript bundle typically lands near 75 KB with Brotli at level 11 — 15 KB saved on a file that blocks rendering, on every uncached visit. Across a site with several bundles and a stylesheet, that is often 40 to 60 KB per page load, and it costs nothing at request time if the compression happened at deploy. The trap is compressing dynamically at level 11, where the extra CPU can add tens of milliseconds to time to first byte and give back more than the smaller body saved.
How It Works
The browser lists br among the encodings in its Accept-Encoding request header, normally as gzip, deflate, br. The server or edge node chooses one, and returns the body with Content-Encoding: br plus Vary: Accept-Encoding so caches keep the variants apart. A sensible setup precompresses text assets once, storing app.js.br and app.js.gz beside app.js, and serves whichever matches the request — this is why static hosting can afford level 11 and an application server usually cannot. Content negotiation should always fall through: if a client sends only gzip, or sends nothing, the plain or gzipped copy still has to exist. Only text formats are worth the effort — HTML, CSS, JavaScript, SVG, JSON, plain text and XML — and a good configuration lists those types explicitly rather than compressing everything.
Real-World Example
A design studio uploads a static portfolio to 99helpers at studio-north.99helpers.site. Its main stylesheet is 118 KB raw, 22 KB gzipped, and 18 KB with Brotli; the JavaScript drops from 64 KB gzipped to 53 KB. The twelve project photographs, 6 MB between them, transfer at exactly their stored size, because a JPEG cannot be compressed twice. The measurable change is on the first paint, not the gallery.
Common Mistakes
- ✕Running Brotli at quality 11 on every dynamic response — the compression time can exceed the transfer time it saves
- ✕Compressing images, video and archives along with text, which wastes CPU and occasionally makes the file marginally bigger
- ✕Serving Brotli with no gzip or identity fallback, so any client that does not advertise br gets nothing usable
- ✕Expecting Brotli to appear on a plain HTTP site — browsers only offer it over a secure connection, so the fallback quietly takes over
Related Terms
Gzip Compression
Gzip compression shrinks a response before it leaves the server and the browser expands it again on arrival. It is lossless, it has been supported by every browser for decades, and it typically cuts text files to a third of their original size.
Cache-Control
The HTTP response header that tells browsers and caches whether they may keep a copy of a file, for how long, and who is allowed to. It is the single biggest lever over how fast a site feels on a second visit.
CDN
A content delivery network: a set of servers spread across the world that keep copies of your files and answer each visitor from somewhere close to them. It is the service; the machines it runs on are its edge network.
Web Asset
A web asset is any supporting file a page pulls in once the HTML has arrived — stylesheets, scripts, images, fonts, icons, videos. The HTML is the page; the assets are everything it asks for next.
Largest Contentful Paint
Largest Contentful Paint, or LCP, marks the moment the biggest visible element in the viewport has finished rendering. It is the closest single number to the question a visitor actually asks: when did this page look like it had loaded?
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →