Using Gzip or Brotli for asset compressionfor Drupal 8 , 9 , 10 , and 11

Home » Performance Optimization » Using Gzip or Brotli for asset compression
Last updated :  
8.x , 9.x , 10.x , 11.x

Introduction

Continuing from our previous tutorial on avoiding unnecessary library dependencies, this lesson explores asset compression using Gzip or Brotli—powerful techniques that can drastically enhance your Drupal site's performance. Asset compression reduces file sizes of HTML, CSS, and JavaScript before they're served to users, speeding up load times significantly.

Understanding Asset Compression

Gzip and Brotli are two of the most common compression algorithms used to reduce the size of files sent from the server to the client. Both methods vastly improve page load speed by minimizing the amount of data transferred over the network.

Gzip Compression

  • Prevalence: Widely supported by all modern browsers and web servers, making it a reliable compression standard.
  • Efficiency: Compresses text-based HTTP responses, typically achieving size reductions of around 70%.
  • Implementation: Simple to enable on most servers, providing immediate performance gains.

Brotli Compression

  • Newer Technology: Offers better compression ratios compared to Gzip, particularly effective on HTTPS connections.
  • Compression Efficiency: Can compress files 15-25% more efficiently than Gzip with higher computational cost.
  • Browser Support: Supported by most modern browsers, with assurance of graceful degradation to Gzip if unavailable.

Implementing Compression in Drupal

Let's look at how you can enable asset compression on your Drupal site using either Gzip or Brotli:

  1. Gzip Configuration

    This can often be enabled in your server configuration file. Here's how to do it for Apache and Nginx servers:

    For Apache:

    
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
  AddOutputFilterByType DEFLATE application/javascript
  </IfModule>

    For Nginx:

    
gzip on;
gzip_types text/plain text/css application/javascript;
gzip_vary on;

  2. Brotli Configuration

    Brotli can be enabled similarly, but make sure it's supported by your server version:

    For Apache (with mod_brotli):

    
<IfModule mod_brotli.c>
  AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css
  AddOutputFilterByType BROTLI_COMPRESS application/javascript
  </IfModule>

    For Nginx:

    
brotli on;
brotli_types text/plain text/css application/javascript;
    brotli_comp_level 6;

Testing and Validation

  • Use Developer Tools: Browser developer tools can show the content-encoding of the HTTP response to verify compression is working.
  • Performance Testing: Employ tools such as Google Lighthouse or WebPageTest to observe improvements in load times.
  • Log Monitoring: Check server logs for errors to ensure compression is not causing issues with file delivery.

Considerations and Best Practices

  • Compatibility: Regularly check compatibility across different browsers to ensure consistent delivery.
  • Multi-Layered Approach: Use compression in combination with other performance optimizations like caching for best results.
  • Server Load: Be cautious of server load when enabling Brotli at higher compression levels, as it could affect performance.

Conclusion

Implementing Gzip or Brotli compression on your Drupal site is an effective way to enhance performance by reducing the size of files sent over the network. This improvement not only speeds up load times but also optimizes resource usage, creating a more efficient web delivery environment.

Next in the Series

In the next tutorial, we will discuss Configuring a CDN for CSS/JS/Image Delivery, a powerful method to distribute your content globally for even faster access. Stay tuned for more insights on optimizing your Drupal site!