email telefono contacto

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.

accept encoding

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.

Compresión Brotli en sitios web como técnica WPO 1
¡Suscríbete al boletín!

No te enviaremos spam, lo prometemos. Enviamos a nuestros suscriptores contenido sobre WordPress, hosting, marketing digital y programación.

+ Información básica sobre protección de datos

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.

contenido accept encoding deflate

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.

contenido huffman deflate

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.

contenido servidor tipografía web deflate

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:

datos brotli apache niveles

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

brotli html sitios web archivos

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.

datos gzip archivos datos apache brotli

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.

datos cdn niveles 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á.

diccionario contenido

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

datos apache niveles brotli

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:

brotli apache datos

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

Alvaro Fontela
Alvaro Fontela

Mi nombre es Alvaro Fontela, soy consultor Wordpress y blogger activo desde hace años. CEO y co-Fundador de Raiola Networks, escribiendo sobre WordPress, hosting y WPO en este blog desde 2014.

Artículos relacionados

Si te ha gustado este post, aquí tienes otros que pueden ser de tu interés. ¡No dejes de aprender!

Tenemos 6 comentarios en "Compresión Brotli en sitios web como técnica WPO"
    • Actualmente Brotli se superpone a GZIP, aunque en la teoría se pueden complementar, en la práctica si Brotli esta disponible se usa Brotli.

  • Excelente artículo, Álvaro.

    Siempre aprendo algo nuevo cada día.

    La duda que tengo es ¿hay algún palo que no hayas tocado? 🙂

    Prácticamente eres una base de datos humana.

    • Muchas gracias Jacobo, la verdad es que en temas de WPO y WordPress lo tengo todo bastante «estudiado», otra cosa es hablamos de aviones o de submarinos, que de eso no tengo ni idea jajaja

  • Amigo alvaro, en mi cpanel tengo Gzip pero cloudflare tiene activado BROTLI y yo tengo BUDDYPRESS entonces voy a mandar GZIP continuamente pero en todo momento cloduflare va DESCOMPRIMIRLO y lo convertira en BROTLI, entonces esto no sobrecarga la web ? sabes algo al respecto ? GOOGLE ME RECOMIENDA ACTIVAR GZIP

    • Hola Frank, te contesto lo mismo que te he contestado en el comentario que me dejaste en mi blog:

      Realmente no, porque quien realmente esta sirviendo el contenido comprimido es CloudFlare y lo hará con Brotli.

      Hace años, al combinar Apache con Nginx como proxy inverso, si que habia problemas con el doble GZIP, pero CloudFlare ya esta preparado para esto.

  • Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    ¿Vienes de otro proveedor?

    ¡Ningún problema! Te migramos gratis y sin cortes
    cohete raiola