Algoritmos UX

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 UXexperiencia 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贸nver 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 Comment

Deja un comentario