Configure NGINX HTTP/2 server push and connection multiplexing

Verify HTTP/2 support

First, confirm your NGINX installation supports HTTP/2 and check the current version.

nginx -V 2>&1 | grep -o with-http_v2_module

You should see with-http_v2_module in the output. If not, you'll need to recompile NGINX or install a version with HTTP/2 support.

Enable HTTP/2 in server blocks

Edit your main NGINX configuration to enable HTTP/2 on your SSL-enabled virtual hosts.

server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name example.com www.example.com;
    
    ssl_certificate /etc/ssl/certs/example.com.crt;
    ssl_certificate_key /etc/ssl/private/example.com.key;
    
    # HTTP/2 push configuration
    location = /index.html {
        http2_push /css/main.css;
        http2_push /js/app.js;
        http2_push /images/logo.png;
    }
    
    root /var/www/html;
    index index.html index.htm;
}

Configure HTTP/2 connection multiplexing

Add HTTP/2 specific settings to optimize connection multiplexing and stream handling.

http {
    # HTTP/2 connection multiplexing settings
    http2_max_concurrent_streams 128;
    http2_max_requests 1000;
    http2_max_field_size 16k;
    http2_max_header_size 32k;
    
    # Enable HTTP/2 server push by default
    http2_push_preload on;
    
    # Optimize buffer sizes for HTTP/2
    client_body_buffer_size 128k;
    client_max_body_size 10m;
    client_header_buffer_size 1k;
    large_client_header_buffers 4 4k;
    
    # Enable gzip compression for HTTP/2
    gzip on;
    gzip_vary on;
    gzip_min_length 10240;
    gzip_proxied expired no-cache no-store private must-revalidate auth;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/javascript
        application/xml+rss
        application/json;
}

Configure automatic server push with preload headers

Set up automatic server push based on Link preload headers sent by your application.

server {
    listen 443 ssl http2;
    server_name example.com;
    
    # Enable automatic push based on Link headers
    http2_push_preload on;
    
    location / {
        # Add preload headers for critical resources
        add_header Link "; rel=preload; as=style" always;
        add_header Link "; rel=preload; as=script" always;
        add_header Link "; rel=preload; as=font; crossorigin" always;
        
        try_files $uri $uri/ =404;
    }
    
    # Specific push rules for landing page
    location = / {
        http2_push /css/critical.css;
        http2_push /js/critical.js;
        http2_push /images/hero.webp;
    }
}

Optimize HTTP/2 performance settings

Configure advanced HTTP/2 performance parameters for high-traffic scenarios.

http {
    # HTTP/2 performance optimization
    http2_recv_buffer_size 256k;
    http2_chunk_size 8k;
    
    # Connection keep-alive for HTTP/2
    keepalive_timeout 300s;
    keepalive_requests 10000;
    
    # Worker process optimization
    worker_processes auto;
    worker_connections 4096;
    worker_rlimit_nofile 8192;
    
    # Enable efficient file serving
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    
    # Optimize SSL for HTTP/2
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    ssl_session_tickets off;
    
    # Modern SSL configuration
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;
}

Configure conditional server push

Set up smart server push that avoids pushing resources already cached by the client.

map $http_cookie $should_push_css {
    default 1;
    "~*css-cached" 0;
}

map $http_cookie $should_push_js {
    default 1;
    "~*js-cached" 0;
}

server {
    listen 443 ssl http2;
    server_name example.com;
    
    location / {
        # Conditional push based on cookie presence
        if ($should_push_css) {
            http2_push /css/main.css;
        }
        
        if ($should_push_js) {
            http2_push /js/app.js;
        }
        
        # Set cache control headers
        location ~* \.(css|js)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
            add_header Set-Cookie "css-cached=1; Path=/; Max-Age=31536000" always;
        }
    }
}

Test configuration and reload NGINX

Validate your NGINX configuration and apply the changes.

sudo nginx -t
sudo systemctl reload nginx