{"id":311500,"date":"2020-06-05T07:49:53","date_gmt":"2020-06-05T14:49:53","guid":{"rendered":"https:\/\/css-tricks.com\/?p=311500"},"modified":"2020-06-10T05:51:17","modified_gmt":"2020-06-10T12:51:17","slug":"how-i-used-brotli-to-get-even-smaller-css-and-javascript-files-at-cdn-scale","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-i-used-brotli-to-get-even-smaller-css-and-javascript-files-at-cdn-scale\/","title":{"rendered":"How I Used Brotli to Get Even Smaller CSS and JavaScript Files at CDN Scale"},"content":{"rendered":"\n

The HBO sitcom Silicon Valley<\/em> hilariously followed Pied Piper, a team of developers with startup dreams to create a compression algorithm so powerful that high-quality streaming and file storage concerns would become a thing of the past.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In the show, Google is portrayed by the fictional company Hooli, which is after Pied Piper\u2019s intellectual property. The funny thing is that, while being far from a startup, Google does indeed have a powerful compression engine in real life called Brotli<\/a>. <\/p>\n\n\n\n

This article is about my experience using Brotli at production scale. Despite being really expensive and a truly unfeasible method for on-the-fly compression at higher compression levels, Brotli is actually very economical and saves cost on many fronts, especially when compared with gzip or lower compression levels of Brotli (which we\u2019ll get into).<\/p>\n\n\n\n\n\n\n

Brotli\u2019s beginning\u2026<\/h3>\n\n\n

In 2015, Google published a blog post<\/a> announcing Brotli and released its source code on GitHub<\/a>. The pair of developers who created Brotli also created Google\u2019s Zopfli <\/a>compression two years earlier. But where Zopfli leveraged existing compression techniques, Brotli was written from the ground-up and squarely focused on text compression to benefit static web assets, like HTML, CSS, JavaScript and even web fonts.<\/p>\n\n\n\n

At that time, I was working as a freelance website performance consultant. I was really excited for the 20-26% improvement Brotli promised<\/a> over Zopfli. Zopfli in itself is a dense implementation of the deflate compressor<\/a> compared with zlib\u2019<\/a>s standard implementation, so the claim of up to 26% was quite impressive. And what\u2019s zlib? It\u2019s essentially the same as gzip.<\/a><\/p>\n\n\n\n

So what we\u2019re looking at is the next generation of Zopfli, which is an offshoot of zlib, which is essentially gzip.<\/p>\n\n\n

A story of disappointment<\/h3>\n\n\n

It took a few months for major CDN players to support Brotli, but meanwhile it was seeing widespread adoption in tools, services, browsers and servers. However, the 26% dense compression that Brotli promised was never reflected in production.<\/strong> Some CDNs set a lower compression level internally while others<\/a> supported Brotli at origin so that they only support it if it was enabled manually at the origin<\/a>.<\/p>\n\n\n\n

Server support for Brotli was pretty good, but to achieve high compression levels, it required rolling your own pre-compression code<\/a> or using a server module to do it for you \u2014 which is not always an option, especially in the case of shared hosting services.<\/p>\n\n\n\n

This was really disappointing for me. I wanted to compress every last possible byte for my clients\u2019 websites in a drive to make them faster, but using pre-compression and allowing clients to update files on demand simultaneously was not always easy.<\/p>\n\n\n

Taking matters into my own hands<\/h3>\n\n\n

I started building my own performance optimization service for my clients.<\/p>\n\n\n\n

I had several tricks<\/a> that could significantly speed up websites. The service categorized all the optimizations in three groups consisting of several \u201cContent,\u201d \u201cDelivery,\u201d and \u201cCache\u201d optimizations. I had Brotli in mind for the content optimization part of the service for compressible resources.<\/p>\n\n\n\n

Like other compression formats, Brotli comes in different levels of power. Brotli\u2019s max level is exactly like the max volume of the guitar amps in This is Spinal Tap<\/em>: it goes to 11.<\/p>\n\n\n\n

\n