Posted on
• Web Development

Compressing assets with Brotli or gzip

Author
  • User
    Linux Bash
    Posts by this author
    Posts by this author

Compressing Assets with Brotli and Gzip: A Comprehensive Guide for Web Developers

As web developers, one of our primary goals is to ensure that our websites load quickly and smoothly. Efficient web performance not only enhances user experience but also positively impacts search engine ranking. One effective way to improve page load times is by compressing your website’s assets. This blog post provides a comprehensive guide to using Brotli and gzip, two of the most powerful compression methods, to optimize your web assets directly from the Linux Bash.

Understanding Compression: Brotli vs. Gzip

Before diving into the technical how-tos, let’s clarify what Brotli and gzip are and why they matter. Both are data compression algorithms used to reduce the size of files, which in turn decreases the amount of data transferred between the server and the client, leading to faster loading times.

Gzip, developed in the early 90s, uses the DEFLATE algorithm and has been a standard approach for many years. It delivers good compression and is universally supported by all browsers.

Brotli, a newer compression algorithm created by Google, often provides better compression ratios than gzip. It is particularly effective for text compression, making it ideal for HTML, CSS, and JavaScript. Most modern browsers support Brotli, allowing developers to leverage its advantages for users on updated systems.

How to Compress with Gzip and Brotli in Linux Bash

To use Brotli and gzip, you need to have them installed on your Linux server. Here’s a step-by-step guide to performing compression with these tools.

Installing Brotli and Gzip

Most Linux distributions come with gzip installed. To check if gzip is installed and to install Brotli, you can use the following commands:

For Ubuntu:

gzip --version
sudo apt-get update
sudo apt-get install brotli

For Fedora, RHEL, or CentOS:

gzip --version
sudo dnf install brotli

For openSUSE:

gzip --version
sudo zypper install brotli

Compressing Files

To compress a file using gzip or Brotli, you can use the following commands:

# Gzip Compression
gzip -k originalfile.js

# Brotli Compression
brotli -k originalfile.js

The -k flag tells the tool to keep the original file. The outputs are originalfile.js.gz for gzip and originalfile.js.br for Brotli.

Compressing Web Assets in Bulk

When preparing a website, you likely need to compress multiple files. Here’s how to compress all CSS and JavaScript files in your project directory:

# Gzip Compression
find ./ -type f \( -name '*.css' -o -name '*.js' \) -exec gzip -k {} \;

# Brotli Compression
find ./ -type f \( -name '*.css' -o -name '*.js' \) -exec brotli -k {} \;

This command recursively finds all CSS and JavaScript files and compresses them.

Automation with Shell Script

To facilitate the process, especially during development, you can create a simple shell script to automate compression tasks:

Create a file named compress_assets.sh and add the following:

#!/bin/bash
echo "Starting compression..."

# Compress CSS and JS files with Gzip
find ./ -type f \( -name '*.css' -o -name '*.js' \) -exec gzip -k {} \;
echo "Gzip compression completed."

# Compress CSS and JS files with Brotli
find ./ -type f \( -name '*.css' -o -name '*.js' \) -exec brotli -k {} \;
echo "Brotli compression completed."

echo "All assets compressed."

Make the script executable:

chmod +x compress_assets.sh

Now, by running ./compress_assets.sh, all your CSS and JavaScript files will be compressed both with gzip and Brotli.

Best Practices and Considerations

  • Choose the Right Tool for the Right Task: Use gzip for older compatibility, and Brotli for serving modern, text-based assets.

  • Testing: Always test your website with compressed assets. Occasionally, compression can lead to issues in how files are loaded or executed.

  • Conditional Serving: Configure your webserver to serve .br or .gz files based on the client's browser support. This typically involves setting up modules and rules in your server configuration files (e.g., .htaccess for Apache or nginx.conf for Nginx).

Conclusion

Compressing your web assets is a crucial task in optimizing your website’s performance. With the tools and techniques discussed in this guide, you can efficiently implement asset compression using gzip and Brotli on your Linux server. Embrace these tools to make your websites faster, providing a better user experience, and enhancing your SEO efforts. Happy coding!

Further Reading

For further reading and resources related to compressing assets with Brotli and gzip, consider the following:

These resources provide comprehensive insights and practical knowledge to help enhance your understanding of web asset compression.

Related posts