La velocidad es importante para cualquier sitio web. En la búsqueda de tiempos de carga rápidos en la web, disponemos de diferentes tecnologías para ayudarnos. Una de ellas consiste en minimizar el código subyacente que utilizará tu sitio sin que ello afecte a su funcionamiento. La compresión GZIP es una forma de hacerlo, pero la compresión Brotli es un método alternativo en ciernes que llama la atención.

Es una solución desarrollada por Google que parece ofrecer una serie de ventajas sobre la compresión GZIP (así como una alternativa a ella). Los detalles de este artículo tratarán sobre lo que ofrece exactamente esta tecnología, pero la compresión Brotli es rápida y eficiente, lo que cumple todos los requisitos para que la investigues.

En este tutorial, vamos a estudiar la compresión Brotli y a mostrarte cómo comprobar si tu sitio la utiliza, y cómo activarla si es necesario. En primer lugar, vamos a situar a Brotli dentro del espacio de los algoritmos de compresión, y hablaremos de por qué querrías utilizarlo 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. De este modo, se obtienen archivos más ligeros para moverlos por la web y se reduce el tiempo que se tarda en cargar y renderizar un sitio web. Verás que hay muchas formas de comprimir los datos, dependiendo del tipo de archivo con el que estés trabajando.

Un enfoque común es la «minificación» En este caso, un algoritmo despoja el código de tu sitio de algunos de sus elementos superfluos. La idea es que aspectos como las sangrías, los comentarios, los espacios en blanco, etc., aumentarán el tamaño de los archivos y , por tanto, los tiempos de carga.

¿Preparado para investigar la compresión Brotli y ver cómo activarla en tu propio sitio? 💪 Las respuestas están aquí 💥Click to Tweet

La eliminación de estos elementos no afecta a la experiencia del usuario (UX) en la mayoría de las situaciones. Sin embargo, hace que las cosas sean más sencillas para los ordenadores que tienen que compilar y renderizar el código. Por ejemplo, toma 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 utiliza elementos como espacios y retornos de carro para hacerlo legible para los humanos, pero un ordenador no los necesita para entender el código principal. Es más, estos lotes de espacios en blanco y saltos de línea ocuparán un espacio precioso que, eliminado, puede suponer un aumento del rendimiento.

Si minimizas este código, su aspecto será 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.

Verás que otros tipos de archivos tienen formas de comprimir los datos. Por ejemplo, las imágenes suelen necesitar mucha compresión para reducir su tamaño sin que se degrade mucho la propia imagen:

The ShortPixel image optimizer tool showing a number of image thumbnails with pre- and post-values for data compression. There's a red button to let the user download the images as a ZIP file.
Un ejemplo de imagen optimizada.

La compresión GZIP es una forma estándar de minimizar el tamaño de los paquetes de archivos – piensa en paquetes como ZIP o en los paquetes de Linux .tar. Pero hasta ahora no había alternativas reales. Más adelante hablaremos de por qué debería existir una alternativa, pero primero vamos a presentarte al «competidor» de GZIP

Compresión Brotli

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

Proporciona una compresión «sin pérdidas» y está desarrollado por Google bajo una licencia MIT. La empresa suele estar a la vanguardia de la tecnología que avanza en la web, así que no es de extrañar que Brotli busque tomar lo que hace GZIP, mejorarlo y ofrecer una experiencia mejorada a los usuarios y a los sitios.

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

De hecho, si combinas estas dos tecnologías, obtienes el formato DEFLATE que sirve de base para las compresiones GZIP y Brotli. Es algo que tratamos con extrema profundidad en nuestro post sobre la compresión GZIP.

En resumen, los archivos sin comprimir pasan por los algoritmos LZ77 y Huffman como parte del proceso DEFLATE para comprimirlos en un formato Brotli. A partir de ahí, un proceso de 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 utilizan DEFLATE. En la siguiente sección, hablaremos de lo que hace que Brotli destaque.

Compresión Brotli vs. Compresión GZIP

Como se ha mencionado, tanto Brotli como GZIP utilizan el método DEFLATE para comprimir (y descomprimir) los datos. Esto puede confundir a mucha gente, porque esto por sí solo no justifica el cambio.

Sin embargo, Google se está basando en DEFLATE para ofrecer técnicas mejoradas y comprimir los datos con 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 conocido existente en los diccionarios de datos para emplear su algoritmo.

Los desarrolladores utilizan un diccionario de pares clave-valor para almacenar datos, ya que es eficiente, flexible y escalable. Este es el aspecto de un diccionario PHP (llamado «array»)

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

Mientras que GZIP no utiliza diccionarios, Brotli utiliza dos.

El 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 gancho de WordPress hace referencia a un conjunto mayor de código.

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

También verás que hay frases del mundo real dentro del diccionario, así como código que no suele ver la compresión. Esto ayuda a que algunas etiquetas, como <HTML>, y parámetros, como type="text/javascript", reciban algo de compresión y te proporcionen mayores ganancias.

También hay algunas «transformaciones» dentro del diccionario: frases parciales, incompletas y de otro tipo que con un nuevo prefijo, sufijo o caso se convierten en una palabra completamente nueva – por ejemplo, «Trabajo» se transforma en «Trabajo» o «html» en «HTML»

El diccionario dinámico de Brotli

El diccionario dinámico analiza el contenido y el código en origen, lo que es bueno para los dispositivos más pequeños, pero no tanto para los archivos más grandes. También se llama «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 poder referenciarlos. Es ultradinámico, ya que cambia constantemente.

Si comparas esto con la ventana deslizante de GZIP, de unos 32 KB, verás que el margen 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 unos 4 MB, que sigue siendo descomunal en comparación con los algoritmos de la competencia.

Compresión Brotli vs. Compresión GZIP: Rendimiento y soporte

Cuando se trata de números de usuarios puros, la compresión GZIP sigue siendo la número uno. Sin embargo, la compresión Brotli se utiliza cada vez más. Esto se debe, en parte, a la adopción de medidas más amplias por parte de los principales navegadores; el aumento de los navegadores basados en Chromium también ayuda.

El sitio web Can I Use… registra las tecnologías que 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 el momento de escribir este artículo, incluyendo todas las versiones principales.

The Can I Use… website showing which versions of all major browsers use Brotli compression. There are lots of green boxes, denoting that a browser uses the technology, and some red (which denotes it doesn't).
El sitio web Can I Use… muestra la adopción de Brotli.

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

A bar chart showing Brotli, BZIP2, GZIP, and XZ compression formats, compared in compression ratio, compression time, and decompression time benchmark tests.
Una comparación del rendimiento de compresión entre varios algoritmos diferentes (Fuente: OpenCPU).

Sin embargo, las pruebas de Squash Benchmark muestran una historia diferente, más matizada. La verdadera conclusión es que, en general, Brotli es más flexible que GZIP, con un ratio de compresión generalmente mayor.

Este es el resumen de las conclusiones 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.
  • Aunque GZIP supera a Brotli en velocidad la mayor parte del tiempo, el nivel de compresión influye en los resultados que verás.

El desglose de Paul Calvano ofrece más detalles, pero lo esencial es que Brotli necesita más potencia de CPU para proporcionar un mayor factor de compresión de archivos. Esto se muestra tanto en los niveles de compresión más altos como en los más bajos. La evaluación comparativa de Cloudflare lo corrobora: archivos mucho más pequeños, con cifras comparativas de velocidad de compresión más cercanas.

Además, ten en cuenta que algunas herramientas de prueba como Pingdom y algunas redes de distribución de contenidos (CDN) aún no son compatibles con Brotli. Esto puede sesgar los datos que otros recogen sobre el funcionamiento de Brotli. Puedes ver «falsos negativos» si haces pruebas: cifras de velocidad de página más altas que ignoran la compresión de archivos que empleas.

Beneficios de la compresión de Brotli

Hasta ahora, hay mucha información que hay que tener en cuenta sobre la compresión de Brotli. Sin embargo, podemos resumir lo que necesitas saber sobre por qué deberías elegir Brotli en lugar de GZIP:

  1. Toma la misma tecnología que utiliza GZIP y la mejora con métodos modernos.
  2. El análisis sintáctico basado en diccionarios de Brotli significa que puede comprimir más archivos a un nivel más profundo.
  3. Aunque Brotli necesita más potencia de cálculo en comparación con GZIP, los resultados se traducen en archivos más pequeños.
  4. En los niveles de compresión que utilizan la mayoría de los alojamientos web -algo de rango medio como el nivel cuatro o cinco- Brotli rinde más que GZIP sin sudar.
  5. Verás que Brotli tiene una compatibilidad casi universal con los navegadores, aunque no con algunas de las herramientas de referencia a las que estás acostumbrado.
  6. Brotli es de uso gratuito y de código abierto. Esto es una ventaja si utilizas una CDN compatible con Brotli, como Cloudflare.

Cabe destacar que Cloudflare utiliza la compresión Brotli en todos sus servidores. De hecho, utiliza una versión modificada y optimizada de Brotli para ofrecerte mayores ganancias en cuanto a velocidad y entrega de archivos.

Como Kinsta ofrece la integración de Cloudflare en todos los planes, cada sitio alojado utiliza Brotli por defecto. Ésta es sólo una de las razones por las que Kinsta es uno de los mejores proveedores de alojamiento del mercado.

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

Dado que la compresión Brotli aún no es estándar (aunque casi lo es), es probable que quieras saber si tu sitio la utiliza. Hay algunas formas de averiguarlo.

1. Utiliza una herramienta online

La forma más sencilla de comprobar si tu sitio utiliza la compresión Brotli es a través de una herramienta online. Aunque hay unas cuantas para elegir, querrás algo que sea rápido y sencillo de usar y que también te dé un montón de información sobre tu configuración.

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

The Gift Of Speed Brotli checker, showing that the Google website uses Brotli compression, and displaying metrics such as the page size, percentage of compression, and data on the HTTP status of the site.
El sitio web de Gift of Speed.

Determinará si tu sitio utiliza GZIP, Brotli o ninguna compresión, y proporcionará algunas otras métricas para ayudarte a decidir qué hacer a continuación. Estas métricas ofrecen una visión importante, porque no sólo debes tener en cuenta si el servidor de tu sitio utiliza el «sabor» correcto de compresión.

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

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

A partial Gift of Speed results page that shows an asset load from a Cloudflare server, along with metrics on the level of Brotli compression applied, and the HTTP status of the test.
La página de resultados de Gift Of Speed para un activo de Cloudflare.

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

2. Comprueba con las herramientas de desarrollo de tu navegador

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

En los principales navegadores, como Brave, Edge, Firefox o Chrome, puedes dirigirte a la pantalla Red > Todos.

Al principio, no verás nada relacionado con las cabeceras de los contenidos: tendrás que seleccionar un activo o una solicitud en el lado izquierdo. Si sigues buscando y desplazándote hacia abajo en la lista, verás que se abre un panel que muestra por defecto la información de las cabeceras.

Aquí, desplázate hacia abajo en la salida hasta que veas la línea content-encoding: br:

The Brave web browser's dev tools that shows a list of assets on the left (with
Herramientas de desarrollo de Brave, mostrando que la compresión Brotili está activada para el sitio.

En resumen: Si ves content-encoding: br, esto te indica que Brotli está activado para ese sitio.

¿Luchando con el tiempo de inactividad y los problemas de WordPress? Kinsta es la solución de alojamiento diseñada para ahorrarle tiempo! Vea nuestras características

¿Cómo activar la compresión Brotli para tu sitio?

En estas últimas secciones, te mostraremos diferentes formas de activar la compresión Brotli para tu sitio. La primera será el enfoque que recomendamos para la mayoría de los sitios de WordPress que no utilizan Kinsta, y la última es la que recomendamos para todos los sitios que lean el primer enfoque

1. Utiliza un plugin de WordPress

Casi todos los sitios de WordPress utilizarán al menos un plugin, a menudo más, dependiendo de la funcionalidad que necesite el sitio. El almacenamiento en caché es uno de los casos de uso de los plugins, y hay muchos. Sin embargo, no todos te permitirán activar la compresión Brotli, por lo que tendrás que elegir sabiamente y estar preparado para cambiar tu solución preferida.

Antes de realizar cualquier cambio en un sitio, recuerda hacer una copia de seguridad completa por si necesitas restaurarla más tarde. Para este método, utilizaremos W3 Total Cache porque es sencillo encontrar la configuración adecuada.

Tendrás que dirigirte a la página Rendimiento > Caché del navegador dentro de WordPress:

The WordPress dashboard, showing the
El enlace «Browser Cache» de W3 Total Cache:

Esta pantalla muestra dos ajustes. La que querrás elegir es Activar la compresión HTTP (brotli):

The W3 Total Cache
Activar la compresión Brotli en W3 Total Cache.

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, de alto rendimiento y fiable. Por ello, hay una serie de plugins que no necesitarás, y otros incluso están prohibidos en los sitios de Kinsta.

En estos casos, querrás adoptar otro enfoque.

2. Habilitar Brotli en el servidor

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

Antes de que te fijes en el enfoque manual, hay algunos requisitos previos que debes conocer:

  • Querrás saber cómo acceder a los archivos de configuración de tu servidor específico.
  • El conocimiento de la línea de comandos será beneficioso, especialmente cuando se trata de servidores Apache. Para ejecutar cualquier comando, necesitarás ser un usuario root con privilegios en sudo.
  • Es posible que necesites un editor de texto, pero para alteraciones rápidas como ésta, deberías estar bien.
  • En algunos casos, necesitarás tus credenciales de acceso como usuario de shell seguro (SSH) en el propio servidor. Puedes encontrarlas en el panel de control de tu alojamiento, o ponerte en contacto con el servicio de asistencia técnica para solicitarlas.

Si tienes alguna duda sobre el método manual, te recomendamos que busques otra opción, o que pidas ayuda a tu proveedor de servicios. En cualquier caso, haremos un breve resumen del proceso para cada servidor, empezando por Nginx.

Nginx

Para activar la compresión Brotli en los servidores Nginx, primero tendrás que encontrar el archivo nginx.conf. Estará en una de las siguientes ubicaciones:

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

Cuando tengas el archivo abierto, añade 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 utilizará para servir archivos estáticos. El ajuste brotli_comp_level puedes cambiarlo en función de tu caso de uso y tus necesidades. Los números más altos ofrecen una mejor compresión equilibrada con un sitio de menor rendimiento.

Apache

Como Apache es flexible en cuanto a configuraciones, puedes activar la compresión Brotli sin demasiadas complicaciones.

Para ello, sigue estos pasos:

  1. Accede a tu servidor mediante un símbolo del sistema o una aplicación de terminal, como usuario root sudo.
  2. Ejecuta el comando a2enmod brotli para activar la compresión.
  3. Dentro de Apache VirtualHost o de la configuración de tu servidor, añade la línea AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript para establecer los tipos de archivo que quieres comprimir.

Aunque Apache no admite la compresión estática, puedes cambiar el nivel de compresión Brotli que ofreces utilizando la línea BrotliCompressionQuality LEVEL-NUMBER . Sin embargo, tendrás que sustituir el marcador de posición «NIVEL-NÚMERO» por un número entre 1-11.

3. Utiliza un alojamiento web compatible

La forma más sencilla de habilitar la compresión Brotli para tu sitio es asegurarte de que tu alojamiento lo hace por defecto. Kinsta ofrece la compresión Brotli como estándar gracias a su integración con la CDN de Cloudflare.

A drawing of a blue cylindrical server stack, in front of a blue sphere surrounded by thin orange rings, connected to the sphere with dots.
Página de CDN de Cloudflare.

La CDN de Kinsta se alimenta de la infraestructura de Cloudflare en todos los planes, por lo que todos los sitios utilizan la compresión Brotli sin que tengas que activarla.

Deberás comprobar si el host que has elegido ofrece la compresión Brotli, y a qué nivel debes configurarla. Para que tu sitio funcione con el máximo rendimiento, estabilidad y seguridad, es esencial un buen alojamiento.

Aprende a comprobar si tu sitio utiliza la compresión Brotli, cómo activarla (¡si es necesario!) y explora por qué querrías utilizarla en lugar de otras soluciones. 🚀Click to Tweet

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 ricos y complejos tipos de archivos que utilizarás para construir un sitio web. Todos ellos necesitan alguna forma de compresión.

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

La compresión Brotli basa su tecnología en los mismos fundamentos que GZIP, pero incluye algunas ventajas que mejoran el rendimiento. Como ya hemos comentado, utiliza el mapeo de contexto para procesar más rápidamente una solicitud de compresión, y un diccionario que utiliza una población dinámica. Esto es mucho más amplio que lo que puede ofrecer GZIP, y además permite que los usuarios móviles se beneficien también 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 tu sitio alojado en Kinsta es más rápido que el de la competencia que utiliza GZIP y se carga rápidamente para los usuarios de dispositivos más pequeños.

¿Tienes alguna pregunta sobre la compresión Brotli? No dudes en preguntar en la sección de comentarios más abajo


Ahorra tiempo, costes y maximiza el rendimiento del sitio con:

  • Ayuda instantánea de expertos en alojamiento de WordPress, 24/7.
  • Integración de Cloudflare Enterprise.
  • Alcance de audiencia global con 34 centros de datos en todo el mundo.
  • Optimización con nuestra herramienta de monitoreo de rendimiento de aplicación integrada.

Todo esto y mucho más, en un plan sin contratos a largo plazo, migraciones asistidas y una garantía de devolución del dinero de 30 días. Conozca nuestros planes o habla con el departamento de ventas para encontrar el plan más adecuado para ti.