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 ↗.

Gzip y Brotli checker

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.

activar Brotli en el servidor

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.

1 comentario en “Aceler√° tu sitio web con el algoritmo de compresi√≥n Brotli”

Deja un comentario

Post relacionados

Por si te quedaste con ganas de m√°s...

Como seguramente seguis con muchas ganas de leer post de mni blog ¬ędijo nunca, nadie¬Ľ, te dejo algunos otros post que podr√≠an ser de inter√©s, ordenados de manera completamente random.

¬ŅNecesit√°s contactarte conmigo?

Si ten√©s ganas de ponerte en contacto porque necesit√°s ayuda particular o simplemente te falta uno para el f√ļtbol, no dudes en dejarme un mensaje por mail o en las redes sociales.

error: Content is protected !!
A %d blogueros les gusta esto: