CDN Integration and Static File Optimization Guide

Your website's speed is critical for user experience and SEO rankings. CDN (Content Delivery Network) and static file optimization can dramatically reduce page load times. This guide covers what CDN is, Cloudflare setup, Nginx cache configuration, and compression techniques.

What is a CDN?

A CDN (Content Delivery Network) is a network infrastructure that distributes static content (images, CSS, JavaScript, videos) to servers worldwide and serves users from the nearest server.

Benefits of CDN:

Can reduce page load times by 50-80%
Reduces load on the origin server
Provides protection against DDoS attacks
Offers low latency to global users
Reduces bandwidth costs

Cloudflare Free CDN Setup

Cloudflare offers CDN, DDoS protection, and SSL certificate on its free plan.

1. Create a Cloudflare Account

Go to cloudflare.com
Create a free account
Click "Add a Site"
Enter your domain name
Select the Free plan

2. Transfer DNS Records

Cloudflare automatically scans your existing DNS records. Verify the records:

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)

The "Proxied" (orange cloud) option routes traffic through Cloudflare, providing CDN + DDoS protection. "DNS only" (grey cloud) only performs DNS resolution.

3. Nameserver Change

Change the nameservers at your domain registrar to the values provided by Cloudflare:

ns1.cloudflare.com
ns2.cloudflare.com

4. Cloudflare Settings

SSL/TLS: Select Full (strict) mode

Caching:

Browser Cache TTL: 4 hours
Cache Level: Standard

Speed:

Auto Minify: Enable JavaScript, CSS, HTML
Brotli: Enable

Page Rules (3 rules on free plan):

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

Nginx Cache Header Configuration

Setting correct cache headers for static files in Nginx optimizes browser and CDN caching.

hljs nginx

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;
    }
}

Gzip Compression

Gzip compresses text-based files (HTML, CSS, JS), reducing transfer size by 60-80%.

hljs nginx

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;
}

Brotli Compression

Brotli offers 15-25% better compression than gzip and is supported by modern browsers.

hljs bash

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

hljs nginx

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;
}

hljs bash

sudo nginx -t
sudo systemctl reload nginx

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

Image Optimization

WebP Conversion

WebP format offers 25-35% smaller file sizes compared to JPEG and PNG.

hljs bash

# 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

Serving WebP in Nginx

hljs nginx

# 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;
    }
}

Cache-Control Header Strategy

Content Type	Cache-Control	Description
HTML	no-cache	Always fresh
CSS/JS (hashed)	public, immutable, max-age=31536000	1 year
Images	public, max-age=31536000	1 year
API responses	no-store	Never cache
User data	private, no-cache	Browser only

hljs nginx

# Enable ETag (for change detection)
etag on;

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

Use Chrome DevTools > Network tab to test cache headers. Check Cache-Control, ETag, and Age values in Response Headers.

Conclusion

CDN integration and static file optimization significantly improve your website's performance. Using Cloudflare free CDN for global distribution, Nginx cache headers for browser caching, gzip/brotli for compression, and WebP for image optimization together can dramatically reduce page load times.

CDN Integration and Static File Optimization Guide

Table of Contents