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 qué sí tengan la opción, pero quizás debas instalar o activar algún complemento.

Conclusión

Un sitio rápido es bueno para brinda una buena experiencia al usuario. Quizás usar Brotli es una buena opción, pues, acelerará tu sitio, lo demás ya está todo dicho.

¡Nada más por agregar al post!, simplemente me despido dejándote un regalo de 25 dólares para tu próximo sitio de WordPress.