CDN Integration and Static File Optimization Guide

A     @        203.0.113.50    Proxied (orange cloud)
A     www      203.0.113.50    Proxied (orange cloud)
CNAME api      api.example.com  DNS only (grey cloud)

ns1.cloudflare.com
ns2.cloudflare.com

example.com/static/*
  Cache Level: Cache Everything
  Edge Cache TTL: 1 month

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

    # HTML files - no caching (always fresh)
    location ~* \.html$ {
        add_header Cache-Control "no-cache, must-revalidate";
        add_header Pragma "no-cache";
    }

    # CSS and JavaScript - long cache for versioned files
    location ~* \.(css|js)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Images
    location ~* \.(jpg|jpeg|png|gif|ico|webp|avif|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        add_header Vary "Accept-Encoding";
    }

    # Font files
    location ~* \.(woff|woff2|ttf|eot|otf)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        add_header Access-Control-Allow-Origin "*";
    }

    # API endpoints - no caching
    location /api/ {
        add_header Cache-Control "no-store, no-cache";
        proxy_pass http://localhost:3000;
    }
}

http {
    # Gzip settings
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 256;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/json
        application/javascript
        application/xml
        application/xml+rss
        image/svg+xml
        font/truetype
        font/opentype;
}

# Install Brotli module
sudo apt install libnginx-mod-brotli -y

http {
    # Brotli settings
    brotli on;
    brotli_comp_level 6;
    brotli_static on;
    brotli_types
        text/plain
        text/css
        application/json
        application/javascript
        text/xml
        application/xml
        image/svg+xml;
}

sudo nginx -t
sudo systemctl reload nginx

# Test compression
curl -H "Accept-Encoding: br" -I https://example.com
# Should show: Content-Encoding: br

# Install cwebp tool
sudo apt install webp -y

# Convert single file
cwebp -q 80 image.jpg -o image.webp

# Batch conversion
for f in /var/www/mysite/images/*.jpg; do
    cwebp -q 80 "$f" -o "${f%.jpg}.webp"
done

# Serve WebP to browsers that support it
map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

server {
    location ~* \.(jpg|jpeg|png)$ {
        add_header Vary Accept;
        try_files $uri$webp_suffix $uri =404;
    }
}

# Enable ETag (for change detection)
etag on;

# Last-Modified header
add_header Last-Modified $date_gmt;