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.
Mira Nuestro Videotutorial de Compresión Brotli
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.
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:
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.
Mira Nuestro Videotutorial sobre la Compresión Brotli vs. la Compresión GZIP
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.
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:
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:
- Toma la misma tecnología que utiliza GZIP y la mejora con métodos modernos.
- El análisis sintáctico basado en diccionarios de Brotli significa que puede comprimir más archivos a un nivel más profundo.
- Aunque Brotli necesita más potencia de cálculo en comparación con GZIP, los resultados se traducen en archivos más pequeños.
- 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.
- 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.
- 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.
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.
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:
En resumen: Si ves content-encoding: br, esto te indica que Brotli está activado para ese sitio.
¿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:
Esta pantalla muestra dos ajustes. La que querrás elegir es Activar la 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, 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:
- Accede a tu servidor mediante un símbolo del sistema o una aplicación de terminal, como usuario root
sudo. - Ejecuta el comando
a2enmod brotlipara activar la compresión. - 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/javascriptpara 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.
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.
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
Deja una respuesta