Gzip i Brotli kompresija — Kako smanjiti velicinu sajta

Kompletni vodic: HTTP kompresija koja smanjuje transfer za 70-90% bez promene sadrzaja

1. Sta je HTTP kompresija

HTTP kompresija smanjuje velicinu podataka koji se prenose izmedju servera i browsera. Server kompresuje odgovor (HTML, CSS, JS), browser ga dekompresuje i prikazuje. Korisnik ne primecuje razliku — sadrzaj je identican, samo je prenos brzi.

• HTML od 100KB → kompresovan na ~15KB (85% usteda)
• CSS od 50KB → kompresovan na ~8KB (84% usteda)
• JavaScript od 200KB → kompresovan na ~45KB (77% usteda)

2. Kako radi: Accept-Encoding / Content-Encoding

# 1. Browser salje zahtev sa listom podrzanih kompresija
GET /style.css HTTP/1.1
Accept-Encoding: gzip, deflate, br

# 2. Server bira najbolju i kompresuje odgovor
HTTP/1.1 200 OK
Content-Encoding: br
Content-Type: text/css
Content-Length: 8234
Vary: Accept-Encoding

[kompresovani podaci]

# 3. Browser dekompresuje i prikazuje normalno

• br = Brotli (najpopularniji, najefikasniji)
• gzip = Gzip (univerzalan, svuda podrzan)
• deflate = Deflate (zastareo, retko se koristi)

3. Gzip

Gzip je najstariji i najsire podrzan algoritam kompresije za web. Kreiran 1992, baziran na DEFLATE algoritmu (LZ77 + Huffman coding).

Nivoi kompresije (1-9)

Nivo	Kompresija	Brzina	Preporuka
1	Najslabija	Najbrza	Real-time streaming
4-5	Dobra	Brza	Dinamicki sadrzaj (HTML)
6	Odlicna	Umerena	Default — najbolji balans
9	Maksimalna	Spora	Pre-kompresija statickih fajlova

• Browser podrska: 100% — svaki browser od IE6 podrzava Gzip
• Prosecna usteda: 70-80% za tekstualne fajlove
• CPU overhead: Minimalan na nivou 6 (~1-2ms po zahtevu)

4. Brotli

Brotli je Google-ov algoritam kompresije, objavljen 2015. godine (RFC 7932). Dizajniran specificno za web, koristi unapred definisan recnik od 120KB sa cestim web paternima (HTML tagovi, CSS propertiji, JS kljucne reci).

Prednosti nad Gzip-om

• 15-25% bolja kompresija za tekstualne resurse pri istom kvalitetu
• Ugradjeni web recnik — zna unapred ceste web paterne sto poboljsava kompresiju malih fajlova
• Brza dekompresija — browser dekompresuje Brotli brze od Gzip-a
• 11 nivoa kompresije (vs 9 za Gzip) — vise fleksibilnosti

Nivoi kompresije (0-11)

Nivo	Kompresija	Brzina	Preporuka
1-3	Dobra	Vrlo brza	Real-time, brzi od Gzip 6
4-6	Odlicna	Brza	Dinamicki sadrzaj
7-9	Vrlo dobra	Umerena	CDN pre-kompresija
10-11	Maksimalna	Spora	Build-time pre-kompresija SAMO

5. Gzip vs Brotli vs Deflate — benchmarks

Metrika	Gzip (nivo 6)	Brotli (nivo 6)	Brotli (nivo 11)	Deflate
HTML 100KB	~18KB	~14KB	~12KB	~19KB
CSS 50KB	~10KB	~8KB	~6.5KB	~11KB
JS 200KB	~55KB	~45KB	~38KB	~58KB
Kompresija vreme	~2ms	~3ms	~150ms	~2ms
Dekompresija	~1ms	~0.8ms	~0.8ms	~1ms
Browser podrska	100%	97%+	97%+	100%
Preporuka	Fallback	Primarni	Pre-kompresija	Ne koristiti

6. Koji fajlovi se kompresuju, koji NE

KOMPRESOVATI ✔

Tip fajla	MIME type	Tipicna usteda
HTML	text/html	80-90%
CSS	text/css	80-85%
JavaScript	application/javascript	75-80%
JSON	application/json	80-90%
XML	application/xml	80-85%
SVG	image/svg+xml	60-75%
Plain text	text/plain	70-80%
Web fonts (TTF, OTF)	font/ttf	40-50%

NE KOMPRESOVATI ✘

• JPEG, PNG, WebP, AVIF, GIF — vec kompresovani. Dodatna kompresija ne pomaze i trosi CPU.
• WOFF2 — vec koristi Brotli kompresiju interno. Kompresija nad kompresijom nema efekta.
• MP4, WebM, MP3, AAC — video i audio su vec kompresovani.
• ZIP, GZ, BR, RAR — arhive su vec kompresovane.
• PDF — vecina PDF-ova je vec kompresovana interno.

7. Pre-kompresija vs dinamicka kompresija

Aspekt	Dinamicka	Pre-kompresija
Kada	Na svaki zahtev, u realnom vremenu	Jednom, pri build/deploy-u
CPU	Koristi CPU na svaki zahtev	Jednom pri buildu, nula runtime CPU
Nivo	Nizak-srednji (Gzip 6, Brotli 4-6)	Maksimalan (Gzip 9, Brotli 11)
Za	Dinamicki sadrzaj (HTML, API)	Staticni fajlovi (CSS, JS, slike)
Primer	Nginx gzip on	gzip style.css → style.css.gz

# Pre-kompresija pri build-u
# Generise .gz i .br verzije svih statickih fajlova
find ./dist -name "*.css" -o -name "*.js" -o -name "*.html" -o -name "*.svg" | \
  while read f; do
    gzip -9 -k "$f"                    # style.css → style.css.gz
    brotli -q 11 -o "$f.br" "$f"       # style.css → style.css.br
  done

# Nginx servira pre-kompresovane fajlove ako postoje
gzip_static on;    # Servira .gz ako postoji
brotli_static on;  # Servira .br ako postoji (nginx-brotli modul)

8. Konfiguracija

Nginx

# /etc/nginx/nginx.conf
http {
    # Gzip
    gzip on;
    gzip_vary on;
    gzip_min_length 256;
    gzip_comp_level 6;
    gzip_types
        text/plain text/css text/xml text/javascript
        application/javascript application/json application/xml
        image/svg+xml application/xhtml+xml;

    # Brotli (zahteva nginx-brotli modul)
    brotli on;
    brotli_comp_level 6;
    brotli_types
        text/plain text/css text/xml text/javascript
        application/javascript application/json application/xml
        image/svg+xml;

    # Pre-kompresija (servira .gz/.br ako postoji)
    gzip_static on;
    brotli_static on;
}

Apache (.htaccess)

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

  # Ne kompresuj vec kompresovane
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|webp|avif)$ no-gzip
  SetEnvIfNoCase Request_URI \.(?:woff2?|ttf|otf)$ no-gzip
</IfModule>

Express.js (Node)

const compression = require('compression');
const express = require('express');
const app = express();

// Gzip kompresija za sve tekstualne odgovore
app.use(compression({
  level: 6,
  threshold: 256,  // Ne kompresuj fajlove manje od 256B
  filter: (req, res) => {
    // Ne kompresuj vec kompresovane formate
    if (req.headers['x-no-compression']) return false;
    return compression.filter(req, res);
  }
}));

// Za Brotli: npm install shrink-ray-current
// const shrinkRay = require('shrink-ray-current');
// app.use(shrinkRay());

Vercel / Cloudflare

Vercel: Automatski kompresuje sa Brotli. Nema konfiguracije — radi iz kutije.

Cloudflare: Speed → Optimization → Auto Minify + Brotli: ON. Takodje automatski.

FastAPI (Python)

from fastapi import FastAPI
from fastapi.middleware.gzip import GZipMiddleware

app = FastAPI()
app.add_middleware(GZipMiddleware, minimum_size=500)
# Kompresuje sve odgovore vece od 500 bajtova

9. Testiranje kompresije

• Chrome DevTools: Network tab → kliknite zahtev → Response Headers → trazite Content-Encoding: br ili gzip
• curl:

# Provera sa curl-om
curl -I -H "Accept-Encoding: br,gzip" https://vasajt.rs/

# Trazite u odgovoru:
# Content-Encoding: br     ← Brotli aktivan
# Content-Encoding: gzip   ← Gzip aktivan
# (nista)                  ← Kompresija NIJE aktivna!

• Web Security Scanner — automatski proverava da li je kompresija aktivna na vasem sajtu.
• PageSpeed Insights — prikazuje "Enable text compression" preporuku ako kompresija nije aktivna.
• GTmetrix — prikazuje kompresovanu vs nekompresovanu velicinu za svaki resurs.

10. Najcesce greske

• Kompresija iskljucena — #1 greska. Mnogi hosting provajderi ne ukljucuju kompresiju po defaultu.
• Kompresija slika — Gzip/Brotli na JPEG/PNG trose CPU bez ustede. Iskljucite za binarne formate.
• Brotli nivo 11 dinamicki — 10-50x sporije od nivoa 6. Koristite samo za pre-kompresiju.
• Nedostaje Vary: Accept-Encoding — CDN moze servirati pogresan format. Nginx automatski dodaje sa gzip_vary on.
• Kompresija malih fajlova — fajlovi <256 bajtova posle kompresije mogu biti VECI (overhead). Postavite min_length.
• Dupla kompresija — CDN kompresuje + server kompresuje = CPU waste. Koristite samo jedan nivo.
• WOFF2 kompresija — WOFF2 VEC koristi Brotli interno. Ne kompresujte ponovo.

11. Reference i resursi

• RFC 7932 — Brotli Compressed Data Format
• Google Brotli — GitHub
• MDN — Content-Encoding
• MDN — Accept-Encoding
• web.dev — Optimize Encoding and Transfer
• Can I Use — Brotli
• Nginx — Gzip Module

Proverite kompresiju vaseg sajta →