[wd_asp id=1]

How to Implement Brotli Text Compression

How to Implement Brotli Text Compression

Implementing Brotli compression on your website requires a few additional steps compared to gzip compression.

Here’s a basic guide to implementing Brotli text compression:

  1. Check server compatibility: Brotli compression requires a server that supports it. Apache web servers require version 2.4.26 or later, and Nginx web servers require version 1.13.9 or later.
  2. Install Brotli compression: If your web server is compatible, you will need to install Brotli compression. This typically involves installing a Brotli compression library and enabling Brotli in your web server configuration. The specific steps will depend on your web server software and operating system.
  3. Configure Brotli settings: Once Brotli compression is installed, you can configure its settings in your web server configuration file. This includes specifying which file types to compress, the compression level, and other options.

Configuring Apache Server to Use Brotli

Here is an example configuration for Apache web servers:

# Enable Brotli compression

BrotliCompression on

BrotliCompressionLevel 11

# Compress certain types of files

AddOutputFilterByType BROTLI_COMPRESS text/plain text/html text/css application/javascript application/json application/xml

This configuration enables Brotli compression, sets the compression level to 11 (which provides the highest compression ratio but may be slower), and compresses certain types of files, including plain text, HTML, CSS, JavaScript, and JSON.

Configuring Nginx to Use Brotli

To enable Brotli compression on Nginx, you’ll need to follow these steps:

1. Install the Nginx Brotli module. Depending on your operating system, you may be able to install it through your package manager. For example, on Ubuntu, you can install it using the following command:

sudo apt-get install nginx nginx-module-brotli

2. Configure Nginx to enable Brotli compression. Here’s an example Nginx configuration file that enables Brotli compression for certain file types:

http {

    …

    brotli on;

    brotli_comp_level 6;

    brotli_types text/plain text/css application/json application/javascript application/xml;

    …

}

This configuration enables Brotli compression with a compression level of 6 (the default value is 11, but a lower value may provide better performance in some cases), and applies it to text, CSS, JSON, JavaScript, and XML files. You can adjust the list of file types as needed for your website.

3. Restart Nginx to apply the changes.

Once you’ve configured Brotli compression on Nginx, your website’s files will be served in a compressed format if the browser supports it, which can significantly reduce their size and improve page load times.

Configuring Microsoft IIS to Use Brotli

Enabling Brotli compression on Microsoft IIS requires a bit more work than on Apache or Nginx, but it can still be done fairly easily.

Here are the steps you need to follow:

  1. Download and install the Brotli compression module for IIS. You can download it from the official Brotli repository on GitHub: https://github.com/google/ngx_brotli/releases.
  2. Extract the downloaded archive and copy the contents to the appropriate location on your server. For example, if you’re using IIS 10 on Windows Server 2016, you’ll need to copy the files to the “C:\Windows\System32\inetsrv” directory.
  3. Open the IIS Manager and navigate to the “Compression” feature under the server or website you want to enable Brotli compression for.
  4. Click “Add…” under the “Dynamic Compression” or “Static Compression” section, depending on which types of files you want to compress.
  5. In the “Add Compression” dialog box, select “Brotli” from the “Encoding” dropdown menu, and make sure that the appropriate MIME types are selected. You can add custom MIME types if necessary.
  6. Click “OK” to save the changes.
  7. Repeat steps 4-6 for the other compression section (dynamic or static) if you want to enable Brotli compression for both types of files.
  8. Save the configuration changes and restart the IIS service to apply them.

Once you’ve enabled Brotli compression on IIS, your website’s files will be served in a compressed format if the browser supports it, which can significantly reduce their size and improve page load times.

Test Brotli

Test your website: Once Brotli compression is configured, you should test your website to ensure that it is working correctly. You can use tools like Google PageSpeed Insights or GTmetrix to check if Brotli compression is enabled and measure its impact on page load times.

Note: not all web browsers support Brotli compression. While all modern browsers support gzip compression, Brotli compression is supported by fewer browsers. As a result, you may want to use both gzip and Brotli compression to ensure that your website is optimised for all users.

Browsers Which Support Brotli Compression

Most modern web browsers support Brotli text compression. Here’s a list of web browsers that currently support Brotli compression:

  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge (version 15 and later)
  • Apple Safari (version 11 and later)
  • Opera (version 38 and later)

Here are some mobile browsers that support Brotli text compression:

  • Google Chrome for Android
  • Mozilla Firefox for Android
  • Samsung Internet Browser
  • Opera for Android
  • UC Browser for Android
  • Puffin Browser

Brotli support may vary depending on the version of the browser and the operating system it runs on. If you’re targeting mobile users, you should test your website on a variety of devices and browsers to ensure that it’s optimised for all users.

How to Run Brotli and GZIP on the Same Server

To run Brotli and gzip compression at the same time, you will need to configure your web server to send both types of compressed files to the browser, and the browser will choose which one to use based on its supported compression algorithms.

Here’s an example Apache configuration that enables both Brotli and gzip compression:

# Enable Brotli and gzip compression

AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/css application/javascript application/json application/xml

AddOutputFilterByType DEFLATE text/html text/plain text/css application/javascript application/json application/xml

# Set Brotli compression level

BrotliCompressionLevel 11

# Set gzip compression level

DeflateCompressionLevel 9

# Set preferred compression algorithm

AddEncoding br, gzip

This configuration enables both Brotli and gzip compression for text, HTML, CSS, JavaScript, JSON, and XML files. It also sets the compression level to the maximum level (11 for Brotli and 9 for gzip). Finally, it sets the preferred compression algorithm to Brotli, and if the browser doesn’t support Brotli, it will fall back to gzip compression.

Keep in mind that running both types of compression can increase server load, so it’s important to monitor your server’s performance and adjust your settings as needed.

This post is part of: Page Speed Optimisation: A Complete Guide — created by our Page Speed Optimisation Specialists.

In this series:

Leave a Reply

Your email address will not be published. Required fields are marked *

Share this article

In this blog, we delve into the intricacies of CRO, offering invaluable insights to marketers and business owners alike. Join...
In a world where consumers and businesses are evolving to be ever more digital (95% of startups already have digital...
Navigating the digital world can be both exciting and difficult for website owners. Web hosting is one of the important...