¿Cómo activar la compresión Brotli en nginx y Apache?

Brotli es un algoritmo de compresion sin perdida desarrollado por los ingenieros de Google Jyrki Alakuijala y Zoltan Szabadka, liberado como codigo abierto en septiembre de 2015 y estandarizado como RFC 7932 (julio 2016). Comparado con gzip, Brotli produce archivos 15 a 25 por ciento mas pequenos para HTML, CSS y JavaScript con coste de CPU similar, gracias a un diccionario estatico de 120 KB con tokens web habituales. Brotli es compatible con todos los navegadores modernos desde 2017 (Chrome 50 abril 2016, Firefox 44 enero 2016, Safari 11 septiembre 2017, Edge 15 abril 2017) y con todos los CDN principales (Cloudflare desde 2017, Fastly, Akamai, CloudFront desde septiembre 2020). El identificador de Content-Encoding es br. Activar Brotli reduce el peso de la pagina en 15 a 30 KB en una pagina de 200 KB y mejora LCP entre 50 y 150 ms en moviles lentos.

Cuando usar Brotli

• Siempre para HTML, CSS, JS, JSON, XML, SVG, fonts.
• Nunca para JPEG, PNG, WebP, AVIF, MP4, ZIP, PDF.
• Siempre con gzip como fallback.
• Quality 11 estatica (build), 4 a 6 dinamica.

nginx

Opcion A: paquete

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

En /etc/nginx/nginx.conf dentro de http:

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

Opcion B: compilar ngx_brotli

sudo apt install build-essential libpcre3-dev libssl-dev zlib1g-dev libbrotli-dev git
git clone --recursive https://github.com/google/ngx_brotli.git
./configure --with-compat --add-dynamic-module=./ngx_brotli
make modules

Apache

Apache 2.4.26 (junio 2017) trae mod_brotli:

sudo a2enmod brotli
sudo systemctl restart apache2

Configuracion:

<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>

Hostings gestionados

Como verificar

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

O usa Chrome DevTools, KeyCDN Brotli test o PageSpeed Insights.

Pre compresion estatica

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

Errores comunes

• Olvidar Vary: Accept-Encoding.
• Comprimir imagenes.
• Quality 11 dinamica.
• Brotli sin TLS.
• BREACH (mitigado con SameSite y sin secretos en HTML).

Brotli vs gzip vs zstd

Como ayuda InspectWP?

InspectWP analiza Content-Encoding de cada activo y marca textos sin Brotli.