Compresión GZIP y Brotli

Dificultad del post: facilmediadifícil
[Total: 1   Promedio: 5/5]
gzip brotli

Yo no era muy fan de las compresiones hasta que, hace un par de años, vi en una presentación usada en una ponencia por el director de UI de Netflix una cosa que me llamó bastante la atención y que explicaré en este post cuando hable de la compresión GZIP.

Vamos a empezar por el principio. Desde hace ya años, los servidores web y los navegadores web son compatibles con GZIP, un formato de compresión y descompresión rápida que permite que el servidor web comprima los archivos antes de enviarlos al navegador web del visitante y que posteriormente el navegador web del visitante pueda descomprimirlos. Todo esto de forma totalmente transparente para el usuario final.

gzip brotli

GZIP es un formato opensource y está basado en el algoritmo LZ77, es un formato de compresión sin perdida. Como es normal en este tipo de formatos de compresión, son mucho más eficaces en archivos de texto y eso es precisamente de lo que están formados la mayor parte de los sitios web: archivos HTML, archivos CSS, archivos JS, etc. Todos estos son archivos de base texto y, por lo tanto, la compresión puede hacer maravillas.

Para que te hagas una idea, esto es lo que me ahorro yo en mi sitio web (este blog) utilizando una mezcla de GZIP y Brotli:

gzip brotli

Como puedes ver, la compresión ronda el 82%. Es decir, vamos a ahorrar un 82% de ancho de banda al servir esta web.

Si quieres probar con tus propios sitios, puedes hacerlo con esta herramienta: https://www.giftofspeed.com/gzip-test/

Volviendo al tema, como ves, el ahorro de ancho de banda es una de las principales ventajas que obtendremos al implementar una compresión en nuestro servidor web. Además, hay algunas ventajas indirectas:

  • Se reducen los tiempos de descarga y, a causa de ello, mejoramos de forma casi inapreciable los tiempos de carga. Cuanto más grande y compleja sea la web, más se va a notar la compresión en los tiempos de carga.
  • Mejoramos la experiencia de usuario, ya que normalmente estos algoritmos de compresión son muy rápidos y el navegador del visitante casi ni lo nota. De todos modos, es importante combinar la compresión con el cache de navegador o browser cache para conseguir mejores resultados.

El tema de ahorrar ancho de banda puede parecer una tontería con las conexiones actuales, pero hay que tener en cuenta que los smartphones con conexiones móviles no siempre tienen buena cobertura y ahí es precisamente donde más se nota esto y también la implementación de HTTP/3 en el servidor web.

Otro factor importante en este tipo de formatos de compresión para web es que no solo afecta la ratio de compresión que sea capaz de conseguir el algoritmo, sino también la velocidad de compresión y descompresión. Este último factor será vital para que todo sea transparente para los visitantes y no se retrase la carga de la web.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

 

Compresión GZIP y Deflate

Como he dicho, la compresión GZIP lleva muchos años entre nosotros y es bastante común. De hecho, la mayoría de plugins de cache para WordPress y la mayoría de módulos de cache de página para PrestaShop implementan automáticamente la compresión GZIP.

Existe una alternativa a GZIP, llamada Deflate, que tiene muchas similitudes a nivel interno con GZIP. Sin embargo, Deflate es un formato de compresión sin patentar y puede tener múltiples implementaciones diferentes. De hecho, GZIP utiliza Deflate para comprimir datos, aunque añade posteriormente un checksum de verificación y un encabezado de datos.

gzip brotli

A nivel práctico, normalmente en servidores de hosting se utiliza Deflate cuando GZIP no está disponible, ya que la activación se hace exactamente de la misma forma. Actualmente, todos los servidores de hosting deberían tener activo GZIP, ya que puede ser un poquito más estable que Deflate al llevar checksum.

 

Configurar o activar GZIP y Deflate

En caso de que no quieras implementar GZIP mediante plugin en WordPress o si utilizas otro CMS, puedes hacerlo también con este código en el .htaccess para Apache o LiteSpeed (servidor web optimizado que usamos en Raiola Networks).

Y si quieres activar Deflate también con el .htaccess, puedes utilizar el siguiente código:

Si GZIP está habilitado en el servidor web Apache o LiteSpeed, con este código en el .htaccess se activará. Deflate normalmente siempre está activo, por lo que puede servirte si GZIP no lo está.

En el caso de Nginx, debes realizar los ajustes necesarios en los archivos de configuración. En cambio, en VestaCP viene activado por defecto, así que si usas uno de los servidores VPS optimizados de Raiola Networks no tendrás que preocuparte.

En caso contrario, tienes que modificar estas opciones de configuración dentro del archivo nginx.conf.

Después puedes usar la herramienta que hemos mostrado anteriormente para probar si GZIP está funcionando correctamente en tu sitio web: https://www.giftofspeed.com/gzip-test/

En el navegador web no tienes que hacer nada, ya que todos los navegadores son compatibles con GZIP.

 

Configurar o activar GZIP en WordPress

Como he dicho antes, en WordPress podemos instalar un plugin de cache y ya tendremos GZIP activado, ya que la mayoría de plugins de este tipo (como WP Rocket o LiteSpeed Cache) realizan esta configuración.

gzip brotli

Si queremos utilizar un plugin de cache que no admita esto o si queremos usar un plugin para activar GZIP, existen varias opciones gratuitas para hacerlo:

Estos solo son tres ejemplos, pero existen mucho más plugins. Sin embargo, la mayoría se basan en el .htaccess, por lo que también puedes implementarlo así.

 

Compresión Brotli

Vamos a cambiar completamente de tema para pasar a hablar de Brotli, un nuevo formato de compresión que ha aparecido hace relativamente poco.

Brotli es un formato de compresión de datos opensource basado en el algoritmo LZ77, al igual que GZIP, pero con aspectos mejorados. En 2015 se lanzó Brotli para la compresión de fuentes web, pero ha ido evolucionando hasta lo que actualmente es: una buena alternativa a GZIP que se ha ido introduciendo poco a poco en navegadores y servidores web (aunque por el momento hay muchos servidores que aún no son compatibles).

gzip brotli

La diferencia entre GZIP y Brotli es que Brotli ya no utiliza Deflate. Eso mejora en un 20% la compresión en archivos de base texto como los HTML, CSS y JS, mientras que se mantienen unos tiempos de compresión y descompresión aceptables.

Si quieres ver la mejora de compresión que ofrece Brotli en relación a GZIP, esta herramienta puede ayudarte a hacer una estimación: https://tools.paulcalvano.com/compression.php

En el nivel más alto de compresión de Brotli, se mejora alrededor de un 20% la compresión del nivel más alto de GZIP, como dice la teoría.

Aunque en casos más extremos la mejora de compresión puede llegar al 30%, el problema viene en la descompresión, ya que puede ser lenta y podemos perder el tiempo ganado en la descarga.

Si quieres probar si tienes Brotli en tu web o si está funcionando, puedes utilizar esta herramienta de KeyCDN: https://tools.keycdn.com/brotli-test

 

Configurar o activar Brotli

Como he dicho antes, en el momento de publicar este artículo todavía es complicado encontrar servidores web que sean compatibles con Brotli. No obstante, los principales servicios CDN como KeyCDN o CloudFlare ya son compatibles con Brotli y LiteSpeed Web Server también. En la actualidad, Apache y Nginx requieren mod_brotli y muchos proveedores de hosting no lo implementan porque es una funcionalidad bastante nueva.

Por otro lado, aún hay algunas versiones antiguas de navegadores que no son compatibles con Brotli: https://caniuse.com/#search=brotli

Si el servidor web tiene Brotli activado y tenemos .htaccess (Apache y LiteSpeed), podemos utilizar este código en el .htaccess:

En Nginx, una vez más, debemos modificar el archivo de configuración nginx.conf como si fuera para GZIP:

Para probar si funciona correctamente Brotli, podemos utilizar la herramienta de KeyCDN: https://tools.keycdn.com/brotli-test

Como he dicho, en servicios CDN como CloudFlare también podemos activar Brotli, aunque tendremos que hacerlo directamente desde el panel de control.

 

Configurar o activar Brotli en WordPress

En WordPress, algunos plugins permiten activar Brotli. Sin embargo, todos están basados en la modificación del .htaccess, por lo que van a funcionar en todos los servidores web excepto en Nginx (que no utiliza el .htaccess).

Algunos plugins de cache, como W3 Total Cache, llevan una opción para activar la compresión Brotli.

gzip brotli

Desgraciadamente, no existen muchos plugins que permitan activar Brotli fácilmente, ya que por el momento es una tecnología que se está implementando poco a poco. Por esta razón, mi recomendación es que hagas la implementación mediante un tweak en el .htaccess de tu dominio.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

Tal vez te interese...

Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.

4 respuestas

    1. Hola Marcos, si, nuestros servidores de hosting cPanel de Raiola llevan LiteSpeed y por lo tanto son compatibles con Brotli.

Deja una respuesta

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

Share on twitter
Share on facebook
Share on linkedin