Gzip to Brotli: Better Frontend Load Performance with Simple Changes

I have selected a demo React project from GitHub for this demonstration. The set up uses AWS CloudFront configured for compression and AWS S3 for hosting with 4 simple steps.

Step 1: Create an S3 Bucket and Upload the React Bundle

As the first step, you can create an S3 bucket and upload the React bundle having index.html, CSS, and JavaScripts.

Step 2: Create an AWS CloudFront Distribution

Next, you can create an AWS CloudFront distribution using the AWS Console, as shown below.

Screenshot by Author: Create Distribution Window

There, you can select your S3 bucket as the Origin Domain Name from the drop-down. Also, keep in mind to configure Restrict Bucket Access, OAI, and Grant Read Permission on Bucket attributes as necessary. Then click on the Create Distribution button as the final step.

This step will take some time to complete. Next, select the created distribution and go to the Behaviors tab to enable the compression.

Step 3: Set Cache Policy to Brotli

You will find the default behavior, and you need to add a cache policy with Brotli compression enabled.

Creating a new Cache policy

If you keep both options ticked, CloudFront will use Brotli compression by default if your browser supports Brotli.

Step 4: Verify the Compression Results

You can verify the results by opening the application in Chrome and visiting Chrome Network Console. There you can check the Response Headers for the content-encoding attribute value. If the value is br then Brotli is in operation.

Response Header with Brotli Enabled

Please refer to my previous article on Speed Up Your Static Web Site using Gzip and CDN if you need more information about enabling static hosting or Gzip compression.

Author: admin

Leave a Reply

Your email address will not be published.