Gzip and Brotli compression: shrink your site and speed up loading

Every time someone opens your site, the server sends HTML, CSS, JavaScript, fonts and images. Text files are full of repetition: the same tags, class names and whitespace over and over. A compression algorithm exploits that repetition to shrink the file before it crosses the network, and the browser restores it instantly on arrival. Less data means faster pages, especially on mobile connections.

How compression is negotiated

With each request the browser lists what it understands in the Accept-Encoding header, for example gzip, deflate, br. The server picks the best method it supports, compresses the response and marks it with Content-Encoding: gzip or Content-Encoding: br. Clients that don't support compression simply get the plain file, so enabling it never breaks older devices.

Gzip vs Brotli

Gzip has been around for decades and is supported everywhere; it is fast and often makes text files several times smaller. Brotli, developed by Google, usually produces even smaller text output. All modern browsers support Brotli, but only over HTTPS. The sensible setup is to enable both. Higher compression levels cost more CPU, so use a moderate level for on-the-fly compression and the maximum only for files compressed ahead of time.

What to compress

Compress text formats only: HTML, CSS, JavaScript, JSON, XML and SVG. JPEG, PNG, WebP, MP4, ZIP and WOFF2 are already compressed, so recompressing them wastes CPU for almost no gain. Tiny responses are not worth compressing either, which is what gzip_min_length is for.

Enabling gzip in Nginx

The gzip module ships with standard Nginx builds. Add this to the http block of /etc/nginx/nginx.conf:

gzip on;
gzip_vary on;
gzip_comp_level 5;
gzip_min_length 256;
gzip_proxied any;
gzip_types
    text/plain
    text/css
    text/javascript
    application/javascript
    application/json
    application/xml
    application/rss+xml
    image/svg+xml;

text/html is always compressed once gzip is on, so it doesn't need listing. gzip_vary on adds Vary: Accept-Encoding so intermediate caches don't mix compressed and uncompressed copies, and gzip_proxied any allows compression when Nginx acts as a reverse proxy.

Adding Brotli

Brotli is not part of the standard official Nginx build and comes as a separate module. Recent Debian and Ubuntu releases offer packages; check availability and the exact name first:

apt search libnginx-mod-http-brotli
sudo apt install libnginx-mod-http-brotli-filter libnginx-mod-http-brotli-static

If no package exists for your system, you will need to build the module from source for your Nginx version. Then add:

brotli on;
brotli_comp_level 5;
brotli_min_length 256;
brotli_types text/plain text/css text/javascript application/javascript application/json application/xml image/svg+xml;

Run sudo nginx -t and sudo systemctl reload nginx after every change. If your build tool (Vite, Webpack) can emit app.js.gz and app.js.br, enable gzip_static on; and brotli_static on; so Nginx serves ready-made files at maximum compression with zero CPU cost per request.

On shared hosting: Apache and .htaccess

On shared hosting you cannot edit server config, and compression is often already enabled; check first. If the site runs on Apache without compression, add mod_deflate rules to .htaccess:

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/css
  AddOutputFilterByType DEFLATE application/javascript application/json
  AddOutputFilterByType DEFLATE image/svg+xml application/xml
</IfModule>

The IfModule wrapper keeps the site from erroring where the module is missing. If you're unsure about your plan, sayt.uz support can confirm.

Verifying it works

curl -sI -H "Accept-Encoding: gzip" https://example.uz/ | grep -i content-encoding
curl -sI -H "Accept-Encoding: br" https://example.uz/assets/app.css | grep -i content-encoding

Seeing content-encoding: gzip or br means it works. The Network tab in browser developer tools shows transferred versus original size, and PageSpeed Insights flags uncompressed text resources.

Example: a clothing shop in Samarkand

A small Samarkand clothing store loads a large CSS framework, several JavaScript libraries and a JSON product list on its home page. Without compression, every shopper on mobile data downloads those files at full size. With Gzip and Brotli enabled, the same files arrive much smaller while images are left alone, and the owner gets a faster site without touching a line of code. One caution: very high Brotli levels on dynamic pages can raise response times under load, so keep on-the-fly compression moderate.