BLOG POSTS

MangoHost Blog / How to Improve Website Performance Using Gzip and Nginx on Ubuntu 24

How to Improve Website Performance Using Gzip and Nginx on Ubuntu 24

Website performance is crucial for user experience and SEO, with page load time directly impacting bounce rates and conversion metrics. Gzip compression paired with proper Nginx configuration can reduce file sizes by 60-80%, dramatically improving load times and reducing bandwidth costs. This guide walks you through implementing Gzip compression with Nginx on Ubuntu 24, covering both basic setup and advanced optimization techniques, plus troubleshooting common deployment issues.

How Gzip Compression Works in Web Servers

Gzip compression works by using the DEFLATE algorithm to compress text-based files before sending them to browsers. When a client requests a resource, Nginx compresses the file in memory and sends the compressed version, which the browser then decompresses automatically.

The compression process happens at the HTTP level through content negotiation. The browser sends an Accept-Encoding: gzip header, and the server responds with compressed content plus a Content-Encoding: gzip header. This mechanism is supported by virtually all modern browsers and adds minimal CPU overhead on modern servers.

Here’s what typically gets compressed and the expected ratios:

Content Type	Original Size	Compressed Size	Compression Ratio
HTML	100KB	25KB	75%
CSS	50KB	12KB	76%
JavaScript	200KB	60KB	70%
JSON/XML	80KB	15KB	81%
SVG	30KB	8KB	73%

Step-by-Step Implementation Guide

Let’s get Nginx with Gzip compression running on Ubuntu 24. This assumes you have root access and basic familiarity with the command line.

Installing and Configuring Nginx

First, update your system and install Nginx:

sudo apt update
sudo apt install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx

Verify the installation by checking the status:

sudo systemctl status nginx
nginx -v

You should see Nginx running and version information. Ubuntu 24 typically ships with Nginx 1.24+ which has excellent Gzip support built-in.

Basic Gzip Configuration

Open the main Nginx configuration file:

sudo nano /etc/nginx/nginx.conf

Add this Gzip configuration block inside the http section:

# Gzip Settings
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_proxied any;
gzip_comp_level 6;
gzip_types
    application/atom+xml
    application/geo+json
    application/javascript
    application/x-javascript
    application/json
    application/ld+json
    application/manifest+json
    application/rdf+xml
    application/rss+xml
    application/xhtml+xml
    application/xml
    font/eot
    font/otf
    font/ttf
    image/svg+xml
    text/css
    text/javascript
    text/plain
    text/xml;

Test the configuration and restart Nginx:

sudo nginx -t
sudo systemctl restart nginx

Advanced Configuration Options

For production environments, you’ll want more sophisticated settings. Here’s an optimized configuration:

# Enhanced Gzip Configuration
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_proxied expired no-cache no-store private auth;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_disable "msie6";

# Static gzip files (pre-compressed)
gzip_static on;

# Extended MIME types
gzip_types
    application/atom+xml
    application/geo+json
    application/javascript
    application/x-javascript
    application/json
    application/ld+json
    application/manifest+json
    application/rdf+xml
    application/rss+xml
    application/xhtml+xml
    application/xml
    font/eot
    font/otf
    font/ttf
    font/woff
    font/woff2
    image/svg+xml
    text/css
    text/javascript
    text/plain
    text/xml
    text/x-component;

Setting Up Pre-Compression

For static files, you can pre-compress them to save CPU cycles. Install gzip and create compressed versions:

# Navigate to your web root
cd /var/www/html

# Compress CSS and JS files
find . -type f \( -name "*.css" -o -name "*.js" -o -name "*.html" \) -exec gzip -k -9 {} \;

This creates .gz versions of your files that Nginx will serve automatically when gzip_static is enabled.

Real-World Examples and Use Cases

Here are some practical scenarios where this setup shines:

High-Traffic Blog Configuration

For a WordPress or content-heavy site, create a specific server block:

server {
    listen 80;
    server_name example.com;
    root /var/www/html;
    index index.html index.htm index.php;

    # Specific Gzip for blog content
    location ~* \.(css|js|html|htm|xml|txt|json)$ {
        gzip_static on;
        gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Handle PHP files
    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.3-fpm.sock;
        gzip on;
        gzip_types text/html application/json;
    }
}

API Server Optimization

For JSON APIs, focus on response compression:

server {
    listen 80;
    server_name api.example.com;

    location /api/ {
        # Force compression for API responses
        gzip on;
        gzip_min_length 100;
        gzip_comp_level 9;
        gzip_types application/json application/xml text/plain;
        
        # Your API backend
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Static Asset Server

For serving static assets like images, CSS, and JavaScript:

server {
    listen 80;
    server_name static.example.com;
    root /var/www/static;

    # Aggressive compression for text assets
    location ~* \.(css|js|json|xml|txt)$ {
        gzip_static on;
        gzip_comp_level 9;
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }

    # Don't compress images (already compressed)
    location ~* \.(jpg|jpeg|png|gif|ico|svg|webp)$ {
        gzip off;
        expires 1y;
        add_header Cache-Control "public";
    }
}

Performance Comparison and Benchmarking

Let’s compare different compression levels and their impact:

Compression Level	File Size (KB)	Compression Time (ms)	CPU Usage	Best Use Case
Level 1	45	2	Low	High-traffic sites
Level 6 (default)	38	8	Medium	General purpose
Level 9	35	25	High	Static pre-compression

Testing Your Setup

Use these commands to verify compression is working:

# Test with curl
curl -H "Accept-Encoding: gzip" -v http://your-domain.com

# Check compression ratio
curl -H "Accept-Encoding: gzip" -s http://your-domain.com | wc -c
curl -s http://your-domain.com | wc -c

You can also use online tools like GTmetrix or Google PageSpeed Insights to verify compression is active.

Common Issues and Troubleshooting

Gzip Not Working

If compression isn’t happening, check these common culprits:

Verify the gzip on; directive is in the correct context (http, server, or location)
Check that the MIME type is included in gzip_types
Ensure files are larger than gzip_min_length (default 1024 bytes)
Confirm the client sends Accept-Encoding: gzip header

Debug by checking Nginx error logs:

sudo tail -f /var/log/nginx/error.log

Performance Issues

If you’re seeing high CPU usage:

Lower gzip_comp_level from 6 to 3 or 4
Adjust gzip_buffers – try 32 4k or 16 8k
Use gzip_static on for frequently accessed files
Consider excluding very small files with higher gzip_min_length

Browser Compatibility Problems

Some older browsers have issues with compressed content:

# Disable compression for problematic user agents
gzip_disable "msie6";

# Or more comprehensive:
gzip_disable "MSIE [1-6]\.(?!.*SV1)";

# Check for specific browser issues
if ($http_user_agent ~* "MSIE [1-6]\\.") {
    gzip off;
}

Proxy Configuration Issues

When using Nginx as a reverse proxy, ensure proper headers:

location / {
    proxy_pass http://backend;
    proxy_set_header Accept-Encoding gzip;
    proxy_set_header Host $host;
    
    # Handle upstream compression
    gzip_proxied any;
    gzip_vary on;
}

Best Practices and Security Considerations

What Not to Compress

Avoid compressing these file types as they’re already compressed or may cause issues:

Images: JPEG, PNG, GIF, WebP
Videos: MP4, WebM, AVI
Archives: ZIP, RAR, 7Z
Already compressed: PDF, DOC, fonts (WOFF/WOFF2)

# Explicitly disable compression for these
location ~* \.(jpg|jpeg|png|gif|ico|pdf|zip|tar|gz|rar|bz2|doc|xls|exe|ppt|mov|avi|wmv|mp3|mp4|woff|woff2)$ {
    gzip off;
    expires 1y;
}

Security Considerations

Be aware of potential security issues:

BREACH attack: Avoid compressing responses containing user secrets and user input together
Set appropriate gzip_vary on to prevent cache poisoning
Monitor compression ratios – unusual ratios might indicate injection attacks

Monitoring and Maintenance

Set up monitoring for compression effectiveness:

# Add to your log format
log_format compression '$remote_addr - $remote_user [$time_local] '
                      '"$request" $status $bytes_sent '
                      '"$http_referer" "$http_user_agent" "$gzip_ratio"';

access_log /var/log/nginx/access.log compression;

This logs the compression ratio for each request, helping you optimize your configuration.

Load Balancing Considerations

When using multiple servers, ensure consistent compression:

upstream backend {
    server 192.168.1.10:80;
    server 192.168.1.11:80;
}

server {
    location / {
        proxy_pass http://backend;
        
        # Compress at the load balancer level
        gzip on;
        gzip_proxied any;
        gzip_types text/html application/json;
    }
}

Alternative Compression Methods

While Gzip is widely supported, newer compression algorithms offer better ratios:

Algorithm	Compression Ratio	Speed	Browser Support	Nginx Module
Gzip	Good	Fast	Universal	Built-in
Brotli	Excellent	Medium	95%+	ngx_brotli
Zstd	Excellent	Very Fast	Limited	Third-party

For Brotli support on Ubuntu 24, you can install the module:

sudo apt install nginx-module-brotli
echo 'load_module modules/ngx_http_brotli_filter_module.so;' | sudo tee -a /etc/nginx/nginx.conf

The combination of Gzip compression and proper Nginx configuration on Ubuntu 24 provides significant performance improvements with minimal server overhead. Regular monitoring and tuning based on your specific traffic patterns will help you get the most out of this setup. For additional optimization techniques, check the official Nginx Gzip documentation and consider implementing Google’s performance optimization guidelines.

This article incorporates information and material from various online sources. We acknowledge and appreciate the work of all original authors, publishers, and websites. While every effort has been made to appropriately credit the source material, any unintentional oversight or omission does not constitute a copyright infringement. All trademarks, logos, and images mentioned are the property of their respective owners. If you believe that any content used in this article infringes upon your copyright, please contact us immediately for review and prompt action.

This article is intended for informational and educational purposes only and does not infringe on the rights of the copyright owners. If any copyrighted material has been used without proper credit or in violation of copyright laws, it is unintentional and we will rectify it promptly upon notification. Please note that the republishing, redistribution, or reproduction of part or all of the contents in any form is prohibited without express written permission from the author and website owner. For permissions or further inquiries, please contact us.