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.

Suscríbete a nuestra newsletter
¡Suscríbete a nuestra newsletter!

No te enviaremos spam, ¡te lo prometemos!. A nuestros suscriptores les enviamos nuestros contenidos sobre WordPress, hosting, marketing digital y programación.

 

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.

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:

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.

Mi nombre es Alvaro Fontela, soy consultor Wordpress y blogger activo desde hace años. Co-Fundador de Raiola Networks, escribiendo sobre Wordpress en este blog día tras día.

Articulos relacionados

Si te ha gustado este post, aquí tienes otros que pueden interesarte. ¡No pares de aprender!

Compartir en twitter
Compartir en Twitter
Compartir en facebook
Compartir en Facebook
Compartir en pinterest
Compartir en Pinterest

Tenemos 2 comentarios en

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

  1. Avatar Marcos dice:

    que es mas efecctivo tener las dos opciones brotli y gzip o solo brotli???

    1. Avatar Alvaro Fontela dice:

      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.

Deja una respuesta

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

¿Vienes desde otro proveedor?
Imagen footer
Suscríbete a la newsletter

Recibe ofertas, novedades y mucho más:

RESPONSABLE: RAIOLA NETWORKS, S.L. C.I.F.: B27453489 Avda de Magoi, 66, Semisótano, Dcha., 27002 Lugo (Lugo) Telefono: +34 982776081 e-mail: info@raiolanetworks.es
FINALIDAD: Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
LEGITIMACIÓN: Consentimiento del interesado y contratación de productos y/o servicios del Responsable
DESTINATARIOS: No se ceden datos a terceros, salvo obligación legal. Personas físicas o jurídicas directamente relacionadas con el Responsable Encargados de Tratamiento adheridos al Privacy Shield
DERECHOS: Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
INFORMACIÓN ADICIONAL: Se puede consultar la política de privacidad de forma más detallada aquí.
Los precios mostrados no incluyen IVA