Compresión Brotli: una alternativa rápida a la compresión GZIP

La velocidad es importante para cualquier sitio web. En la búsqueda de la web de tiempos de carga rápidos, tenemos una serie de tecnologías diferentes para ayudarnos. Un enfoque es minimizar el código subyacente que usará su sitio sin afectar su funcionamiento. La compresión GZIP es una forma de hacer esto, pero la compresión Brotli es un método alternativo incipiente que llama la atención.

Es una solución desarrollada por Google que busca brindar una serie de beneficios sobre (así como una alternativa a) la compresión GZIP. Los detalles en este artículo explicarán exactamente lo que ofrece la tecnología, pero la compresión de Brotli es rápida y eficiente, lo que cumple todos los requisitos que necesita para investigarla.

Para este tutorial, analizaremos la compresión de Brotli y le mostraremos cómo verificar si su sitio la usa y cómo habilitarla si es necesario. Primero, colocaremos a Brotli dentro del espacio del algoritmo de compresión y hablaremos sobre por qué querría usarlo en lugar de otras soluciones.

Compresión de datos para la web

En su forma más básica, la compresión de datos toma el código de un sitio web o una aplicación y minimiza el tamaño del archivo. Esto le brinda archivos más livianos para moverse por la web y reduce el tiempo que lleva cargar y renderizar un sitio web. Descubrirá que hay muchas formas de comprimir los datos según el tipo de archivo con el que esté trabajando.

Un enfoque común es la "minificación". Aquí es donde un algoritmo elimina el código de su sitio de algunos de sus elementos superfluos. La idea es que aspectos como sangrías, comentarios, espacios en blanco y más aumenten el tamaño de los archivos y, por lo tanto, los tiempos de carga.

La eliminación de estos elementos no afecta la experiencia del usuario (UX) en la mayoría de las situaciones. Sin embargo , simplifica las cosas para las computadoras que tienen que compilar y renderizar el código. Por ejemplo, tome este conjunto de código:

 define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. */ require __DIR__ . '/wp-load.php'; require __DIR__ . '/wp-blog-header.php'; if ( ! is_multisite() ) { wp_redirect( wp_registration_url() ); die(); } $valid_error_codes = array( 'already_active', 'blog_taken' );

El código anterior usa elementos como espacios y retornos de carro para que sea legible por humanos, pero una computadora no los necesita para comprender el código central. Además, estos lotes de espacios en blanco y saltos de línea ocuparán un espacio precioso que, si se elimina, puede mejorar el rendimiento.

Si minimiza este código, se ve completamente diferente:

 define( 'WP_INSTALLING', true ); /** Sets up the WordPress Environment. * / require __DIR__ . '/wp-load.php'; require __DIR__ . '/wp-blog-header.php'; if ( ! is_multisite() ) { wp_redirect( wp_registration_url() ); die(); } $valid_error_codes = array( 'already_active', 'blog_taken' );

Sin embargo, los fundamentos de lo que hace este código siguen siendo los mismos.

Descubrirá que otros tipos de archivos tienen formas de comprimir datos. Por ejemplo, las imágenes a menudo requieren mucha compresión para reducir su tamaño sin mucha degradación de la imagen en sí:

La compresión GZIP es una forma estándar de minimizar el tamaño de los paquetes de archivos: piense en paquetes como ZIP o paquetes .tar de Linux. Pero hasta ahora no había alternativas reales. Hablaremos más sobre por qué debería existir una alternativa más adelante, pero primero vamos a presentarle al "competidor" de GZIP.

Compresión Brotli

En pocas palabras, Broti es un algoritmo de compresión de datos. Sin embargo, si esto es todo lo que tenemos que decir, no habría razón para investigarlo.

Proporciona compresión "sin pérdidas" y está desarrollado por Google bajo una licencia MIT. La compañía suele estar a la vanguardia de la tecnología de avance web, por lo que no sorprende que Brotli busque tomar lo que hace GZIP, mejorarlo y ofrecer una experiencia mejorada a los usuarios y sitios.

La compresión Brotli utiliza las mismas tecnologías básicas básicas que la compresión GZIP, a saber:

• El algoritmo LZ77
• Codificación y decodificación Huffman

De hecho, si combina estas dos tecnologías, obtiene el formato DEFLATE que sirve como base para las compresiones GZIP y Brotli. Es algo en lo que profundizamos mucho en nuestra publicación sobre la compresión GZIP.

En resumen, los archivos sin comprimir se ejecutan a través de los algoritmos LZ77 y Huffman como parte del proceso DEFLATE para comprimirlos en un formato Brotli. A partir de ahí, un proceso INFLATE volverá a descomprimir los archivos cuando sea necesario.

Aunque Brotli es actualmente el principal competidor de GZIP, existen otras tecnologías similares que también usan DEFLATE . En la siguiente sección, hablaremos sobre lo que hace que Brotli se destaque.

Compresión Brotli frente a compresión GZIP

Como se mencionó, tanto Brotli como GZIP usan el método DEFLATE para comprimir (y descomprimir) datos. Esto puede confundir a muchas personas, porque esto por sí solo no garantiza un cambio.

Sin embargo, Google se basa en DEFLATE para ofrecer técnicas mejoradas y comprimir datos a un estándar mayor y más rápido.

Cómo utiliza Brotli los diccionarios para mejorar la compresión de datos

Un aspecto técnico de los formatos de compresión de datos es la forma en que la compresión Brotli utiliza el lenguaje y el texto conocidos existentes dentro de los diccionarios de datos para emplear su algoritmo.

Los desarrolladores utilizarán un diccionario de pares clave-valor para almacenar datos, ya que es eficiente, flexible y escalable. Así es como se vería un diccionario PHP (llamado "matriz"):

 $cats = get_categories( array( 'taxonomy' => 'link_category', 'hierarchical' => 0, 'include' => $link_cat, ) );

Si bien GZIP no usa diccionarios, Brotli usa dos .

Diccionario estático de Brotli

El primero es un diccionario estático (es decir, predefinido) de términos de código comunes que actúan como referencia para el texto HTML, CSS y JavaScript.

Hay más de 13 000 palabras en seis idiomas diferentes, y Brotli las utilizará como referencias a puntos del código. No es una analogía exacta, pero es similar a la forma en que un enlace de WordPress hace referencia a un conjunto de código más grande.

Como tal, el codificador no tiene que revisar el código byte por byte. En su lugar, puede actuar sobre las referencias, extraer la definición del diccionario y pasar a la siguiente.

También encontrará que hay frases del mundo real dentro del diccionario, así como código que a menudo no vería compresión. Esto ayuda a que algunas etiquetas como <HTML> y parámetros como type="text/javascript" se compriman un poco y le brinden mayores ganancias.

También hay algunas "transformaciones" dentro del diccionario: parciales, incompletas y otros tipos de frases que con un nuevo prefijo, sufijo o caso se convierten en una palabra completamente nueva, por ejemplo, "Trabajo" que se transforma en "Trabajando" o "html". ” a “HTML”.

Diccionario dinámico de Brotli

El diccionario dinámico analiza el contenido y el código en el origen, lo que es bueno para dispositivos más pequeños, pero no tanto para archivos más grandes. También se denomina "ventana deslizante" y puede tener un tamaño de hasta 16 MB. Aquí es donde el algoritmo de compresión 'almacena en caché' algunos de los datos más recientes para hacer referencia a ellos. Es ultradinámico en el sentido de que cambia constantemente.

Si compara esto con la ventana deslizante de GZIP de alrededor de 32 KB, verá que el alcance para el análisis y la compresión en tiempo real es enorme. De hecho, la mayoría de las prácticas típicas utilizan una ventana deslizante de Brotli de alrededor de 4 MB, que sigue siendo enorme en comparación con los algoritmos de la competencia.

Compresión Brotli frente a compresión GZIP: rendimiento y soporte

Cuando se trata de números de usuario puros, la compresión GZIP sigue siendo la número uno. Sin embargo, la compresión Brotli ve más uso cada día. Esto se debe en parte a medidas adoptadas más amplias por parte de los principales navegadores; el auge de los navegadores basados ​​en Chromium también ayuda.

El sitio web Can I Use... registra qué tecnologías adoptan los navegadores y proporciona una especie de historial. Este sitio señala que más del 95% de los navegadores utilizan la compresión Brotli en la escritura actual, incluidas todas las versiones principales.

En nuestro artículo de compresión GZIP, notamos una prueba de referencia en la que Brotli tenía una mejor relación de compresión en comparación con los algoritmos de la competencia, pero se quedó atrás en el tiempo de compresión y descompresión:

Sin embargo, las pruebas de Squash Benchmark muestran una historia diferente, una que tiene más matices. La conclusión real es que, en general, Brotli es más flexible que GZIP, con una relación de compresión generalmente más alta.

Aquí está el resumen de los hallazgos de Squash Benchmarks:

• Brotli tiene la mejor relación de compresión (es decir, produce archivos comprimidos más pequeños) en todos los niveles de compresión.
• Si bien GZIP supera a Brotli en velocidad la mayor parte del tiempo, el nivel que comprimes influye en los resultados que verás.

El desglose de Paul Calvano brinda más detalles, pero el quid es que Brotli necesita más potencia de CPU para proporcionar un mayor factor de compresión de archivos. Esto se muestra en los niveles de compresión más altos y más bajos. La evaluación comparativa de Cloudflare respalda esto: archivos mucho más pequeños, con números de velocidad de compresión comparativos más cercanos.

Además, tenga en cuenta que algunas herramientas de prueba como Pingdom y algunas redes de entrega de contenido (CDN) aún no son compatibles con Brotli. Esto puede sesgar los datos que otros recopilan sobre cómo opera Brotli. Puede ver "falsos negativos" si realiza pruebas: cifras de velocidad de página más altas que ignoran la compresión de archivos que emplea.

Beneficios de la compresión Brotli

Hay mucha información para tener en cuenta sobre la compresión de Brotli hasta ahora. Sin embargo, podemos resumir lo que necesita saber sobre por qué debería elegir Brotli en lugar de GZIP:

1. Toma la misma tecnología que usa GZIP y la mejora con métodos modernos.
2. El análisis basado en diccionario de Brotli significa que puede comprimir más archivos a un nivel más profundo.
3. Si bien Brotli necesita más poder de cómputo en comparación con GZIP, los resultados significan archivos más pequeños.
4. En los niveles de compresión que utilizan la mayoría de los servidores web, algo de rango medio como el nivel cuatro o cinco, Brotli funciona mejor que GZIP sin sudar.
5. Descubrirá que Brotli tiene soporte casi universal en todos los navegadores, si no en algunas de las herramientas de referencia a las que está acostumbrado.
6. Brotli es de uso gratuito y de código abierto. Esta es una ventaja si utiliza una CDN compatible con Broti, como Cloudflare.

Vale la pena señalar que Cloudflare usa la compresión Brotli en todos sus servidores. De hecho, utiliza una versión modificada y optimizada de Brotli para brindarle mayores ganancias con respecto a la velocidad y la entrega de archivos.

Debido a que Kinsta ofrece la integración de Cloudflare en todos los planes, cada sitio alojado usa Brotli de manera predeterminada. Esta es solo una de las razones por las que Kinsta es uno de los mejores proveedores de alojamiento y líderes del mercado.

Cómo comprobar si su sitio utiliza la compresión Brotli

Debido a que la compresión Brotli aún no es estándar (aunque ya casi está), probablemente querrá saber si su sitio la usa. Hay algunas maneras de resolver esto.

1. Use una herramienta en línea

La forma más sencilla de verificar si su sitio usa la compresión Brotli es a través de una herramienta en línea. Si bien hay algunos para elegir, querrá algo que sea rápido y fácil de usar que también le brinde mucha información sobre su configuración.

Gift of Speed ​​es nuestra elección para comprobar la compresión de Brotli.

Determinará si su sitio usa GZIP, Brotli o ninguna compresión, y proporcionará algunas otras métricas para ayudarlo a decidir qué hacer a continuación. Estas métricas ofrecen información importante, porque no solo desea considerar si el servidor de su sitio utiliza el "sabor" correcto de compresión.

Hay muchos elementos que componen un sitio web, e incluso bibliotecas y dependencias de terceros. Puede optar por servirlos usando un CDN, y si es así, esto también debe emplear la compresión Brotli para obtener el mejor rendimiento posible.

Si usa Gift Of Speed ​​para probar activos individuales, puede echar un vistazo al valor del servidor para ver cómo se sirve.

Todos los sitios de Kinsta utilizan Kinsta CDN impulsado por Cloudflare. Como tal, cada sitio también utilizará la compresión Brotli en toda la cadena y arquitectura del servidor.

2. Comprueba el uso de las herramientas de desarrollo de tu navegador

La mayoría de los desarrolladores sabrán que un navegador ofrece algunas herramientas fantásticas para ayudarlo con todo tipo de investigación y resolución de problemas relacionados con la web. Una verificación rápida que puede hacer es si su sitio (o un activo específico) utiliza la compresión Brotli.

Para todos los principales navegadores, como Brave, Edge, Firefox o Chrome, puede dirigirse a la pantalla Red > Todo .

Al principio, no verá nada relacionado con los encabezados de contenido; deberá seleccionar un activo o una solicitud del lado izquierdo. Si sigue buscando y desplazándose hacia abajo en la lista, verá que se abre un panel que muestra de manera predeterminada la información de los encabezados .

Aquí, desplácese hacia abajo en la salida hasta que vea la content-encoding: br :

En resumen: si ve content-encoding: br , esto le indica que Brotli está activo para ese sitio.

Cómo habilitar la compresión de Brotli para su sitio

En estas últimas secciones, le mostraremos varias formas diferentes de habilitar la compresión Brotli para su sitio. El primero será el enfoque que recomendamos para la mayoría de los sitios de WordPress que no usan Kinsta, ¡y el último es el que recomendamos para todos los sitios que lean el primer enfoque!

1. Usa un complemento de WordPress

Casi todos los sitios de WordPress usarán al menos un complemento, a menudo más dependiendo de la funcionalidad que necesite el sitio. El almacenamiento en caché es un caso de uso para los complementos, y hay muchos. Sin embargo, no todos le permitirán habilitar la compresión Brotli, por lo que deberá elegir sabiamente y estar preparado para cambiar su solución preferida.

Antes de realizar cualquier cambio en un sitio, recuerde hacer una copia de seguridad completa en caso de que necesite restaurar más tarde. Para este método, usaremos W3 Total Cache porque es sencillo encontrar la configuración correcta.

Deberá dirigirse a la página Rendimiento > Caché del navegador dentro de WordPress:

Esta pantalla muestra dos configuraciones. El que querrá elegir es Habilitar compresión HTTP (brotli) :

Sin embargo, esto no va a ser adecuado para todos los sitios y situaciones. Por ejemplo, Kinsta optimiza su servidor para un alojamiento rápido, confiable y de alto rendimiento. Como tal, hay una serie de complementos que no necesitará, y algunos otros incluso tienen prohibido su uso en los sitios de Kinsta.

En estos casos, querrá adoptar otro enfoque.

2. Habilite Brotli en el servidor

Cuando se trata de elegir un tipo de servidor, Nginx vs Apache es una batalla de larga data que (por ahora) el primero está ganando. Independientemente, ambos tipos de servidores pueden habilitar la compresión Brotli y existen diferentes enfoques para cada uno.

Antes de analizar el enfoque manual, hay algunos requisitos previos que debe conocer:

• Querrá comprender cómo acceder a sus archivos de configuración para su servidor específico.
• El conocimiento de la línea de comandos será beneficioso, especialmente cuando se trata de servidores Apache. Para ejecutar cualquier comando, deberá ser un usuario raíz con privilegios de sudo .
• Es posible que necesite un editor de texto, pero para modificaciones rápidas como esta, debería estar bien.
• En algunos casos, necesitará sus credenciales de inicio de sesión como usuario de shell seguro (SSH) en el propio servidor. Puede encontrarlos en el panel de control de su alojamiento o ponerse en contacto con el soporte para preguntar.

Si tiene alguna duda sobre el enfoque manual, le recomendamos que busque otra opción o que se comunique con su anfitrión para obtener ayuda. De todos modos, daremos una breve descripción general del proceso para cada servidor, comenzando con Nginx.

Nginx

Para habilitar la compresión Brotli en los servidores Nginx, primero deberá encontrar el archivo nginx.conf . Será uno de los pocos lugares:

• /usr/local/nginx/conf
• /etc/nginx
• /usr/local/etc/nginx

Cuando tengas el archivo abierto, agrega lo siguiente al final:

 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;

Esta suite activará Brotli y lo usará para servir archivos estáticos. La configuración brotli_comp_level es una que puede cambiar según su caso de uso y sus necesidades. Los números más altos ofrecen una mejor compresión equilibrada con un sitio de menor rendimiento.

apache

Debido a que Apache es flexible cuando se trata de configuraciones, puede habilitar la compresión Brotli sin demasiados problemas.

Para hacer esto, siga estos pasos:

1. Inicie sesión en su servidor utilizando una aplicación de símbolo del sistema o terminal, como usuario raíz de sudo .
2. Ejecute el comando a2enmod brotli para activar la compresión.
3. Dentro de Apache VirtualHost o de la configuración de su servidor, agregue AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript line para establecer los tipos de archivo correctos que le gustaría comprimir.

Si bien Apache no admite la compresión estática, puede cambiar el nivel de compresión de Brotli que ofrece utilizando la BrotliCompressionQuality LEVEL-NUMBER . Sin embargo, deberá reemplazar el marcador de posición "LEVEL-NUMBER" con un número entre 1 y 11.

3. Use un servidor web compatible

La forma más sencilla de habilitar la compresión Brotli para su sitio es asegurarse de que su host lo haga de forma predeterminada. Kinsta ofrece compresión Brotli como estándar gracias a su integración con la CDN de Cloudflare.

Kinsta CDN funciona con la infraestructura de Cloudflare en todos los planes, por lo que cada sitio usa la compresión Brotli sin necesidad de habilitarla.

Querrá verificar si su host elegido ofrece compresión Brotli y en qué nivel necesita configurarlo. Para ejecutar el sitio de mayor rendimiento, estable y seguro, un buen alojamiento es esencial.

Resumen

La compresión de datos es un componente necesario para desarrollar y utilizar la web moderna. El tamaño de los archivos puede dispararse debido a los tipos de archivos ricos y complejos que usará para armar un sitio web. Todos ellos necesitan algún tipo de compresión.

El enfoque típico ha sido GZIP hasta ahora, pero hay un chico nuevo en el bloque.

La compresión de Brotli basa su tecnología en los mismos cimientos que GZIP, pero incluye algunos beneficios que mejoran el rendimiento. Como comentamos, utiliza el mapeo de contexto para procesar una solicitud de compresión más rápido y un diccionario que utiliza población dinámica. Esto es mucho más grande que lo que puede ofrecer GZIP, y también permite que los usuarios móviles también se beneficien de la compresión.

La buena noticia es que todos los sitios de Kinsta pueden beneficiarse de la compresión Brotli gracias a nuestra exclusiva integración con Cloudflare. Esto significa que su sitio alojado en Kinsta es más rápido que el de la competencia usando GZIP y se carga rápidamente para aquellos en dispositivos más pequeños.

¿Tiene alguna pregunta sobre la compresión Brotli? ¡No dude en preguntar en la sección de comentarios a continuación!