Saltar a contenido

Habilitar la Compresión Brotli en NGINX

Comprime tu contenido un 15-25% mejor que gzip con el algoritmo Brotli de Google.

  • 15-25% Más Pequeño

    Brotli logra mejores ratios de compresión que gzip para contenido de texto

  • Soporte Universal

    Todos los navegadores modernos soportan Brotli (Chrome, Firefox, Safari, Edge)

  • Cargas de Página Más Rápidas

    Archivos más pequeños = descargas más rápidas, especialmente en redes móviles

  • Costos de Ancho de Banda Más Bajos

    Reduce los costos de transferencia de datos con mejor compresión

Soporte de Navegadores

Brotli es soportado por más del 95% de los navegadores en todo el mundo:

Navegador Soporte de Brotli
Chrome ✅ Desde v50 (2016)
Firefox ✅ Desde v44 (2016)
Safari ✅ Desde v11 (2017)
Edge ✅ Desde v15 (2017)
Opera ✅ Desde v38 (2016)

NGINX automáticamente vuelve a gzip para navegadores más antiguos.

Configuración Rápida

Paso 1: Instalar el Módulo Brotli

# Instalar el repositorio de GetPageSpeed
dnf -y install https://extras.getpagespeed.com/release-latest.rpm

# Instalar el módulo Brotli
dnf -y install nginx-module-brotli

Habilitar en /etc/nginx/nginx.conf:

load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

Paso 2: Configurar la Compresión Brotli

Crear /etc/nginx/conf.d/brotli.conf:

# Habilitar la compresión Brotli
brotli on;
brotli_comp_level 6;
brotli_static on;

brotli_types
    text/plain
    text/css
    text/javascript
    text/xml
    application/javascript
    application/json
    application/xml
    application/xml+rss
    application/xhtml+xml
    application/atom+xml
    application/rss+xml
    application/x-javascript
    application/x-font-ttf
    application/x-font-opentype
    application/vnd.ms-fontobject
    font/ttf
    font/otf
    font/opentype
    font/woff
    font/woff2
    image/svg+xml
    image/x-icon;

Recargar NGINX:

nginx -t && systemctl reload nginx

Paso 3: Verificar que Funciona

# Solicitud con soporte Brotli
curl -sI -H 'Accept-Encoding: br' https://example.com | grep -i encoding
# Content-Encoding: br

# Comparar tamaños
curl -so /dev/null -w '%{size_download}' -H 'Accept-Encoding: gzip' https://example.com
# 45678
curl -so /dev/null -w '%{size_download}' -H 'Accept-Encoding: br' https://example.com
# 38912  (¡más pequeño!)

Niveles de Compresión

Nivel Velocidad Compresión Caso de Uso
1-3 Rápido Menor Alto tráfico, limitado por CPU
4-6 Equilibrado Bueno La mayoría de los sitios web (recomendado)
7-9 Más lento Mejor Activos estáticos pre-comprimidos
10-11 Muy lento Mejor Compresión solo en tiempo de construcción

Recomendación

Usa el nivel 4-6 para contenido dinámico y el nivel 11 para activos estáticos pre-comprimidos.

Pre-comprimir Activos Estáticos

Para un rendimiento máximo, pre-comprime archivos en el tiempo de construcción:

# Instalar la herramienta de línea de comandos Brotli
dnf -y install brotli

# Comprimir tus archivos estáticos
find /var/www/html -type f \( -name "*.css" -o -name "*.js" -o -name "*.html" -o -name "*.svg" \) \
    -exec brotli -kf --best {} \;

Esto crea archivos .br junto a los originales. NGINX los sirve automáticamente con brotli_static on.

Comparación de Tamaños

Ejemplo del mundo real (jQuery 3.6.0 minificado):

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#009639', 'primaryTextColor': '#fff'}}}%%
pie showData
    title Comparación de Tamaño de Archivo
    "Original (89KB)" : 89
    "Gzip (31KB)" : 31
    "Brotli (27KB)" : 27
Formato Tamaño Ahorros
Original 89 KB —
Gzip 31 KB 65%
Brotli 27 KB 70%

Configuración Avanzada

Mantener Gzip como Respaldo

# Brotli (prioridad)
brotli on;
brotli_comp_level 6;

# Gzip (respaldo)
gzip on;
gzip_comp_level 5;
gzip_types text/plain text/css application/javascript application/json;

Diferentes Niveles para Dinámico vs Estático

# Contenido dinámico - compresión más rápida
brotli on;
brotli_comp_level 4;

# Archivos estáticos pre-comprimidos - mejor compresión
brotli_static on;

Umbral de Tamaño Mínimo

# No comprimir archivos pequeños (no vale la pena)
brotli_min_length 256;

Solución de Problemas

Brotli no funciona

  1. Verifica que el módulo esté cargado: 

    nginx -V 2>&1 | grep brotli

  2. Verifica que la solicitud incluya Accept-Encoding: br

  3. Verifica que el Content-Type de la respuesta esté en brotli_types

Uso de CPU demasiado alto

Baja el nivel de compresión: 

brotli_comp_level 4;  # o incluso 2-3

Archivos no están siendo comprimidos
  • Verifica que el tamaño del archivo > brotli_min_length
  • Verifica que el Content-Type coincida con brotli_types
  • Verifica que la conexión no esté ya comprimida (CDN)

Relacionado