How I Used Brotli to Get Even Smaller CSS and JavaScript Files at CDN Scale

The HBO series Silicon Valley humorously depicted Pied Piper, a development team aiming to create a revolutionary compression algorithm. Their goal? To obsolete concerns about high-quality streaming and file storage. The fictional Hooli, representing Google, sought to acquire their technology. Interestingly, Google actually possesses a powerful compression engine: Brotli.

This article details my experience using Brotli in a production environment. While initially perceived as computationally expensive, especially at higher compression levels, Brotli proved remarkably cost-effective, surpassing gzip and lower Brotli settings in several key areas.

Brotli's Genesis

Google unveiled Brotli in 2015, releasing its source code on GitHub. The Brotli creators also developed Google's Zopfli compression two years prior. Unlike Zopfli, which built upon existing techniques, Brotli was designed from scratch, prioritizing text compression for static web assets (HTML, CSS, JavaScript, web fonts).

As a freelance web performance consultant at the time, I was thrilled by Brotli's promised 20-26% improvement over Zopfli (itself a highly efficient deflate compressor). This represented a significant advancement over zlib (essentially gzip).

Initial Disappointment

While Brotli gained rapid traction in tools, services, and browsers, the anticipated 26% compression wasn't consistently realized in production. Some CDNs employed lower compression levels internally, while others required manual origin-side Brotli configuration.

Server-side Brotli support was good, but achieving high compression demanded custom pre-compression code or server modules – often unavailable, particularly with shared hosting. This was frustrating; I aimed for maximum byte compression for client websites, but on-demand pre-compression alongside simultaneous file updates proved challenging.

A Self-Made Solution

I developed a performance optimization service for my clients, categorizing optimizations into "Content," "Delivery," and "Cache" groups. Brotli was integrated into the "Content" optimization.

Brotli offers adjustable compression levels (up to level 11). Level 11 provides substantial file size reduction but is extremely slow, unsuitable for on-demand compression due to high CPU overhead. My benchmarks showed Brotli:11 taking hundreds of milliseconds to compress a single minified jQuery file. Pre-compression was the only viable option, requiring server-level caching.

Despite concerns about resource consumption, I implemented Brotli:11 as a configurable server option, allowing clients to weigh the computational cost.

Gradual ROI

My service incorporates geographic content delivery (a built-in CDN). I combined public and private CDNs on a single host, leveraging shared browser caches for public resources while avoiding extra DNS lookups and connection costs. This optimized HTTP/2 multiplexing.

With Brotli:11 pre-compression enabled for all compressible assets (CSS, JavaScript, SVG, TTF, etc.), initial request overhead increased, but subsequent requests ran smoothly. Brotli's high browser support ensured widespread utilization.

Analysis revealed approximately 21% savings compared to other CDNs (some already using Brotli at lower levels). This was consistent across tested websites. The graph below illustrates the savings (CSS savings were more significant than JavaScript).

The benefits of Brotli:11 at scale were substantial:

• Reduced TLS overhead: While not easily quantifiable, smaller files encrypt faster.
• Lower bandwidth costs: The consistent 21% savings resulted in cumulative cost reduction.
• Efficient edge server caching: Smaller Brotli-compressed files maximized memory utilization.
• Improved user experience: Reduced data transfer for users, particularly mobile users, leading to better battery life and data savings.

The per-request cost savings were modest, but the near-zero cache miss rate for public resources quickly amortized the initial compression cost. The long-term benefits were significant.

Further Enhancements

Our service allows clients to use lower compression levels for frequently changing private CDN resources (custom CSS/JavaScript), automatically switching to the public CDN for less frequently updated, pre-compressed (Brotli:11) resources. This balances high compression ratios with quick purge/updates.

Our integration tools simplify this process. The public CDN offers free bandwidth and exceptional performance.

Try It Yourself!

Aggressive compression can significantly reduce page load size. Our PageCDN service provides access to a free public CDN. Here are examples of commonly used libraries:

<link crossorigin="anonymous" href="https://pagecdn.io/lib/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A KluUYx/3pK c7lYEpqLTlxjYQ=" rel="stylesheet">
<link crossorigin="anonymous" href="https://pagecdn.io/lib/ionicons/4.6.3/css/ionicons.min.css" integrity="sha256-UUDuVsOnvDZHzqNIznkKeDGtWZ/Bw9ZlW 26xqKLV7c=" rel="stylesheet">
<link crossorigin="anonymous" href="https://pagecdn.io/lib/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" rel="stylesheet">

Our PHP library and WordPress plugin seamlessly integrate with the public CDN. JavaScript, Python, and Ruby libraries are forthcoming. You can also use our search tool to find CDN equivalents for your website resources.

Future Outlook

We initially focused on popular libraries to mitigate malware risks. We continuously add new libraries based on user suggestions. For resources not yet on our public CDN, our private CDN allows linking to repositories and applying custom optimizations.

Conclusion

This article reflects my personal experience with Brotli at scale. While our service is still relatively small, aggressive compression has proven highly beneficial. The free public CDN offers similar advantages to your websites. Feedback is welcome.

The above is the detailed content of How I Used Brotli to Get Even Smaller CSS and JavaScript Files at CDN Scale. For more information, please follow other related articles on the PHP Chinese website!