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

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 el almacenamiento de archivos y la transmisión de alta calidad se convertirían en cosa del pasado.

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

Este artículo trata sobre mi experiencia con el uso de 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 realmente 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 en).

El comienzo de Brotli …

En 2015, Google publicó una publicación de blog anunciando Brotli y lanzó su código fuente en GitHub. El par de desarrolladores que crearon Brotli también crearon la compresión Zopfli de Google dos años antes. Pero donde 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 autónomo 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 de 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 decepción

Los principales reproductores de CDN tardaron unos meses en admitir Brotli, pero mientras tanto, estaba experimentando una adopción generalizada en herramientas, servicios, navegadores y servidores. Sin embargo, la compresión densa del 26% que prometió Brotli nunca se reflejó en la producción. Algunas CDN establecen un nivel de compresión más bajo internamente, mientras que otras admiten Brotli en el origen para que solo lo admitan si se habilitó manualmente en el origen.

El soporte del servidor para Brotli era bastante bueno, pero para lograr altos niveles de compresión, requería enrollar 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 los servicios de alojamiento compartido. .

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

Tomando el asunto en mis propias manos

Comencé a construir 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 constan 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 como el volumen máximo de los amplificadores de guitarra en This is Spinal Tap: va a 11.

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

En mis puntos de referencia, Brotli: 11 tarda varios cientos de milisegundos en comprimir un solo archivo jQuery minificado. Entonces, la única forma de ofrecer Brotli: 11 a mis clientes era usarlo para precompresión, dejándome encontrar una manera de almacenar en caché los archivos a nivel del servidor. Afortunadamente ya lo teníamos en su lugar. El único problema era el temor de que Brotli pudiera acabar con todos nuestros recursos de procesamiento.

Tal vez por eso Pied Piper tuvo que seguir manipulando sus servidores para obtener más potencia.

Dejé a un lado mis miedos y construí Brotli: 11 como una opción de servidor configurable. De esta forma, los clientes podían decidir si habilitarlo valía la pena el costo de cómputo.

Es lento, pero poco a poco da sus frutos

Entre varias otras optimizaciones, el servicio para mis clientes también ofrece entrega de contenido geográfico; en otras palabras, tiene un CDN incorporado.

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

Activé la CDN pública y activé la precompresión de 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 soporte de navegador y casi todas las solicitudes que llegan a mi servicio ahora usan Brotli.

Yo era feliz. Los clientes estaban felices. Pero no tenía números. Comencé a analizar el impacto de habilitar esta compresión de alta densidad en los recursos públicos. Para esto, grabé 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 estaba ahorrando 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 por un gran margen, ya que estaba viendo esta gran ganancia en todos los sitios web que probé.

Aquí hay 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 importantes que los que obtiene JavaScript.

Los resultados son geniales, que es lo que esperaba. Pero, ¿qué pasa con el impacto general de usar Brotli: 11 a escala? Resulta que el uso de 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 sobrecarga de TLS más baja. Dicho esto, no se puede medir fácilmente ni es significativo para mi servicio porque las CPU modernas son muy rápidas en el cifrado. Aún así, creo que hay un pequeño y repetido ahorro debido al cifrado para cada solicitud, ya que los archivos más pequeños se cifran más rápido.
• Reduce el costo de ancho de banda. El ahorro del 21% que obtuve en todos los ámbitos es el caso que nos ocupa. Y recuerde, los ahorros no son cosa de una sola vez. Cada solicitud cuenta como costo, por lo que el ahorro del 21% se repite una y otra vez, creando un ahorro de bola de nieve para el costo del ancho de banda.
• Solo almacenamos en caché los archivos calientes en la memoria de los servidores perimetrales. Debido a la amplia compatibilidad del navegador con Brotli, estos archivos calientes 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 los que utilizan dispositivos móviles, disfrutan de una transferencia de datos reducida. Esto da como resultado un menor uso de la batería y un ahorro en las cargas de datos. ¡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 compresión en los próximos cientos de solicitudes. Después de eso, buscaremos un beneficio de por vida de gastos generales reducidos.

No termina ahí

Con la combinación de CDN públicos y privados que presentamos 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 el CDN privado y cambie automáticamente al CDN público para los 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 los recursos que cambian con menos frecuencia mientras disfrutan de buenas relaciones de compresión con purga instantánea y actualizaciones para 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 en la CDN pública es totalmente gratuito con niveles de rendimiento sin precedentes.

¡Inténtalo tú mismo!

Realizar pruebas en un sitio web común, utilizando una compresión agresiva, puede reduzca alrededor de 50 KB de la carga de la página. Si desea jugar con el CDN público gratuito 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úblico y privado si lo necesita. La misma función se implementa a la perfección en nuestro complemento de WordPress que carga automáticamente los recursos públicos a través de Public CDN. Ambas herramientas permiten el acceso completo al CDN público gratuito. Bibliotecas para JavaScript, Python. y Ruby aún no están disponibles. Si contribuye con una biblioteca de este tipo a nuestro CDN público, estaré encantado de incluirla en nuestros documentos.

Además, puede utilizar nuestra herramienta de búsqueda para encontrar inmediatamente un recurso correspondiente en el CDN público 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

Comenzamos alojando solo 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 puede sugerir sus favoritos. Si aún desea vincular a un repositorio de Github público o privado que aún no está disponible en nuestro CDN público, puede usar nuestro CDN privado para conectarse a un repositorio e importar todas las versiones nuevas a medida que aparecen en GitHub y luego aplicar su propio CDN agresivo optimizaciones antes de la entrega.

¿Qué piensas?

Todo lo que cubrimos aquí se basa únicamente en mi experiencia personal trabajando con la compresión Brotli a escala CDN. También resulta ser 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. Aún así, a esta escala, la compresión agresiva parece dar sus frutos.

Logré resultados de alta calidad para mis clientes y ahora también puede utilizar este servicio gratuito para sus sitios web. Y, si le gusta, deje sus comentarios en mi correo electrónico y recomiéndelo a otras personas.