Awesome File Compression and Delivery with KeyCDN and Brotli

I've seen the KeyCDN name around for years, mostly as a free content delivery network (CDN) for many open source JavaScript frameworks, and based on that alone I've always thought very well of them.  KeyCDN recently asked me to check out one of their latest features:  Brotli support.  Let's take a look at Brotli compression, how KeyCDN supports Brotli, and how you can get started making your website much faster in a matter of minutes!

Quick Hits

• KeyCDN provides a 30 day free trial
• KeyCDN delivers your web assets quickly and securely
• KeyCDN has added Brotli support, allowing for even faster asset download with less bandwidth usage
• KeyCDN's Brotli support comes at no cost -- it's been added for free!
• KeyCDN lets you configure zones so different sections of your website can have different delivery settings
• KeyCDN provides a Brotli testing tool to ensure your server supports Brotli

What is Brotli?

Brotli, a newer compression algorithm created by Google, allows for better file compression and thus less bandwidth usage and faster download speeds.   Brotli brags better compression than gzip.  Brotli enjoys support in all major browsers, recently including Safari, and a variety of support from popular server software like Apache, nginx, IIS, and Node.js (via shrink-ray).  The content-encoding for Brotli stream is br, and like many new web features, Brotli is only available over HTTPS.

Creating Brotli Resources with Gulp or webpack

Popular task runners like webpack and gulp have open source libraries to generate static Brotli assets.  Let's use gulp-brotli to generate Brotli-compressed assets for a website:

var gulp   = require('gulp');
var gulpBrotli = require('gulp-brotli');
 
return gulp.src('./src/**/*.{css,js,html}'')
        .pipe(gulpBrotli.compress({
            quality: 11, // Your quality setting
            extension: 'br'
        }))
        .pipe(gulp.dest('./dist'));

The code above finds all CSS, HTML, and JavaScript assets, and generates likewise Brotli-compressed files in a given output directory.  If you prefer to use webpack, brotli-webpackplugin is your ticket:

var BrotliPlugin = require('brotli-webpack-plugin');
module.exports = {
    plugins: [
        new BrotliPlugin({
            asset: '[path].br[query]',
            test: /\.(js|css|html|svg)$/,
            threshold: 10240,
            minRatio: 0.8
        })
    ]
}

Creating your Brotli-compressed static assets is only a minor adjustment to your existing build code!

Enabling Brotli on KeyCDN

KeyCDN supports the awesome Brotli compression format but it's not enabled by default, so you'll need to take a moment to enable the feature.  Click on any existing or new zone from within the KeyCDN dashboard and set the "Cache Brotli" setting to "enabled:

That's all you need to do within the KeyCDN panel.  One requirement on your side is that your origin server must support Brotli -- this ensures you can set the quality setting of your Brotli assets.  Apache's mod_brotli documentation provides numerous short sample directives for enabling Brotli support:

<IfModule mod_headers.c>
    # Serve brotli compressed CSS and JS files if they exist
    # and the client accepts brotli.
    RewriteCond "%{HTTP:Accept-encoding}" "br"
    RewriteCond "%{REQUEST_FILENAME}\.br" "-s"
    RewriteRule "^(.*)\.(js|css)"              "$1\.$2\.br" [QSA]

    # Serve correct content types, and prevent double compression.
    RewriteRule "\.css\.br$" "-" [T=text/css,E=no-brotli:1]
    RewriteRule "\.js\.br$"  "-" [T=text/javascript,E=no-brotli:1]


    <FilesMatch "(\.js\.br|\.css\.br)$">
        # Serve correct encoding type.
        Header append Content-Encoding br

        # Force proxies to cache brotli &
        # non-brotli css/js files separately.
        Header append Vary Accept-Encoding
    </FilesMatch>
</IfModule>

Server configuration of Brotli is fairly simple on all server platforms.  KeyCDN also offers a Brotli test utility to ensure that your server has Brotli properly configured.

Seeing Results

To ensure your Brotli-encoded assets are being properly served, open any asset request within your browser's developer tools and inspect its header; you should see its content-encoding set to br:

The short time it takes to configure your server's Brotli module and then enable Brotli within KeyCDN will have an instant impact for your users, both on mobile and desktop.

KeyCDN Giveaway!

KeyCDN is keen to prove how amazing they are: they're giving away two 1TB accounts to David Walsh Blog readers to give them a shot! Want to enter? In the comments section below, tell me about your favorite CDN feature. Whether it be Brotli, geolocated servers, or another feature, give it a shout and you'll be entered to win!

Developers go to CDNs to make their websites faster, so it's great to see KeyCDN offering new, advanced compression techniques with minimal developer setup and at no cost.  You know how much a service cares when they push to make your website better using edge features with little configuration and cost, and Brotli is just one key feature provided by KeyCDN.  If you're in the market for a CDN, have a look at KeyCDN!