Hoe activeer ik Brotli compressie op nginx en Apache?

Brotli is een lossless compressie algoritme ontwikkeld door Google engineers Jyrki Alakuijala en Zoltan Szabadka, in september 2015 open source gepubliceerd en gestandaardiseerd als RFC 7932 (juli 2016). Vergeleken met gzip levert Brotli 15 tot 25 procent kleinere bestanden voor HTML, CSS en JavaScript bij vergelijkbare CPU kosten dankzij een statisch woordenboek van 120 KB met veelvoorkomende web tokens. Brotli wordt door alle moderne browsers ondersteund sinds 2017 (Chrome 50 april 2016, Firefox 44 januari 2016, Safari 11 september 2017, Edge 15 april 2017) en door alle grote CDNs (Cloudflare sinds 2017, Fastly, Akamai, CloudFront sinds september 2020). Content-Encoding ID: br. Brotli reduceert het paginagewicht typisch met 15 tot 30 KB op een 200 KB pagina en verbetert LCP met 50 tot 150 ms op trage mobiele verbindingen.

Wanneer Brotli

• Altijd voor HTML, CSS, JS, JSON, XML, SVG, fonts.
• Nooit voor JPEG, PNG, WebP, AVIF, MP4, ZIP, PDF.
• Altijd met gzip als fallback.
• Quality 11 statisch (build), 4 tot 6 dynamisch.

nginx

Optie A: pakket

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

brotli_static on;
brotli on;
brotli_comp_level 6;
brotli_min_length 256;
brotli_types text/html text/css application/javascript application/json image/svg+xml font/ttf font/otf application/xml application/ld+json;

sudo nginx -t
sudo systemctl reload nginx

Optie B: ngx_brotli compileren

git clone --recursive https://github.com/google/ngx_brotli.git
./configure --with-compat --add-dynamic-module=./ngx_brotli
make modules

Apache

sudo a2enmod brotli
sudo systemctl restart apache2

<IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI_COMPRESS text/html text/css application/javascript application/json image/svg+xml font/ttf
    BrotliCompressionQuality 5
    Header append Vary Accept-Encoding
</IfModule>

Managed WordPress hosting

Verifieren

curl -I -H "Accept-Encoding: br" https://example.nl/style.css | grep -i content-encoding

Statische pre compressie

find ./dist -type f \( -name "*.html" -o -name "*.css" -o -name "*.js" \) -exec brotli -q 11 -f {} \;

Veelgemaakte fouten

• Vary: Accept-Encoding vergeten.
• Afbeeldingen comprimeren.
• Quality 11 dynamisch.
• Brotli zonder TLS.
• BREACH (mitigatie SameSite, geen secrets in HTML).

Brotli vs gzip vs zstd

Hoe helpt InspectWP?

InspectWP analyseert Content-Encoding van elke asset.