Compresión Brotli en sitios web como técnica WPO

Brotli es una librería de compresión basada en el algoritmo de compresión y descompresión LZ77, al igual que GZIP.

Aunque Brotli fue creado inicialmente para la compresión de archivos de fuentes, ha acabado representando una fuerte mejora o alternativa a la compresión GZIP.

Recordemos que utilizando GZIP o Brotli haremos que el servidor web comprima los archivos de texto (HTML, CSS, JS, etc.) del sitio web antes de enviarlos al navegador del visitante. Con esto ahorraremos ancho de banda y tiempo de descarga.

A diferencia de GZIP, Brotli no usa Deflate, y con esto mejora en torno a un 20%-30% la tasa de compresión para archivos de texto (HTML, CSS, JS, etc.).

Los tiempos de compresión y descompresión se mantienen en teoría, pero, en la práctica, la cosa puede variar mucho dependiendo del nivel de compresión configurado.



Hoy por hoy, la mayoría de navegadores web ya son compatibles con Brotli: Firefox lo implementó en la versión 44 y todos los navegadores basados en Chromium lo implementaron a partir de la versión 49 de Chromium.

Aunque la compresión Brotli puede parecer una clara mejora para sustituir la compresión GZIP, lo cierto es que su algoritmo de compresión tiene sus cosas buenas y también sus cosas malas.

Brotli VS GZIP

Como hemos dicho antes, tanto GZIP como Brotli están basados en el algoritmo LZ77.

La diferencia es que la compresión Brotli no utiliza Deflate como base, lo que lo convierte en un algoritmo con una tasa de compresión mucho más alta.



El porcentaje de mejoras de Brotli depende de a quién le preguntes, pero tú mismo puedes probarlo con este servicio web y tu sitio web: https://tools.paulcalvano.com/compression.php

Si no tienes Brotli y GZIP activados en tu sitio web, puede que solo te muestre datos de uno de los dos.



La diferencia es bastante clara. Para un archivo HTML de 418 kB, obtenemos las siguientes compresiones máximas:

• Con la compresión GZIP nivel 9 obtenemos un archivo de 78,7 kB.


• Con la compresión Brotli nivel 11 obtenemos un archivo de 57,2 kB.

Mola, ¿no? Pues no.

No es todo tan bonito como parece. En teoría Brotli en nivel 11 comprime más, pero también consume más recursos al comprimir y al descomprimir, además de ser más lento.

Si queremos que Brotli sea una alternativa a GZIP como algoritmo de compresión debemos igualar la balanza. Lo conseguimos fácilmente, ya que en realidad Brotli es mucho más eficiente que GZIP, pero debemos ajustar el nivel de compresión.

Mismo HTML de antes: 418 kB sin comprimir.

• Con la compresión GZIP a nivel 9 obtenemos 78,7 kB.


• Con la compresión Brotli a nivel 3 obtenemos 76,5 kB.

¿Lo ves? Mismo tamaño de archivo, pero con el nivel de compresión al 3 Brotli es mucho más rápido al comprimir y descomprimir que GZIP y también consume muchos menos recursos.



Como puedes ver en la imagen anterior, la tasa de compresión varía entre un 2% y un 27%, aunque depende totalmente del sitio web y de los archivos que se tengan que comprimir.

Es importante analizar esto con calma, ya que tanto en GZIP como Brotli, cuanto más aumentamos el nivel, mayor será el consumo de recursos y el tiempo utilizado para comprimir y descomprimir.

Para ponerte un ejemplo: un nivel 5 de compresión Brotli mejora en torno a un 20% la tasa de compresión y es más eficiente que un nivel 9 de GZIP.

Esta imagen puede orientarte un poco mejor sobre los tiempos de compresión y descompresión junto con los niveles de GZIP y Brotli:



En cuanto a las desventajas... Pues la única característica que podría ser una desventaja es que Brotli solo funciona con HTTPS (SSL), mientras que GZIP lo hace tanto con HTTP como HTTPS.

Compatibilidad de Brotli con servidores y navegadores

Como he dicho antes, los navegadores más antiguos no tienen compatibilidad con Brotli y los servidores web tampoco.

Si quieres ver un resumen completo de los navegadores web que son compatibles con la compresión Brotli y sus versiones, puedes encontrarlo aquí: https://caniuse.com/?search=brotli



En cuanto a los servidores web compatibles, la cosa cambia.

A finales de 2021 es difícil encontrarse un hosting con Apache que sea compatible. Incluso cuesta encontrarse servidores con Nginx que sean compatibles con Brotli, aunque es más fácil.

Para que Brotli funcione con Apache necesitamos tener al menos Apache 2.4 y mod_brotli instalado y activado. En el caso de Nginx, suele compilarse Nginx con Brotli a partir de la versión 1.18.

Sin embargo, LiteSpeed Web Server (el que usamos en los hosting con cPanel en Raiola Networks) es totalmente compatible con Brotli desde hace años y lo trae activado de forma predeterminada sin necesidad de hacer nada.

Activar Brotli en Apache

Como hemos dicho, debemos tener al menos Apache 2.4 con mod_brotli activado y ahí podremos modificar el .htaccess con el siguiente código para activar Brotli.

<IfModule mod_brotli.c>

AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/x-javascript application/javascript application/json application/x-font-ttf application/vnd.ms-fontobject image/x-icon

</IfModule>

Después de hacer esto, te recomiendo comprobar las cabeceras o utilizar un servicio para comprobarlas.

Activar Brotli en un hosting con LiteSpeed

Como he dicho, Brotli viene activado por defecto en cualquier servidor con LiteSpeed Web Server.

LiteSpeed Web Server fue el primer software de servidor web que implementó Brotli, ya que suelen ser los primeros en implementar nuevas características.

Y, como he comentado antes, no hay que hacer nada: LiteSpeed Web Server tiene Brotli activado de manera predeterminada.

En los hosting compartidos, hosting WordPress y en cualquier hosting de Raiola Networks que utilice cPanel tienes LiteSpeed Web Server con Brotli activado por defecto.

Activar Brotli en CloudFlare o cualquier CDN

Si LiteSpeed Web Server fue el primer servidor web en implementar Brotli, CloudFlare fue el primer CDN.

La gente de CloudFlare también suelen ser de los primeros en implementar nuevas funcionalidades y en este caso no iban a ser menos.



Para usar Brotli en CloudFlare debemos activarlo en la sección que vemos en la pantalla de la captura anterior.

Realmente, en la actualidad la mayoría de servicios CDN son compatibles con Brotli.



KeyCDN lo implementó poco después que CloudFlare y CDN77 tardó un poco más, pero actualmente es compatible. Incluso Amazon CloudFront tardó casi 3 años más, pero ahora mismo es compatible con Brotli.

Activar Brotli en WordPress

La activación de Brotli en WordPress no depende de WordPress, sino del servidor web usado y sus características.

Con esto quiero decir que, cuando utilizamos un plugin para activar Brotli, por detrás suele modificar el .htaccess para activar la funcionalidad, pero si el servidor web no lo tiene activo no funcionará.



Un plugin para WordPress puede permitirte activar Brotli en Apache o LiteSpeed, siempre que tengan la funcionalidad activada. En cambio, no puede activar la compresión en Nginx porque eso se hace en los archivos de configuración.

Si tenemos una versión actual de Nginx con Brotli, debemos añadir esto al nginx.conf para activar Brotli:

brotli on;

brotli_comp_level 6;

brotli_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

Evidentemente, tendremos que reiniciar el servidor web Nginx para activar la funcionalidad tras modificar el nginx.conf.

Comprobar si Brotli está activado

Existen distintos servicios para probar si Brotli está activo para tu sitio web, aunque algunos muestran más datos.

Personalmente, el que más me gusta por los datos que muestra es este: https://tools.paulcalvano.com/compression.php

Si buscas una herramienta mucho más simple, el Brotli Test de KeyCDN es ideal para ti: https://tools.keycdn.com/brotli-test



Además, como en el caso de la compresión GZIP, podemos comprobar la compresión a través de las cabeceras de las peticiones HTTP.

Ten en cuenta que podemos tener GZIP y Brotli activado al mismo tiempo y esto saldrá en las cabeceras de la petición HTTP.