How to optimize static resources in Nginx? What are the optimization strategies?

How to optimize static resources in Nginx? What are the optimization strategies?

Nginx excels at serving static resources. Through proper configuration, you can significantly improve the loading speed and user experience of static resources.

Enable Efficient File Transfer:

nginx
http {
    # Enable sendfile
    sendfile on;
    
    # Enable tcp_nopush
    tcp_nopush on;
    
    # Enable tcp_nodelay
    tcp_nodelay on;
    
    server {
        listen 80;
        server_name example.com;
        
        root /var/www/html;
        
        location / {
            try_files $uri $uri/ =404;
        }
    }
}

Gzip Compression:

nginx
http {
    # Enable Gzip
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain text/css text/xml text/javascript 
               application/json application/javascript 
               application/xml+rss application/rss+xml 
               application/atom+xml image/svg+xml;
    gzip_disable "msie6";
    
    # Static resource pre-compression
    gzip_static on;
    
    server {
        listen 80;
        server_name example.com;
        
        root /var/www/html;
        
        location / {
            try_files $uri $uri/ =404;
        }
    }
}

Browser Caching:

nginx
server {
    listen 80;
    server_name example.com;
    
    root /var/www/html;
    
    # Long-term cache for static resources
    location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }
    
    # Short-term cache for HTML files
    location ~* \.html$ {
        expires 1h;
        add_header Cache-Control "public, must-revalidate";
    }
    
    # No cache for dynamic content
    location ~* \.php$ {
        expires off;
        add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0";
    }
    
    location / {
        try_files $uri $uri/ =404;
    }
}

File Caching:

nginx
http {
    # Open file cache
    open_file_cache max=100000 inactive=20s;
    open_file_cache_valid 30s;
    open_file_cache_min_uses 2;
    open_file_cache_errors on;
    
    server {
        listen 80;
        server_name example.com;
        
        root /var/www/html;
        
        location / {
            try_files $uri $uri/ =404;
        }
    }
}

Static Resource Separation:

nginx
server {
    listen 80;
    server_name example.com;
    
    # Main site
    location / {
        root /var/www/html;
        try_files $uri $uri/ =404;
    }
    
    # Static resources
    location /static/ {
        root /var/www/static;
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }
    
    # Image resources
    location /images/ {
        root /var/www/images;
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }
    
    # Font files
    location /fonts/ {
        root /var/www/fonts;
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
        add_header Access-Control-Allow-Origin *;
    }
}

CDN Integration:

nginx
server {
    listen 80;
    server_name example.com;
    
    root /var/www/html;
    
    # Rewrite static resource URLs to CDN
    location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2)$ {
        return 301 https://cdn.example.com$request_uri;
    }
    
    location / {
        try_files $uri $uri/ =404;
    }
}

Image Optimization:

nginx
server {
    listen 80;
    server_name example.com;
    
    root /var/www/html;
    
    # Image caching
    location ~* \.(jpg|jpeg|png|gif|ico|svg|webp)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
        
        # WebP support
        if ($http_accept ~* "webp") {
            rewrite ^(.+)\.(jpg|png)$ $1.webp last;
        }
    }
    
    # Image hotlinking protection
    location ~* \.(jpg|jpeg|png|gif)$ {
        valid_referers none blocked example.com *.example.com;
        if ($invalid_referer) {
            return 403;
        }
    }
    
    location / {
        try_files $uri $uri/ =404;
    }
}

Font File Optimization:

nginx
server {
    listen 80;
    server_name example.com;
    
    root /var/www/html;
    
    # Font files
    location ~* \.(woff|woff2|ttf|otf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
        
        # CORS support
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "GET, OPTIONS";
        add_header Access-Control-Allow-Headers "Origin, Content-Type";
    }
    
    location / {
        try_files $uri $uri/ =404;
    }
}

Static Resource Preloading:

nginx
server {
    listen 80;
    server_name example.com;
    
    root /var/www/html;
    
    location = / {
        add_header Link "</style.css>; rel=preload; as=style, </script.js>; rel=preload; as=script, </image.jpg>; rel=preload; as=image";
        try_files $uri $uri/ =404;
    }
    
    location / {
        try_files $uri $uri/ =404;
    }
}

HTTP/2 Push:

nginx
server {
    listen 443 ssl http2;
    server_name example.com;
    
    ssl_certificate /etc/nginx/ssl/example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/example.com.key;
    
    root /var/www/html;
    
    # HTTP/2 push
    location = / {
        http2_push /style.css;
        http2_push /script.js;
        http2_push /image.jpg;
        
        try_files $uri $uri/ =404;
    }
    
    location / {
        try_files $uri $uri/ =404;
    }
}

Static Resource Concatenation:

nginx
# Use third-party module ngx_http_concat_module
server {
    listen 80;
    server_name example.com;
    
    root /var/www/html;
    
    # CSS concatenation
    location /static/css/ {
        concat on;
        concat_types text/css;
        concat_unique on;
        concat_max_files 10;
    }
    
    # JS concatenation
    location /static/js/ {
        concat on;
        concat_types application/javascript;
        concat_unique on;
        concat_max_files 10;
    }
    
    location / {
        try_files $uri $uri/ =404;
    }
}

Complete Static Resource Optimization Configuration:

nginx
user nginx;
worker_processes auto;
worker_rlimit_nofile 65535;

events {
    worker_connections 10240;
    use epoll;
    multi_accept on;
}

http {
    # Basic optimization
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    
    # Gzip compression
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain text/css text/xml text/javascript 
               application/json application/javascript 
               application/xml+rss application/rss+xml 
               application/atom+xml image/svg+xml;
    gzip_disable "msie6";
    gzip_static on;
    
    # File cache
    open_file_cache max=100000 inactive=20s;
    open_file_cache_valid 30s;
    open_file_cache_min_uses 2;
    open_file_cache_errors on;
    
    # Long-term cache for static resources
    map $sent_http_content_type $expires {
        default off;
        text/html 1h;
        text/css 1y;
        application/javascript 1y;
        ~image/ 1y;
        ~font/ 1y;
    }
    
    server {
        listen 80;
        server_name example.com;
        
        root /var/www/html;
        index index.html;
        
        # Static resource optimization
        location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg|woff|woff2|ttf|eot)$ {
            expires $expires;
            add_header Cache-Control "public, immutable";
            access_log off;
        }
        
        # Font file CORS
        location ~* \.(woff|woff2|ttf|otf|eot)$ {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods "GET, OPTIONS";
            add_header Access-Control-Allow-Headers "Origin, Content-Type";
        }
        
        # Image hotlinking protection
        location ~* \.(jpg|jpeg|png|gif)$ {
            valid_referers none blocked example.com *.example.com;
            if ($invalid_referer) {
                return 403;
            }
        }
        
        # Main routing
        location / {
            try_files $uri $uri/ =404;
        }
        
        # Deny access to hidden files
        location ~ /\. {
            deny all;
            access_log off;
            log_not_found off;
        }
    }
}

Static Resource Optimization Best Practices:

1. Enable compression: Use Gzip to compress text resources
2. Reasonable caching: Set cache time based on resource type
3. Resource separation: Separate static resources to independent domains or CDN
4. Pre-compression: Use gzip_static to pre-compress static files
5. HTTP/2: Enable HTTP/2 to improve loading speed
6. Image optimization: Use WebP format, enable image compression
7. Font optimization: Use WOFF2 format, enable CORS
8. Monitor performance: Use tools like Lighthouse to monitor performance
9. Regular cleanup: Clean up unused static resources
10. Version control: Use filename hash for cache updates