Compresión web con Gzip y Brotli: ¿lo tienes bien configurado?

En términos generales, se trata de procesar datos informáticos con el objetivo de reducir su tamaño, manteniendo la información contenida en ellos. Nos enfocaremos aquí en la compresión sin pérdida, que ahorra volumen de datos al descargar archivos de texto como CSS o JS desde el servidor al navegador.

Conocemos dos métodos principales de compresión:

• GZIP es más antiguo, más difundido y menos eficiente.
• Brotli, por otro lado, ofrece mayores ahorros en general. No es tan común, pero tiene soporte completo en los navegadores.

¿Por qué es importante preocuparse por la compresión?#

Comprimir archivos de texto en la web es esencial. Utilizamos la compresión en archivos HTML, JS y CSS, recursos que afectan el tiempo de primer renderizado de una página. Lógicamente, queremos que estos recursos sean lo más pequeños posible.

También la utilizamos en favicons, archivos SVG y fuentes. Sin embargo, las fuentes son una categoría especial; las modernas en formato WOFF y WOFF2 ya tienen compresión implementada al momento de generar el archivo. Si aplicas compresión adicional a estas fuentes, el resultado será un archivo más grande que el original. Así que cuidado con eso. :)

El método de compresión se puede verificar fácilmente en el navegador. Abre DevTools y la pestaña Network. En la tabla, busca la columna content-encoding.

Content-Encoding en DevTools: Si no aparece nada, algo no está bien.

Desvelando el misterio de los niveles de compresión#

Sin embargo, configurar Brotli y GZIP no es el final de nuestro trabajo, eso sería demasiado simple. Ambos métodos de compresión permiten ajustar el nivel (level) de compresión. GZIP tiene un total de 9 niveles, mientras que Brotli tiene 11.

¿Cómo afecta esta reducción en diferentes niveles de compresión a un archivo HTML de 55 kB o a 261 kB de datos de jQuery? Mucho.

¿Compresión aburrida? Pero ¿qué si te ahorra hasta dos tercios del volumen de datos?

Vemos un gran salto, por supuesto, al comparar un archivo sin comprimir con uno comprimido al nivel 1. Los niveles adicionales ahorran porcentajes de datos en el orden de unos pocos puntos. Deberíamos entonces preguntarnos: ¿Cuál es el mejor nivel de compresión?

En busca del ajuste ideal del nivel de compresión#

Al ajustar el nivel de compresión, también debes considerar tu infraestructura y servidores. La verdad es que cuanto mayor sea el nivel de compresión, mayor será la demanda de potencia de cálculo. Un nivel de compresión más alto requiere más tiempo para completarse.

A partir del nivel seis, la ganancia no es significativa.

En general, en PageSpeed.ONE recomendamos como nivel ideal el 6. Si prefieres una explicación más detallada, echa un vistazo al video What is the GZIP compression level sweet spot?

La forma más rápida de verificar el nivel de compresión#

Quizás te hayas detenido aquí preguntándote cómo verificar el nivel de compresión en tu propio sitio web. Para una revisión rápida puede ser útil esta herramienta en línea, donde solo necesitas insertar la URL. La evaluación revelará el probable nivel de compresión.

Con esta herramienta descubrirás qué nivel de compresión tienes configurado.

Una buena configuración de compresión no es automática#

En PageSpeed.ONE realizamos una encuesta en los sitios web de algunos nuestros clientes. El resultado fue que 6 de 24 sitios no tenían el nivel de compresión configurado de manera óptima.

La solución a este problema no es compleja. En el caso de GZIP, el ajuste del nivel de compresión debería ser realizado por alguien responsable de la infraestructura, alguien del hosting o un hábil desarrollador backend. El nivel de compresión se configura a nivel de APACHE y se trata de una sola línea de código:

DeflateCompressionLevel 9

Sencillo, ¿verdad? Este ajuste lo gestionamos con uno de nuestros clientes. En HTML, inicialmente estaba configurado GZIP LEVEL 1, que tras consulta, cambiamos al LEVEL 6.

¿El resultado? Logramos aproximadamente un 22% de ahorro en el tamaño del HTML (de 81 kB a 63 kB).

¿Qué tal si ajustas un nivel de Gzip más alto en el volumen de datos HTML?

También discutimos la activación de la compresión Brotli, pero no fue posible. Aunque el algoritmo más reciente ofrece un mayor ahorro de datos, la página realmente se cargaría más tarde para el usuario. La compresión Brotli tarda más, especialmente su versión "runtime", que se ejecuta solo cuando el servidor recibe una consulta.

También puede ocurrir que, por alguna razón, la compresión de datos se interrumpa en el cliente.

En el gráfico, esto se representa por las grandes "montañas". Descargar 600 kB frente a 100 kB de CSS es una diferencia crucial y es un argumento para medir datos técnicos y tamaños en los sitios web. Estos problemas se pueden detectar bastante fácilmente.

Esto es algo que no deseas ver en el gráfico. Cuando la compresión falla ocasionalmente.

Salvación para los perezosos: Cloudflare#

Otra forma de resolver el nivel de compresión es configurar el servicio Cloudflare para tu dominio. Comenzará a almacenar tus archivos de texto y aplicará la mejor compresión posible. Específicamente, Cloudflare activa Brotli para CSS, JS, SVG, etc.

Si utilizas este servicio, puedes verificar tu configuración. En algunos planes, Brotli necesita ser activado.

Cloudflare será útil para ti, incluso si tu sitio funciona con CMS populares como WordPress, Shoptet o Drupal.

Si estás considerando Cloudflare principalmente por el tráfico de bots, revisa también nuestro servicio de Estrategia para bots de IA.

Resumen final#

• Verifica la configuración de compresión en DevTools (Network Tab) o en la herramienta Lighthouse.
• Generalmente, se recomienda configurar el nivel de compresión en 6.
• Niveles superiores a 6 no aportan diferencias significativas en el tamaño de los archivos.
• Las fuentes (WOFF y WOFF2) ya están comprimidas.
• A mayor grado de compresión, mayor demanda de rendimiento del servidor y tiempo.
• Si detectas un problema, reajusta el nivel de compresión.
• Cloudflare puede resolverlo automáticamente por ti.

También revisa cómo puedes ayudar optimizando en el backend.