top of page
Search

How to Compress Gzip and Brotli with Pagespeed Recommendation

  • Writer: Pradhumnya khanayat
    Pradhumnya khanayat
  • May 6
  • 3 min read

Updated: Jul 16


How to Compress gzip and brotli with pagespeed recommendation

Website speed is a critical ranking factor, and text compression is one of the most effective techniques to optimize it. As recommended by Google PageSpeed Insights, compressing text-based resources significantly enhances loading times, reduces bandwidth usage, and improves overall user experience. In this article, we will guide you through advanced methods of text compression, their implementation, and the best practices to follow to meet Google’s performance benchmarks.


What is Text Compression and Why It Matters


Text compression involves encoding content like HTML, CSS, JavaScript, and other text-based resources using algorithms to reduce their size before they are transferred over the internet. Smaller file sizes mean faster data transfer and quicker rendering by the browser.


When done properly, compression can reduce file sizes by up to 70-90%, drastically improving Core Web Vitals such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP).


Enable GZIP Compression for Effective Resource Reduction


GZIP is one of the most widely adopted compression methods. It’s supported by all major browsers and web servers and offers excellent performance with minimal configuration.


Steps to Enable GZIP:


  • Apache Server: Add the following to your .htaccess file:


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

  • Nginx Server: Edit your server block in the configuration:


gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

WordPress:Use plugins like WP Rocket, W3 Total Cache, or Autoptimize to enable GZIP without touching the code.


Switch to Brotli for Higher Compression Ratios


Brotli is a newer, more efficient compression algorithm developed by Google. It offers better compression ratios than GZIP, especially for text files.


Advantages of Brotli:

  • Up to 26% smaller than GZIP for JavaScript

  • Up to 17% smaller for HTML

  • Supported by all modern browsers


How to Enable Brotli:

  • Apache:


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

  • Nginx:


brotli on;
brotli_types text/plain text/css application/javascript application/json text/html;

  • Cloudflare:

    Brotli can be enabled directly via Cloudflare’s dashboard under Speed > Optimization


Optimize Compression with Proper Cache-Control Headers


Compression should be combined with cache-control strategies to avoid repeated server processing. Adding appropriate headers ensures that compressed files are cached efficiently.


Example Headers:

<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresByType text/css "access plus 1 year"
 ExpiresByType application/javascript "access plus 1 year"
 ExpiresByType text/html "access plus 1 month"
</IfModule>

<IfModule mod_headers.c>
 Header set Cache-Control "public"
</IfModule>

Minify Before You Compress

Before files are compressed, they should be minified to remove all unnecessary characters such as whitespaces, comments, and line breaks.


Tools to Minify Files:


WordPress Plugins for Minification:


  • Autoptimize

  • Fast Velocity Minify

  • Asset CleanUp


Minification significantly reduces the size of files, allowing compression algorithms like GZIP and Brotli to work more effectively.


Audit Compression Status with PageSpeed Insights and Lighthouse


After enabling compression, it is essential to validate whether it's active and effective.


Use These Tools:


  • Google PageSpeed Insights: Scan your URL and check the “Enable text compression” section.

  • Google Lighthouse: Run a Lighthouse audit via Chrome DevTools.

  • GTmetrix: Offers detailed breakdowns of compressed vs uncompressed assets.


Advanced Optimization Tips


Pre-compress Static Assets


For static resources that don’t change often (like CSS or JS files), pre-compress them and store the compressed versions on the server. This prevents the server from compressing the file on every request.


Use CDN Compression

Modern Content Delivery Networks (CDNs) like Cloudflare, Akamai, and KeyCDN support both GZIP and Brotli compression at edge locations. This reduces latency and speeds up delivery worldwide.


Avoid Double Compression


Ensure you don’t compress files that are already compressed. For instance, images in JPEG or PNG formats don’t benefit from GZIP and may even bloat if compressed again.


Monitor Compression Performance


Use tools like WebPageTest, Pingdom Tools, or New Relic to analyze server response and ensure compression is contributing positively to TTFB (Time to First Byte).


Troubleshooting Compression Issues


If text compression isn't working as expected:


  • Check Server Modules: Ensure mod_deflate or mod_brotli is enabled in Apache.

  • File Types: Confirm that only text-based files are targeted.

  • Proxy Interference: Ensure that reverse proxies like Varnish or load balancers aren’t stripping compression headers.

  • MIME Type Misconfigurations: Always assign the correct MIME types for files in compression settings.


Conclusion


Implementing text compression is one of the quickest wins in website performance optimization. Whether you use GZIP, Brotli, or both, make sure your setup aligns with Google PageSpeed Insights recommendations. Combined with minification, caching, and CDN integration, text compression can significantly accelerate your website and improve both SEO and user experience.

Comments

bottom of page