Configuring Nginx to Support HTTP/2 with Basic Optimization

With the rapid development of the internet, HTTP/2 has become the standard protocol for modern website optimization. Compared to HTTP/1.1, HTTP/2 introduces features such as multiplexing, header compression, and server push, which can significantly improve webpage loading speed, especially for resource-intensive websites. This article will detail how to enable HTTP/2 support on Nginx and perform some basic performance optimizations to better serve our users.

1. Advantages of HTTP/2

Before diving into the configuration, let’s briefly understand the core advantages of HTTP/2:

Multiplexing: HTTP/2 allows multiple requests and responses to be sent in parallel over a single TCP connection, reducing connection overhead.
Header Compression: Reduces bandwidth usage by compressing request and response headers using HPACK.
Server Push: The server can proactively push resources that the client may need, such as CSS or JavaScript files.
Prioritization and Dependency: HTTP/2 supports request prioritization, optimizing the order of resource loading.

These features make HTTP/2 particularly suitable for modern websites, especially those containing a large number of static resources (such as images, CSS, and JavaScript).

2. Prerequisites

Before configuring Nginx to support HTTP/2, the following conditions must be met:

Nginx Version: Nginx has supported HTTP/2 since version 1.9.5. It is recommended to use the latest stable version (this article is based on Nginx 1.24.0, released in April 2023).
SSL/TLS Certificate: HTTP/2 typically requires HTTPS, so we need a valid SSL certificate (which can be obtained for free through Let’s Encrypt).
OpenSSL Support: Nginx must use an OpenSSL version that supports ALPN (Application-Layer Protocol Negotiation) (1.0.2 or higher). Most modern systems meet this requirement by default.

3. Configuring Nginx to Support HTTP/2

Here are the specific steps to enable HTTP/2.

1. Verify Nginx Supports HTTP/2

Run the following command to check if Nginx supports HTTP/2:

nginx -V 2>&1 | grep http_v2

If the output contains http_v2_module, it indicates that HTTP/2 is supported. If not, you may need to recompile or upgrade Nginx.

2. Configure SSL Certificate

HTTP/2 is typically used with HTTPS, so you need to configure the SSL certificate. Assume our certificate files are as follows:

Certificate file: /etc/ssl/certs/yourdomain.crt
Private key file: /etc/ssl/private/yourdomain.key

3. Modify Nginx Configuration File

Edit the Nginx configuration file (usually located at /etc/nginx/nginx.conf or /etc/nginx/sites-available/yourdomain.conf). In the server block, enable HTTP/2 by simply adding the http2 parameter to the listen directive:

server {
    listen 443 ssl http2;  # Enable HTTPS and HTTP/2
    server_name yourdomain.com www.yourdomain.com;

    ssl_certificate /etc/ssl/certs/yourdomain.crt;
    ssl_certificate_key /etc/ssl/private/yourdomain.key;

    # Website root directory
    root /var/www/yourdomain;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

4. Test and Restart Nginx

After making changes, check the configuration syntax:

nginx -t

If there are no errors, restart Nginx:

systemctl restart nginx

5. Verify HTTP/2 is Active

Browser Verification: Open developer tools (F12) in Chrome or Firefox, switch to the “Network” tab, and enable the “Protocol” column. If it shows h2, it indicates that HTTP/2 is enabled.
Command Line Verification:
```
curl -I --http2 https://yourdomain.com
```
If it returns HTTP/2 200, it indicates that HTTP/2 has been successfully enabled.

4. Basic Optimization

After enabling HTTP/2, further performance optimizations can be made through the following configurations.

1. Optimize SSL/TLS Settings

Modern websites need to use secure TLS protocols and cipher suites to ensure compatibility and security. Add the following configuration:

server {
    listen 443 ssl http2;
    server_name yourdomain.com;

    ssl_certificate /etc/ssl/certs/yourdomain.crt;
    ssl_certificate_key /etc/ssl/private/yourdomain.key;

    # Optimize SSL settings
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH;
}

ssl_protocols: Only enable TLSv1.2 and TLSv1.3, disabling insecure protocols.
ssl_ciphers: Prefer high-security cipher suites.

2. Enable HSTS (HTTP Strict Transport Security)

HSTS forces clients to access via HTTPS, enhancing security:

server {
    listen 443 ssl http2;
    server_name yourdomain.com;

    # Enable HSTS
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
}

max-age=31536000: Sets the HSTS validity period to 1 year.
includeSubDomains: Applies to subdomains as well.

3. Adjust Client Request Header Buffer Size

HTTP/2 requests may contain large headers (e.g., cookies or complex request headers). Nginx version 1.24.0 and above uses large_client_header_buffers to control header size:

http {
    large_client_header_buffers 4 64k;  # 4 buffers of 64KB
}

The default value is 4 8k, and if our website has large request headers, it can be increased to 4 64k.
If headers exceed the limit, Nginx will return 400 Bad Request, and adjustments should be made based on the error logs.

4. Enable HTTP/2 Server Push (Optional)

HTTP/2 supports server push, allowing proactive pushing of resources that the client may need. For example, pushing a CSS file:

server {
    listen 443 ssl http2;
    server_name yourdomain.com;

    http2_push_preload on;  # Enable push preload
    http2_push /style.css;  # Push specific resource
}

http2_push_preload on: Enables push preload, and Nginx will push resources based on the Link header.
Note: Pushing should be used cautiously, as pushing unnecessary resources may waste bandwidth.

5. Compatibility Considerations

After enabling HTTP/2, Nginx will automatically negotiate the protocol based on client support:

Clients that support HTTP/2 (such as modern browsers) will use HTTP/2.
Clients that do not support HTTP/2 will fall back to HTTP/1.1.

To ensure compatibility, it is recommended to retain support for HTTP/1.x and add an HTTP to HTTPS redirect:

server {
    listen 80;
    server_name yourdomain.com;
    return 301 https://$host$request_uri;  # Redirect to HTTPS
}

6. Conclusion

Through the above steps, we can successfully enable HTTP/2 on Nginx and perform basic performance optimizations:

Enabling HTTP/2 enhances multiplexing and header compression capabilities.
Optimizing SSL/TLS settings and enabling HSTS enhances security.
Adjusting large_client_header_buffers ensures compatibility with large header requests.
Using server push and S3+CloudFront optimizes static resource loading.

The popularity of HTTP/2 makes website performance optimization more efficient, but care must be taken regarding compatibility and security during configuration. If our website has more complex scenarios (such as dynamic content optimization or more advanced push strategies), further adjustments can be made.