Acelerá tu sitio web con el algoritmo de compresión Brotli

Hoy toca hablar del famoso guerrero saiyajin algoritmo legendario Broly Brotli. Es qué Brotli es a día de hoy el mejor algoritmo de compresión para tu sitio web. Pues, — ¿quién te conoce Gzip?

Sabemos qué nada dura para siempre, mucho menos las tecnologías de software. Pues, hay desarrollo constante en este tipo de mejoras.

Hoy en día se habla mucho de la UX «experiencia de usuario». Entonces, gracias a esto, fue cómo surgió la necesidad de brindar, entre otras cosas, una mejora en la velocidad de los sitios web. Aquí es donde entra Brotli. La velocidad es crucial para una buena UX.

Este es un algoritmo de compresión web cómo Gzip, pero mejorado. Pues, las cosas han cambiado, las necesidades han cambiado, y lo mismo sucedió con las tecnologías relacionadas con la información y los datos.

Sí te interesa mejorar tu SEO por medio de mejoras en la velocidad de tu sitio, continúa leyendo el post.

¡Sin mucho más por agregar en la introducción, vayamos de qué va esto del Brócoli Brotli!

¿Qué es el Brotli?

Cómo lo dejé caer en la introducción, el Brotli es un algoritmo que comprime información del código de la web. Este algoritmo fue desarrollado por Google (¿cuándo no?), y es precisamente de código abierto.

Puntualmente, los desarrolladores principales Jyrki Alakuijala y Zoltán Szabadka, lo hicieron bajo licencia del MIT. Pues, lo curioso de este algoritmo, es qué a diferencia de la mayoría de los compresores, en Brotli no hay pérdida de datos.

Cómo dato de color, podemos decir qué utiliza una combinación de del algoritmo LZ77 y la codificación de Huffman.

Originalmente, el Brotli se lanzó pensado en comprimir la tipografía web exclusivamente. Pero, por allá en el 2015, se comenzó a reescribir el código, con el objetivo de mejorar los niveles de compresión descompresión a diferentes niveles. Algunos de estos nuevos usos, fueron las imágenes, los documentos HTML, el CSS, los scripts en Java, etc.

A día de hoy, Brotli es el sistema de compresión más potente del mercado. Pues, es capaz de ofrecer mejoras de hasta un 20% o 30% por sobre sus competidores. Ya qué Deflate, Gzip, o el propio Zopfli «anterior sistema de compresión de Google», se quedan cortos por sobre Brotli.

¿Cómo funciona Brotli?

Bueno, cómo lo comentaba en el punto anterior, Brotli es la nueva versión de Zopfli. De hecho es un 25% más eficiente qué su predecesor, esto se puede apreciar en el resultado total de la compresión de un sitio web.

Brotli utiliza una combinación de dos tecnologías, el sistema de compresión LZ77 y la codificación de Huffman. Esta mezcla ganadora fue el factor principal del éxito del algoritmo, y todo esto sin perder calidad.

Según lo que nos cuentan los ingenieros de Google, Brotli mejora notablemente el rendimiento en los dispositivos móviles. A día de hoy, la compatibilidad es total con la mayoría de dispositivos.

Aplicar Brotli a nuestro sitio web, mejorará mucho el rendimiento en los dispositivos móviles.

¿Cómo puedo saber qué algoritmo de compresión tengo en mi sitio?

Hay varias maneras de ver si estás comprimiendo información en tu sitio web. Pero, puntualmente, sí te interesa saber sí estás comprimiendo en Gzip o Brotli te recomiendo usar GiftOfSpeed ?.

Luego de ejecutar un testeo, la herramienta te dirá varias cosas:

• Original Size: Es el tamaño original del HTML de dicha URL analizada.
• Brotli Size: Es el tamaño qué queda luego de comprimir con Brotli.
• Compression %: Es el porcentaje total qué se ha comprimido de nuestra URL.
• HTTP status: Es el código de respuesta qué devuelve nuestra URL, 200 es ok. Sí estamos en una redirección nos saldrá 301, y así.
• Request y compression time: Es el tiempo de respuesta y velocidad de Brotli.
• Content Type: El tipo de contenido.
• Server: El servidor en cuestión.

¿Cuál es mejor, Brotli o Gzip?

Recién vimos cómo ver sí estamos usando Brotli o Gzip, ahora toca ver cuál de las dos es mejor opción. Pues, sí bien es cierto qué ambos sistemas se encargan de comprimir información, cada uno tiene su particularidad.

— Pero, ¿qué determina qué uno sea mejor qué otro? Pues, tenemos qué tener en cuenta principalmente dos variables:

• La velocidad en la compresión: Esta es la velocidad con la que trabaja el algoritmo. Están relacionados con el Request y Compression time que agrupé en el ejemplo de arriba.
• La capacidad total de compresión: La capacidad de compresión es básicamente el porcentaje máximo del mismo. En el ejemplo de arriba vimos cómo pasamos de 172.1 kb a tan solo 35.4 kb.

Para medirlo utilicé la herramienta de Paul Calvano ?. Ahí mismo analiza el rendimiento comparado entre Brotli y Gzip.

El estándar establece qué la relación es de 120 kb para 13.000 palabras con Brotli, y es un poco más para Gzip. Pues, Brotli tiene 11 niveles de compresión «ver las barras rojas», en cambio, Gzip cuenta con 2 niveles menos.

Y cómo se ven los resultados en general, Brotli a partir del tercer ciclo de compresión, rinde más qué Gzip. Puntualmente, para esta URL lo hace en un 23%.

Más detalles de Brotli y Gzip

Cómo comentaba en el bloque anterior, esos resultados son para mi sitio. Pero, puede qué haya una variedad de resultados en los distintos sitios web. Los estándares establecen los siguientes resultados:

Capacidad

Al momento de ahorrar y comprimir espacio en los datos, el Brotli es superior al Gzip. Pues:

• Brotli ahorra un 21% más en compresión HTML qué Gzip.
• En cuando al JavaScript, el poder de compresión es un 14% superior.
• Y en el CSS, suele ser del 17% en la mayoría de las métricas, con respecto al Gzip.

Cómo se puede apreciar en los datos, el Brotli es superior. Pues, puede ahorrar hasta un 82% vs. un 78% qué se obtiene con Gzip.

Velocidad

En cuanto a la velocidad, acá suceden cosas diferentes. Pues, Gzip obtiene resultados levemente más superiores, porque básicamente tiene menos niveles de compresión.

En conclusión a esto, podríamos decir que Brotli es mejor para los datos estáticos en general, debido a su capacidad de compresión. En cambio, Gzip es más útil para datos dinámicos, debido a su mayor velocidad. Pero a fines prácticos, no hay gran diferencia, pues, esta se mide en milésimas de segundo.

¿Puedo utilizar Brotli en mi página web?

Analizando los datos, podemos ver qué probablemente Brotli sea la mejor idea para aumentar la velocidad de un sitio web.

Gzip es una buena opción, pero Brotli probablemente sea mejor. Salvo sí nuestro sitio tiene datos dinámicos «qué cambian a cada rato», cómo por ejemplo cotizaciones. En tal caso, Gzip es una mejor opción.

A día de hoy, la inmensa mayoría de los dispositivos actualizados ya cuentan con la integración necesaria para codificar y decodificar Brotli. Pero, también puede qué no todos los usuarios tengan todo actualizado.

¿Cómo añado Brotli a mi sitio?

Bueno, lo primero es qué no depende 100% de nosotros. Pues, nuestro servidor debe poder soportar esta tecnología.

La gran mayoría de los servidores deberían soportar Brotli a día de hoy, pues, sería un error por su parte el no hacerlo. Ya qué al usar Brotli se consumen menos recursos del servidor, en especial el ancho de banda. Lo qué resulta en una mejora de velocidad en tu sitio, y el servidor se queda con más margen.

Por eso es ideal averiguar con el servidor o el CMS qué vamos a contratar, sí es qué comprimen con Brotli. Pero lo más probable es que sí tengan la opción, pero quizás debas instalar o activar algún complemento.

Activar Brotli en WordPress: Diferentes Enfoques

Activar la compresión Brotli en tu sitio WordPress puede realizarse de varias maneras, dependiendo de tu configuración de hosting y tus preferencias personales. A continuación, te presentamos diferentes métodos para activar Brotli, desde el uso de plugins hasta la configuración directa en el servidor.

1. Utiliza un Plugin de WordPress

Para la mayoría de los sitios de WordPress que no utilizan Kinsta, la forma más sencilla de activar Brotli es mediante un plugin.

Un ejemplo es el plugin W3 Total Cache, que ofrece una opción para habilitar la compresión Brotli.

Para activarlo:

• Ve a la página Rendimiento > Caché del navegador en tu dashboard de WordPress.
• Busca la opción «Activar la compresión HTTP (brotli)» y actívala.

Recuerda siempre hacer una copia de seguridad de tu sitio antes de realizar cambios significativos.

2. Habilitar Brotli en el Servidor

Si prefieres un enfoque más técnico o si tu sitio está alojado en un entorno que no permite plugins específicos, puedes optar por habilitar Brotli directamente en el servidor. Aquí hay dos enfoques, dependiendo del tipo de servidor que utilices:

Para Nginx:

• Encuentra y edita el archivo nginx.conf, que suele estar en /usr/local/nginx/conf, /etc/nginx, o /usr/local/etc/nginx.
• Añade las siguientes líneas al final del archivo:
  
  brotli on;
  brotli_static on;
  brotli_comp_level 9; # You can change this from 1–11. 4–9 offers good performance balance.
  brotli_types text/plain text/css application/javascript application/json image/svg+xml application/xml+rss;

Para Apache:

• Accede a tu servidor como usuario root con privilegios sudo.
• Ejecuta a2enmod brotli para activar la compresión Brotli.
• En la configuración de Apache VirtualHost o del servidor, añadí:
  
  AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript
• Opcionalmente, ajusta el nivel de compresión con BrotliCompressionQuality LEVEL-NUMBER, reemplazando LEVEL-NUMBER con un número entre 1 y 11.

3. Utiliza un Alojamiento Web Compatible

La forma más sencilla de asegurarte de que tu sitio utilice Brotli es elegir un alojamiento web que lo ofrezca por defecto. Por ejemplo, Kinsta ofrece compresión Brotli estándar a través de su integración con la CDN de Cloudflare. En este caso, no necesitas realizar ninguna configuración adicional, ya que la compresión Brotli se aplica automáticamente a todos los sitios.

Conclusión

El algoritmo de compresión Brotli ha emergido como una solución revolucionaria en el mundo del desarrollo web, marcando un antes y un después en la optimización de sitios. Desarrollado por Google, Brotli se destaca por su eficiencia superior en la compresión de datos sin pérdida, lo que lo convierte en una herramienta indispensable para mejorar la velocidad y la experiencia de usuario en sitios web.

A lo largo del artículo, hemos explorado las ventajas de Brotli sobre sus predecesores, como Gzip, destacando su capacidad para comprimir datos de manera más efectiva, especialmente en formatos como HTML, JavaScript y CSS. Esta eficiencia se traduce en una carga más rápida de las páginas, un factor crucial para la retención de usuarios y el rendimiento en SEO.

En conclusión, Brotli no es solo una opción, sino una necesidad para los sitios web modernos que buscan optimizar su rendimiento y ofrecer la mejor experiencia a sus usuarios. Con la mayoría de los navegadores y dispositivos actuales compatibles con Brotli, su implementación es más accesible y beneficiosa que nunca. Adoptar Brotli es dar un paso adelante en la eficiencia y la innovación en el desarrollo web.

Si encontraste útil toda la información que hemos compartido, te agradecemos sinceramente tu apoyo. Si deseas colaborar con nosotros, puedes hacerlo mediante una donación a través de PayPal?? o Cafecito??. Tu generosidad nos ayuda a mantener nuestro contenido libre de publicidad y a seguir ofreciendo información valiosa para ti y para nuestra comunidad de lectores.

Si estás considerando crear tu propio sitio web, te recomendamos WordPress??. Es una plataforma fácil de usar y muy popular que te permitirá llevar tus ideas al mundo digital. Haz clic en el banner de abajo para obtener un descuento de $25 al crear tu sitio con WordPress??.

FAQs sobre el algoritmo de compresión Brotli: