Cómo utilicé Brotli para obtener archivos CSS y JavaScript aún más pequeños a escala CDN

La comedia de HBO Silicon Valley siguió hilarantemente a Pied Piper, un equipo de desarrolladores con el sueño de crear un algoritmo de compresión tan poderoso que las preocupaciones sobre la transmisión de alta calidad y el almacenamiento de archivos se convertirían en cosa del pasado.

En el programa, Google es interpretado por la empresa ficticia Hooli, que busca la propiedad intelectual de Pied Piper. Lo curioso es que, aunque está lejos de ser una startup, Google sí cuenta en la vida real con un potente motor de compresión llamado Brotli.

Este artículo trata sobre mi experiencia usando Brotli a escala de producción. A pesar de ser realmente costoso y un método realmente inviable para la compresión sobre la marcha a niveles de compresión más altos, Brotli es en realidad muy económico y ahorra costos en muchos frentes, especialmente en comparación con gzip o niveles de compresión más bajos de Brotli. (que obtendremos). es).

El comienzo de Brotli…

En 2015, Google publicó una entrada de blog anunciando Brotli y publicó su código fuente en GitHub. La pareja de desarrolladores que crearon Brotli también crearon la compresión Zopfli de Google dos años antes. Pero mientras Zopfli aprovechó las técnicas de compresión existentes, Brotli se escribió desde cero y se centró directamente en la compresión de texto para beneficiar los activos web estáticos, como HTML, CSS, JavaScript e incluso fuentes web.

En ese momento, trabajaba como consultor independiente de rendimiento de sitios web. Estaba realmente emocionado por la mejora del 20-26% que Brotli prometió sobre Zopfli. Zopfli en sí mismo es una implementación densa del compresor desinflado en comparación con la implementación estándar de zlib, por lo que la afirmación de hasta un 26% fue bastante impresionante. ¿Y qué es zlib? Es esencialmente lo mismo que gzip.

Entonces, lo que estamos viendo es la próxima generación de Zopfli, que es una rama de zlib, que es esencialmente gzip.

Una historia de engaño

Fueron necesarios algunos meses para que los principales reproductores de CDN soportaran a Brotli, pero mientras tanto estaba viendo una adopción generalizada en herramientas, servicios, navegadores y servidores. Sin embargo, la compresión densa del 26% que Brotli prometió nunca se reflejó en la producción. Algunos CDN establecieron internamente un nivel de compresión más bajo, mientras que otros admitían Brotli en el origen, por lo que sólo lo permitiría si se habilitó manualmente en el origen.

El soporte del servidor para Brotli fue bastante bueno, pero para lograr altos niveles de compresión, requirió implementar su propio código de precompresión o usar un módulo de servidor para hacerlo por usted, lo cual no siempre es una opción, especialmente en el caso de servicios de alojamiento compartido. .

Esto fue realmente decepcionante para mí. Quería comprimir hasta el último byte posible de los sitios web de mis clientes en una unidad para hacerlos más rápidos, pero usar la precompresión y permitir a los clientes actualizar archivos bajo demanda simultáneamente no siempre fue fácil.

Tomando el asunto en mis propias manos

Comencé a crear mi propio servicio de optimización del rendimiento para mis clientes.

Tenía varios trucos que podían acelerar significativamente los sitios web. El servicio clasificó todas las optimizaciones en tres grupos que constantes de varias optimizaciones de “Contenido”, “Entrega” y “Caché”. Tenía a Brotli en mente para la parte de optimización de contenido del servicio para recursos comprimibles.

Al igual que otros formatos de compresión, Brotli viene en diferentes niveles de potencia. El nivel máximo de Brotli es exactamente igual al volumen máximo de los amplificadores de guitarra en This is Spinal Tap : llega a 11.

Brotli:11, o nivel de compresión Brotli 11, puede ofrecer una reducción significativa en el tamaño de los archivos comprimibles, pero tiene una contrapartida sustancial: es tremendamente lenta y no es factible para la compresión bajo demanda de la misma manera que gzip es capaz de hacerlo. Cuesta mucho más en términos de tiempo de CPU.

En mis pruebas comparativas, Brotli:11 tarda varios cientos de milisegundos en comprimir un único archivo jQuery minimizado. Entonces, la única forma de ofrecer Brotli:11 a mis clientes era usarla para la precompresión, lo que me dejaba encontrar una manera de almacenar en caché los archivos a nivel del servidor. Por suerte ya lo implementamos. El único problema era el temor de que Brotli pudiera acabar con todos nuestros recursos de procesamiento.

Dejé mis miedos a un lado y construí Brotli:11 como una opción de servidor configurable. De esta manera, los clientes podían decidir si habilitarlo valía el costo informático.

Es lento, pero poco a poco da sus frutos.

Entre otras optimizaciones, el servicio para mis clientes también ofrece entrega de contenido geográfico; En otras palabras, tiene una CDN incorporada.

De los varios trucos que probé cuando tomé el asunto en mis propias manos, uno fue combinar CDN pública (o CDN de código abierto) y CDN privado en un solo host para que los sitios web puedan disfrutar de los beneficios del caché compartido del navegador de Los recursos públicos sin incurrir en costo de conexión y búsqueda de DNS por separado para ese host público. Quería evitar este costo adicional de conexión porque tiene un impacto significativo para los usuarios de dispositivos móviles. Además, combinar más y más recursos en un solo host puede ayudar a aprovechar al máximo las funciones de HTTP/2, como la multiplexación.

Habilité la CDN pública y activé la precompresión Brotli:11 para todos los recursos comprimibles, incluidos CSS, JavaScript, SVG y TTF, entre otros tipos de archivos. De hecho, la sobrecarga de compresión aumentó en la primera solicitud de cada recurso, pero después de eso, todo pareció funcionar sin problemas. Brotli tiene más del 90% de compatibilidad con el navegador y casi todas las solicitudes que llegan a mi servicio ahora usan Brotli.

Yo era feliz. Los clientes estaban contentos. Pero no tenía números. Comencé a analizar el impacto de permitir esta compresión de alta densidad en los recursos públicos. Para esto, registré los tamaños de transferencia de archivos de varias bibliotecas populares, incluidas jQuery, Bootstrap, React y otros marcos, que usaban métodos de compresión comunes implementados por otras CDN y descubrí que la compresión Brotli:11 ahorraba alrededor del 21 % en comparación con otros formatos de compresión. .

Es importante tener en cuenta que algunas de las otras CDN públicas que comparé ya usaban Brotli, pero con niveles de compresión más bajos. Entonces, el 21% de compresión adicional fue realmente satisfactorio para mí. Este número se basa en un subconjunto muy pequeño de bibliotecas, pero no es incorrecto ni por un gran margen, ya que observé esta gran ganancia en todos los sitios web que probé.

A continuación se muestra una representación gráfica de los ahorros.

Puede ver los datos sin procesar a continuación. Tenga en cuenta que los ahorros para CSS son mucho más prominentes que los que obtiene JavaScript.

Los resultados son geniales, que es lo que esperaba. Pero ¿qué pasa con el impacto general del uso de Brotli:11 a escala? Resulta que usar Brotli:11 para todos los recursos públicos reduce los costos en general:

• Se espera que los tamaños de archivo más pequeños den como resultado una menor sobrecarga de TLS. Dicho esto, no es fácil de medir ni es significativo para mi servicio porque las CPU modernas son muy rápidas en cifrado. Aún así, creo que hay un ahorro pequeño y repetido gracias al cifrado para cada solicitud, ya que los archivos más pequeños se cifran más rápido.
• Reduce el costo del ancho de banda. El ahorro del 21% que obtuve en todos los ámbitos es el buen ejemplo. Y recuerde, los ahorros no son algo que se hace una sola vez. Cada solicitud cuenta como costo, por lo que el ahorro del 21% se repite una y otra vez, creando un ahorro en forma de bola de nieve en el costo del ancho de banda.
• Solo almacenamos en caché los archivos activos en la memoria de los servidores perimetrales. Debido a la compatibilidad generalizada del navegador con Brotli, estos archivos activos están codificados en su mayoría por Brotli y su pequeño tamaño nos permite colocar más de ellos en la memoria disponible.
• Los visitantes, especialmente aquellos que utilizan dispositivos móviles, disfrutan de una transferencia de datos reducida. Esto da como resultado un menor uso de la batería y ahorros en cargos de datos. ¡Esa es una gran ganancia que se transmite a los usuarios de nuestros clientes!

Todo esto es tan bueno. El costo que ahorramos por solicitud no es significativo, pero considerando que tenemos una tasa de pérdida de caché cercana a cero para los recursos públicos, podemos amortizar fácilmente el alto costo inicial de la compresión en los siguientes cientos de solicitudes. Después de eso, veremos un beneficio de por vida de reducción de gastos generales.

No termina ahí

Con la combinación de CDN públicas y privadas que introdujimos como parte de nuestro servicio de optimización del rendimiento, queríamos asegurarnos de que los clientes pudieran establecer niveles de compresión más bajos para los recursos que cambian con frecuencia con el tiempo (como CSS y JavaScript personalizados) en la CDN privada y cambie automáticamente a la CDN pública para recursos de código abierto que cambian con menos frecuencia y tienen Brotli:11 preconfigurado. De esta manera, nuestros clientes aún pueden obtener una alta relación de compresión en recursos que cambian con menos frecuencia y al mismo tiempo disfrutar de buenas relaciones de compresión con purga instantánea y actualizaciones de recursos comprimibles.

Todo esto se hace sin problemas y sin problemas utilizando nuestras herramientas de integración. El beneficio adicional de este enfoque para los clientes es que el ancho de banda de la CDN pública es totalmente gratuito con niveles de rendimiento sin precedentes.

¡Inténtalo tú mismo!

Al realizar pruebas en un sitio web común, el uso de una compresión agresiva puede reducir fácilmente alrededor de 50 KB de la carga de la página . Si desea jugar con la CDN pública gratuita y disfrutar de CSS y JavaScript más pequeños, puede utilizar nuestro servicio PageCDN. Estas son algunas de las bibliotecas más utilizadas para su uso:

!-- jQuery 3.5.0 --script src="https://pagecdn.io/lib/jquery/3.5.0/jquery.min.js" crossorigin="anonymous" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" /script
!-- FontAwesome 5.13.0 --link href="https://pagecdn.io/lib/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" crossorigin="anonymous" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" 
!-- Ionicons 4.6.3 --link href="https://pagecdn.io/lib/ionicons/4.6.3/css/ionicons.min.css" rel="stylesheet" crossorigin="anonymous" integrity="sha256-UUDuVsOnvDZHzqNIznkKeDGtWZ/Bw9ZlW+26xqKLV7c=" 
!-- Bootstrap 4.4.1 --link href="https://pagecdn.io/lib/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" 
!-- React 16.13.1 --script src="https://pagecdn.io/lib/react/16.13.1/umd/react.production.min.js" crossorigin="anonymous" integrity="sha256-yUhvEmYVhZ/GGshIQKArLvySDSh6cdmdcIx0spR3UP4=" /script
!-- Vue 2.6.11 --script src="https://pagecdn.io/lib/vue/2.6.11/vue.min.js" crossorigin="anonymous" integrity="sha256-ngFW3UnAN0Tnm76mDuu7uUtYEcG3G5H1+zioJw3t+68=" /script

Nuestra biblioteca PHP cambia automáticamente entre CDN pública y privada si lo necesita. La misma característica se implementa a la perfección en nuestro complemento de WordPress que carga automáticamente recursos públicos a través de CDN pública. Ambas herramientas permiten acceso completo a la CDN pública gratuita. Bibliotecas para JavaScript, Python. y Ruby aún no están disponibles. Si contribuye con alguna biblioteca de este tipo a nuestra CDN pública, estaré encantado de incluirla en nuestros documentos.

Además, puede utilizar nuestra herramienta de búsqueda para encontrar inmediatamente un recurso correspondiente en la CDN pública proporcionando una URL de un recurso en su sitio web. Si ninguna de estas herramientas funciona para usted, puede consultar la página de la biblioteca correspondiente y elegir las URL que desee.

Mirando hacia el futuro

Empezamos alojando sólo las bibliotecas más populares para evitar la propagación de malware. Sin embargo, las cosas están cambiando rápidamente y agregamos nuevas bibliotecas a medida que nuestros usuarios nos las sugieren. También puedes sugerir tus favoritos. Si aún desea vincularse a un repositorio de Github público o privado que aún no está disponible en nuestra CDN pública, puede usar nuestra CDN privada para conectarse a un repositorio e importar todas las nuevas versiones tal como aparecen en GitHub y luego aplicar su propio repositorio agresivo. optimizaciones antes de la entrega.

¿Qué opinas?

Todo lo que cubrimos aquí se basa únicamente en mi experiencia personal trabajando con la compresión Brotli a escala CDN. Resulta que también es una introducción a mi CDN pública. Todavía somos un servicio pequeño y los sitios web de nuestros clientes son solo cientos. Aun así, a esta escala la compresión agresiva parece dar sus frutos.

Logré resultados de alta calidad para mis clientes y ahora usted también puede utilizar este servicio gratuito para sus sitios web. Y, si te gusta, deja tus comentarios en mi correo electrónico y recomiéndalo a otros.