Brotli (tömörítési eljárás weboldalakhoz)
Hogyan működik?
- A böngésző minden kéréssel elküldi, milyen tömörítést ért:
Accept-Encoding: gzip, deflate, br. - Ha a szerver vagy a CDN tud Brotlit, tömörítve küldi a fájlt, és ezt jelzi:
Content-Encoding: br. - A böngésző kicsomagolja, a látogató ebből semmit nem érzékel, csak azt, hogy hamarabb jelenik meg az oldal.
A Brotli előre beépített szótárt használ a weben gyakori szövegrészletekhez (HTML-címkék, gyakori JavaScript-kifejezések), ezért különösen a kisebb szöveges fájloknál hatékony. Az eljárás leírása 2016-ban szabványként is megjelent (RFC 7932).
Gzip vs. Brotli számpéldával
Tegyük fel, hogy egy WordPress-webshop egy oldalbetöltéskor ezeket a szöveges fájlokat tölti le (tömörítetlen méret, majd saját méréssel):
| Fájl | Tömörítetlen | gzip | Brotli |
|---|---|---|---|
| HTML | 180 KB | 38 KB | 31 KB |
| CSS | 320 KB | 52 KB | 43 KB |
| JavaScript | 900 KB | 270 KB | 225 KB |
| Összesen | 1 400 KB | 360 KB | 299 KB |
A különbség itt kb. 17%. Ez nem látványos, de a CSS és a HTML a megjelenítést blokkoló erőforrások közé tartozik, így minden megspórolt kilobájt lassú mobilneten közvetlenül az első megjelenésen és az LCP-n látszik. A nagyobb nyereség persze a tömörítetlen és a tömörített változat között van: ha egy szerveren semmilyen tömörítés nincs bekapcsolva, az a sokszoros méretkülönbség miatt komoly hiba.
Hogyan ellenőrizd?
- Böngészőben: fejlesztői eszközök → Hálózat (Network) fül → kattints a HTML-dokumentumra → a válaszfejlécekben keresd a
content-encoding: brsort. - Parancssorból:
curl -sI -H "Accept-Encoding: br" https://pelda.hu/ | grep -i content-encoding - Mérőeszközzel: a PageSpeed Insights a „Szöveges tömörítés engedélyezése” javaslattal jelzi, ha hiányzik.
Hogyan kapcsold be?
- CDN mögött: a Cloudflare és más nagy CDN-ek a látogató felé alapból Brotlival tömörítenek, ha a böngésző kéri. Ez a legegyszerűbb út.
- Saját szerveren: Nginxnél a brotli modul, Apache-nál a
mod_brotlikapcsolja be. Osztott tárhelyen a szolgáltató dönti el, elérhető-e. - Tömörítési szint: 0-tól 11-ig állítható. Menet közbeni tömörítésre a közepes (4–6) a jó kompromisszum; a legerősebb (11) lassú, ezért a statikus fájlokat érdemes előre, egyszer letömöríteni.
Gyakori hibák
- Képek, videók Brotlizása: a JPEG, PNG, AVIF vagy MP4 már tömörített formátum; az újabb tömörítés csak a szervert terheli. Brotli a szöveges fájloknak kell.
- 11-es szint dinamikus oldalakon: minden kérésnél lassan tömörít, ami a szerver válaszidejét rontja, és többet veszít, mint amennyit a kisebb fájl nyer.
- Csak a CDN-ig tömörít: ha a CDN és a szerver között nincs tömörítés, az a látogatónak nem árt, de a szerver forgalmát feleslegesen növeli.
- Elfeledett gyorsítótár-beállítás: a
Vary: Accept-Encodingfejléc hiányában egy közbülső gyorsítótár Brotli-változatot adhat olyan kliensnek, amely nem érti.
Mekkora a hatása a gyakorlatban?
A Brotli bekapcsolása önmagában ritkán változtat sokat a PageSpeed-pontszámon, ha a gzip már működött. Inkább „ingyen” javítás: egy beállítás, amely minden oldalon, minden látogatónál dolgozik. A nagyobb sebességnyereség jellemzően a felesleges JavaScript elhagyásából, a képek optimalizálásából és a jó gyorsítótárazásból jön; a Brotli ezek mellé tesz hozzá még egy kis szeletet.
Röviden
A Brotli a szöveges fájlok modern tömörítése, jellemzően a gzipnél kisebb kimenettel. Bekapcsolni általában egy beállítás a CDN-ben vagy a szerveren; ellenőrizni egy fejléc. A képek optimalizálását nem helyettesíti, hanem kiegészíti.