{"id":253419,"date":"2017-04-12T05:46:25","date_gmt":"2017-04-12T12:46:25","guid":{"rendered":"http:\/\/css-tricks.com\/?p=253419"},"modified":"2019-07-04T16:46:09","modified_gmt":"2019-07-04T23:46:09","slug":"brotli-static-compression","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/brotli-static-compression\/","title":{"rendered":"Brotli and Static Compression"},"content":{"rendered":"<p>Content compression can be as simple as flipping a switch, but there&#8217;s a lot to consider beyond that. We pretty well know <em>what<\/em> we need to compress, but what about configuring compression? Or static versus dynamic compression? What about Brotli?<\/p>\n<p><!--more--><\/p>\n<p>By now, Brotli enjoys support in a good chunk of browsers in use. While it provides performance advantages in many situations, there are some ins and outs that can prove challenging. At its highest compression setting, Brotli provides superior compression ratios to gzip, but the compression speed at this setting is slow enough that the benefit is squandered when content is dynamically compressed. What you really want in cases such as these is static compression. If you&#8217;re unaware of the differences between static and dynamic compression, here&#8217;s a quick refresher: <\/p>\n<ul>\n<li><strong>Dynamic compression<\/strong> occurs on-the-fly. The user makes a request, the content is compressed (as the user waits) and the compressed content is served.<\/li>\n<li><strong>Static compression<\/strong> is when assets are compressed on the disk ahead of the user&#8217;s request. When the user requests an asset, compression doesn&#8217;t happen. The pre-compressed asset is simply served from the disk.<\/li>\n<\/ul>\n<p>The big issue with dynamic compression is that the server can&#8217;t reply to the pending content request until the compression is done. This is no big deal at default compression levels. If you&#8217;re cranking up the compression level to shrink assets as much as possible, though, it can hold up the show while the server waits for the compressor to finish. Even if you realize significantly lower file sizes, the delay of dynamic compression may end up being a performance liability.<\/p>\n<p>The answer to this problem is, predictably, static compression, a concept which is no stranger to tech bloggers. In this short article, you&#8217;ll get to learn about setting up your site to statically compress files for optimal compression performance, and see real world results of this powerful technique.<\/p>\n<h3>How do I statically compress content?<\/h3>\n<p>How you use static compression depends on which web server you use. <a href=\"https:\/\/www.voorhoede.nl\/en\/blog\/static-site-implosion-with-brotli-and-gzip\/\" rel=\"noopener\">As this blogger points out<\/a>, Nginx has static compression capability for Brotli is built right in. If you use <a href=\"https:\/\/expressjs.com\/\" rel=\"noopener\">Express<\/a>, the <a href=\"https:\/\/www.npmjs.com\/package\/shrink-ray\" rel=\"noopener\">shrink-ray node module<\/a> will provide this benefit through its own caching mechanism.<\/p>\n<p>With other servers like Apache, however, it may not be so simple. <a href=\"https:\/\/github.com\/kjdev\/apache-mod-brotli\" rel=\"noopener\">Apache&#8217;s unofficial <code>mod_brotli<\/code> module<\/a> (and even its official <code>mod_deflate<\/code> module for gzip) doesn&#8217;t provide static compression functionality. You don&#8217;t necessarily need a server module to accomplish this goal, though. You can statically compress assets on the disk beforehand, and then configure the server to serve those pre-compressed assets from the disk using <code>mod_rewrite<\/code>.<\/p>\n<p>So what do you use to pre-compress assets? You could manually do it using a binary in bash, but automating that work with gulp is much more convenient. Let&#8217;s say you want to pre-compress all HTML, CSS, JavaScript and SVG images in a project and spit them out into a different folder:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">const brotliCompress = () =&gt; {\r\n    let src  = \"src\/**\/*.{html,js,css,svg}\",\r\n        dest = \"dist\";\r\n\r\n    return gulp.src(src)\r\n        .pipe(brotli.compress({\r\n            extension: \"br\",\r\n            quality: 11\r\n        }))\r\n        .pipe(gulp.dest(dest));\r\n};\r\n\r\nexports.brotliCompress = brotliCompress;<\/code><\/pre>\n<p>The <code>brotliCompress<\/code> task is then invoked like this:<\/p>\n<pre rel=\"Command Line\"><code>gulp brotliCompress<\/code><\/pre>\n<p>This will process all the assets matched by the file glob (specified in the <code>src<\/code> variable) and output Brotli compressed versions to the destination directory (specified in the <code>dest<\/code> variable). <code>styles.css<\/code> will be compressed to <code>styles.css.br<\/code>, <code>scripts.js<\/code> will be <code>scripts.js.br<\/code> and et cetera. Best of all, the quality setting of 11 yields the best possible compression ratio. It&#8217;s also possible for you to generate pre-compressed gzip assets to serve to browsers that don&#8217;t support Brotli with gulp-gzip. Its syntax is largely similar to gulp-brotli, and you can use a level setting of 9 to max out your gains from that compression method as well.<\/p>\n<p>So what&#8217;s the next piece? This is where a bit of Apache configuration knowledge comes in handy. <a href=\"https:\/\/lyncd.com\/2015\/11\/brotli-support-apache\/\" rel=\"noopener\">This blogger&#8217;s technique<\/a> works magnificently:<\/p>\n<pre rel=\"Brotli Configuration\"><code class=\"language-markup\"># Specify Brotli-encoded assets\r\n&lt;Files *.js.br&gt;\r\n    AddType \"text\/javascript\" .br\r\n    AddEncoding br .br\r\n&lt;\/Files&gt;\r\n&lt;Files *.css.br&gt;\r\n    AddType \"text\/css\" .br\r\n    AddEncoding br .br\r\n&lt;\/Files&gt;\r\n&lt;Files *.svg.br&gt;\r\n    AddType \"image\/svg+xml\" .br\r\n    AddEncoding br .br\r\n&lt;\/Files&gt;\r\n&lt;Files *.html.br&gt;\r\n    AddType \"text\/html\" .br\r\n    AddEncoding br .br\r\n&lt;\/Files&gt;<\/code><\/pre>\n<p>You can also specify gzip-encoded versions for those browsers that can&#8217;t understand Brotli encoding:<\/p>\n<pre rel=\"Brotli Configuration\"><code class=\"language-markup\"># Specify gzip-encoded assets\r\n&lt;Files *.js.gz&gt;\r\n    AddType \"text\/javascript\" .gz\r\n    AddEncoding gz .gz\r\n&lt;\/Files&gt;\r\n&lt;Files *.css.gz&gt;\r\n    AddType \"text\/css\" .gz\r\n    AddEncoding gz .gz\r\n&lt;\/Files&gt;\r\n&lt;Files *.svg.gz&gt;\r\n    AddType \"image\/svg+xml\" .gz\r\n    AddEncoding gz .gz\r\n&lt;\/Files&gt;\r\n&lt;Files *.html.gz&gt;\r\n    AddType \"text\/html\" .gz\r\n    AddEncoding gz .gz\r\n&lt;\/Files&gt;<\/code><\/pre>\n<p>From here, you need a couple <code>mod_rewrite<\/code> rules to detect what encodings are available in the browser&#8217;s <code>Accept-Encoding<\/code> request header and then serve the appropriately encoded asset to the user:<\/p>\n<pre rel=\"HTAccess\"><code class=\"language-javascript\"># Turn on mod_rewrite\r\nRewriteEngine On\r\n\r\n# Serve pre-compressed Brotli assets\r\nRewriteCond %{HTTP:Accept-Encoding} br\r\nRewriteCond %{REQUEST_FILENAME}.br -f\r\nRewriteRule ^(.*)$ $1.br [L]\r\n\r\n# Serve pre-compressed gzip assets\r\nRewriteCond %{HTTP:Accept-Encoding} gzip\r\nRewriteCond %{REQUEST_FILENAME}.gz -f\r\nRewriteRule ^(.*)$ $1.gz [L]<\/code><\/pre>\n<p>With these rules, the browser will serve pre-compressed Brotli content to browsers that specify it in their <code>Accept-Encoding<\/code> request headers. Other browsers will get statically compressed gzip versions. That&#8217;s it. You just learned how to serve statically compressed assets to users in a browser that doesn&#8217;t support it.<\/p>\n<h3>How does this affect performance?<\/h3>\n<p>As you might guess, taking the cost of on-the-fly compression out of the equation confers a performance benefit for the user. To test this out, I deployed this change to a client&#8217;s static site and ran some tests. This site was roughly ~900 KB in total size with a number of stylesheets and scripts (including a sizable CSS\/JS framework), some SVG images and some decently sized HTML. Using <a href=\"https:\/\/www.sitespeed.io\/\" rel=\"noopener\">sitespeed.io<\/a>, I ran 50 iterations on each of four scenarios:<\/p>\n<ol>\n<li>Dynamic Brotli compression with a <code>quality<\/code> setting of <code>11<\/code>.<\/li>\n<li>Static Brotli compression (with the same <code>quality<\/code> setting).<\/li>\n<li>Dynamic gzip compression with a <code>level<\/code> setting of <code>9<\/code>.<\/li>\n<li>Static gzip compression (with the same <code>level<\/code> setting).<\/li>\n<\/ol>\n<p>The effects on back end time were quite noticeable:<\/p>\n<figure id=\"post-253423\" class=\"align-none media-253423\"><img decoding=\"async\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2017\/04\/back-end-time.svg\" alt=\"\" \/><figcaption>Comparison of back end times of various compression method<\/figcaption><\/figure>\n<p>Here we see that dynamic Brotli compression at the highest compression level is very slow, (<a href=\"https:\/\/blog.cloudflare.com\/results-experimenting-brotli\/\" rel=\"noopener\">which has been noted<\/a> <a href=\"https:\/\/next.smashingmagazine.com\/2016\/10\/next-generation-server-compression-with-brotli\/\" rel=\"noopener\">in a few write-ups<\/a>). When we <em>pre<\/em>-compress assets with Brotli, though, we&#8217;re getting the full benefit of the smallest possible file sizes, but without the penalty of dynamic compression that comes at highest level. The differences between dynamic and static compression using gzip are less dramatic, but notable. On the average, static compression is beneficial to reducing back end time. If it&#8217;s one thing we know, it&#8217;s this: If we can reduce back end time, we reduce almost every metric that occurs after it. Reduce back end time where you can, and you&#8217;ll improve overall responsiveness.<\/p>\n<h3>Caveats and Conclusion<\/h3>\n<p>Static compression is ideal, but it&#8217;s not for every situation. For example, what about dynamic content? Any page generated by a back end language (e.g., PHP or C#) falls under this category. That kind of content is not a candidate for static compression. In this case, you have to accept that static compression just isn&#8217;t an option. What you <em>can<\/em> do, however, is use a sensible dynamic compression configuration for compressing dynamic content. Using Brotli or gzip default compression levels should yield a performance benefit without adversely affecting your site&#8217;s time to first byte.<\/p>\n<p>What about <a href=\"http:\/\/breachattack.com\" rel=\"noopener\">BREACH attacks<\/a>? Compressed content is vulnerable to this exploit over HTTPS, but the key here is that the BREACH exploit is only problematic for content containing personally identifying information. In this case, you might stick with leaving your HTML content uncompressed, but compress other kinds of content that don&#8217;t contain sensitive information. It&#8217;s a workable compromise, <a href=\"http:\/\/breachattack.com\/#mitigations\" rel=\"noopener\">but there are other mitigation methods out there<\/a>.<\/p>\n<p>Beyond these scenarios (and potentially the upkeep of compressed assets in your workflow), there&#8217;s very little reason not to adopt static compression. Even if your web server of choice doesn&#8217;t support it, it&#8217;s still feasible to implement. Give your site a boost and try it out today!<\/p>\n<hr>\n<div class=\"explanation\" style=\"overflow: hidden;\">\n<img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/08\/Wagner-WebP-MAP-HI.jpg?ssl=1\" alt=\"Cover of Web Performance in Action\" style=\"float: left; margin: 0 20px 2px 0; max-width: 180px;\" data-recalc-dims=\"1\"><\/p>\n<p><a href=\"https:\/\/jeremywagner.me\" rel=\"noopener\">Jeremy Wagner<\/a> is the author of <a href=\"https:\/\/manning.com\/books\/web-performance-in-action?a_aid=webopt&#038;a_bid=63c31090\" rel=\"noopener\">Web Performance in Action<\/a>, an upcoming title from Manning Publications. Use coupon code <code>sswagner<\/code> to save 42%.<\/p>\n<p>Check him out on Twitter: <a href=\"https:\/\/twitter.com\/malchata\" rel=\"noopener\">@malchata<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Content compression can be as simple as flipping a switch, but there&#8217;s a lot to consider beyond that. We pretty well know what we need to compress, but what about configuring compression? Or static versus dynamic compression? What about Brotli?<\/p>\n","protected":false},"author":244821,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[1208,592],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":311500,"url":"https:\/\/css-tricks.com\/how-i-used-brotli-to-get-even-smaller-css-and-javascript-files-at-cdn-scale\/","url_meta":{"origin":253419,"position":0},"title":"How I Used Brotli to Get Even Smaller CSS and JavaScript Files at CDN Scale","date":"June 5, 2020","format":false,"excerpt":"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, Brotli is actually very economical and saves cost on many fronts, especially when compared with gzip or lower compression levels of Brotli.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/brotli-css.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":307844,"url":"https:\/\/css-tricks.com\/real-world-effectiveness-of-brotli\/","url_meta":{"origin":253419,"position":1},"title":"Real-World Effectiveness of Brotli","date":"April 30, 2020","format":false,"excerpt":"Harry Roberts: The numbers so far show that the difference between no compression and Gzip are vast, whereas the difference between Gzip and Brotli are far more modest. This suggests that while the\u00a0nothing to Gzip\u00a0gains will be noticeable, the upgrade from Gzip to Brotli might perhaps be less impressive. The\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/brotli.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351259,"url":"https:\/\/css-tricks.com\/improve-largest-contentful-paint-lcp-on-your-website-with-ease\/","url_meta":{"origin":253419,"position":2},"title":"Improve Largest Contentful Paint (LCP) on Your Website With Ease","date":"September 9, 2021","format":false,"excerpt":"Optimizing the user experience you offer on your website is essential for the success of any online business. Google does use different user experience-related metrics to rank web pages for SEO and has continued to provide multiple tools to measure and improve web performance. In its recent attempt to simplify\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/LCP-Blog-Banner.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":249250,"url":"https:\/\/css-tricks.com\/front-end-performance-checklist-2017\/","url_meta":{"origin":253419,"position":3},"title":"Front-End Performance Checklist 2017","date":"December 23, 2016","format":false,"excerpt":"Vitaly Friedman's list includes a \"Quick Wins\" section with the web performance things that can't be ignored. If you aren't setting caching headers on assets, optimizing images, and gzipping, you're leaving some huge and easy performance gains on the table. After you've covered those, then you can dig into Brotli,\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":256704,"url":"https:\/\/css-tricks.com\/musings-on-http2-and-bundling\/","url_meta":{"origin":253419,"position":4},"title":"Musings on HTTP\/2 and Bundling","date":"July 17, 2017","format":false,"excerpt":"HTTP\/2 has been one of my areas of interest. In fact, I've written a few articles about it just in the last year. In one of those articles I made this unchecked assertion: If the user is on HTTP\/2: You'll serve more and smaller assets. You\u2019ll avoid stuff like image\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":257561,"url":"https:\/\/css-tricks.com\/combine-transparency-png-compression-jpg\/","url_meta":{"origin":253419,"position":5},"title":"&#8220;Combine the transparency of a PNG with the compression of a JPG&#8221;","date":"August 10, 2017","format":false,"excerpt":"JPG doesn't support alpha transparency. PNGs that do support alpha transparency don't compress nearly as well as JPG. SVG has masks and clipping paths, which we can use to our advantage here. Drag and drop tool by Shaw to help do the trick. It produces an SVG containing a mask\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/253419"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/244821"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=253419"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/253419\/revisions"}],"predecessor-version":[{"id":292478,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/253419\/revisions\/292478"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=253419"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=253419"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=253419"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}