banner 728x90

Great file compression and delivery with KeyCDN and Brotli

banner 728x90


I have seen the KeyCDN name for years, mostly as a free content delivery network (CDN) for many open source JavaScript frameworks, and based on that I have always thought about them. KeyCDN recently asked me to look at one of their newest features: Brotli support. Let's take a look at Brotli compression, how KeyCDN supports Brotli and how you can start making your website faster within minutes!

Fast hits

  • KeyCDN offers a free 30-day trial period
  • KeyCDN delivers your web assets quickly and safely
  • KeyCDN has added Brotli support, allowing an even faster download of assets with less bandwidth usage
  • The Brotli support from KeyCDN is free, it is added for free!
  • KeyCDN allows you to configure zones so that different parts of your website can have different delivery settings
  • KeyCDN offers a Brotli test tool to ensure that your server supports Brotli

What is Brotli?

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

Making Brotli sources with Gulp or webpack

Popular task runners such as web pack and fly have open source libraries to generate static Brotli items. Let us use gulp-brotli to generate Brotli-compressed items for a website:

var gulp = require (& # 39; gulp & # 39;);
var gulpBrotli = require (& # 39; gulp-brotli & # 39;);

return gulp.src (& # 39; ./ src / ** / *.  & # 39; & # 39;)
.pipe (gulpBrotli.compress ())
.pipe (gulp.dest (& # 39; ./ dist & # 39;));

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

var BrotliPlugin = require (& # 39; brotli-webpack-plugin & # 39;);
module.exports = 

Making your Brotli-compressed static assets is just a small adjustment to your existing building code!

Enable Brotli on KeyCDN

KeyCDN supports the great Brotli compression format, but it is not enabled by default, so you need to take a few moments to turn it on. Click on an existing or new zone from the KeyCDN dashboard and set the "Cache Brotli" setting to "enabled:

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Great file compression and delivery with KeyCDN and Brotli

That's all you have to do within the KeyCDN panel. A requirement on your side is that your origin server must support Brotli – this allows you to set the quality setting of your Brotli assets. The mod_brotli documentation from Apache offers many short example guidelines to enable Brotli support:

# Serve brotli compressed CSS and JS files if they exist
# and the client accepts brotli.
RewriteCond "% " "br"
RewriteCond "%  . Br" "-s"
RewriteRule "^ (. *) . (Js | css)" "$ 1 . $ 2  .br" [QSA]

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

# Serve the correct coding type.
Add header Content coding br

# Force proxy's to cache brotli
# non-brotli css / js files separately.
Add header Add Vary encoding

Server configuration of Brotli is quite simple on all server platforms. KeyCDN also offers a Brotli test program to ensure that Brotli is correctly configured on your server.

View results

To ensure that your Brotli-encoded assets are displayed correctly, open each asset request in your browser's development tools and inspect its header; you should see the content-coding set to br :

gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== - Great file compression and delivery with KeyCDN and Brotli

The short time needed to configure the Brotli module of your server and then enable Brotli in KeyCDN has an immediate impact on your users, both on mobile and on desktop.

KeyCDN giveaway!

KeyCDN would like to prove how great they are: they give away two 1TB accounts to David Walsh Blog readers to give them a chance! Do you want to join? Tell me about your favorite CDN feature in the comments section below. Whether it is Brotli, geolocalized servers or any other function, give it a shout and you will participate to win!

Developers go to CDNs to make their websites faster, so it's great to see that KeyCDN offers new, advanced compression techniques with minimal developer settings and at no cost. You know how much a service is important when they insist on improving your website with edge features with little configuration and cost, and Brotli is just one of the key features of KeyCDN. If you are looking for a CDN, take a look at KeyCDN!

banner 728x90
    Build a user settings store with AWS AppSync
    Build a user settings store with AWS AppSync
    Amazon Cognito Sync is a service that
    Synchronize user settings for Android with AWS AppSync
    Synchronize user settings for Android with AWS AppSync
    Amazon Cognito Sync is a service that
    Script & Style Show: Episode 10: Dojo
    Script & Style Show: Episode 10: Dojo
    In this episode welcome David and Todd

    Leave a reply "Great file compression and delivery with KeyCDN and Brotli"

    Must read×