How to Enable HTTP/2 on Nginx Web Server?

In the constantly developing world of web technologies, HTTP/2 can be considered as a constant evolution with regard to HTTP/1. 1.

HTTP/2 offers features like multiplexing, header compression, and server push that can make a real difference in the speed and optimization of your website.

However, the implementation of HTTP/2 in Nginx comes with several steps and factors that one needs to consider to make the best out of it.

This guide is a detailed step-by-step tutorial that not only explains how to check your NGINX version but also features working with advanced customization and performance boosting techniques.

Step-by-Step Process

Step 1: Check Nginx Version

If you are planning on enabling HTTP/2 there is something you need to ensure first and that is the version of Nginx supports it. The integration of the HTTP/2 protocol support was made possible with the release of the Nginx version 1. 9. 5.

For the server’s current version of Nginx, employ the command below:

nginx -v

For example, if the output is the nginx version: server: nginx/1. 20. 0; your version is 1. 20. 0. If your version is 1. 9. If you are using jQuery version 5 or later, you can go ahead and enable HTTP/2.

If you are using an older version then you have to update to a newer version where HTTP/2 is supported. Nginx upgrading requires you to download the latest version of Nginx from the official Nginx website or follow your OS package manager.

To finish this upgrade, please follow the installation instructions that you are supposed to follow depending on the environment you have.

Step 2: Enable SSL/TLS

HTTP/2 depends on SSL/TLS encryption to operate. This is an essential requirement since HTTP/2 is only supported over SSL/TLS encrypted connections.

To add HTTP/2 to your Nginx server, you have to configure SSL/TLS for your server first. This involves buying an SSL/TLS certificate and configuring Nginx to accept the purchased certificate.

Generally, you can obtain an SSL/TLS certificate from a well-recognized CA while for testing, you can generate a self-signed certificate. Relating to the production environment, it is advised to utilize the certificate received from the reliable CA vendor.

After obtaining your SSL/TLS certificate and private key, you need to describe SSL/TLS in the Nginx configuration file.

Navigate to your Nginx configuration file, which is normally found at /etc/nginx/nginx. con or /etc/nginx/sites-available/default, and insert the following code inside the server block:

server {
            listen 443 ssl http2;
            server_name example.com;
            ssl_certificate /path/to/ssl/certificate;
            ssl_certificate_key /path/to/ssl/private/key;

# Additional SSL/TLS Settings

            ssl_protocols TLSv1.2 TLSv1.3;
            ssl_ciphers 'ECDHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256';
            ssl_prefer_server_ciphers on;

             # Other configurations
            …
}

In This Configuration:

listen 443 ssl http2; specifies that Nginx should listen on port 443 for HTTPS traffic and use HTTP/2.
ssl_certificate and ssl_certificate_key directives point to the paths of your SSL certificate and private key files, respectively. Replace /path/to/ssl/certificate and /path/to/ssl/private/key with the actual file paths.
server_name should be replaced with your domain name.

Ensure you include appropriate SSL/TLS settings to enhance security, such as specifying the TLS protocols and ciphers.

Step 3: Test Configuration and Restart Nginx

When making changes to the Nginx configuration file, it is advisable to check syntax so that there are no problems which can cause the server to stop after applying the changes.

To test the configuration type the following command:

nginx -t

If your configuration is correct, you should receive a message, which says that the syntax is okay and now the tests have been passed.

For example:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Once the configuration test passes, restart Nginx to apply the new settings:

sudo service nginx restart

This command will restart the Nginx service, applying your updated configuration and enabling HTTP/2.

Step 4: Verify HTTP/2 is Enabled

To ensure that HTTP/2 is functioning correctly, you can use browser developer tools. For instance, in Google Chrome:

Open Google Chrome and navigate to your website.
Open Chrome DevTools by pressing Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (macOS).
Go to the Network tab.
Reload the page if necessary.
Look at the “Protocol” column in the network requests.

In the Protocol column, you should see “h2” indicating that HTTP/2 is being used. If it displays “http/1.1” there may be an issue with your configuration.

Additional Considerations

Enable HTTP/2 for All Server Blocks

In case your Nginx has multiple server blocks here, all the parts of your site should have HTTP/2 enabled in each block for the absolute benefits of HTTP/2.

All that is required is the addition of the http2 parameter within each server block instructions after the listen directive:

server {
            listen 443 ssl http2;
            server_name example.com;
            …
}

server {
            listen 443 ssl http2;
            server_name another-example.com;
            …
}

Optimize Your Website for HTTP/2

It is recommended to make some changes to your website so that you can get the most out of the HTTP/2. Here are some optimization strategies:

Minimize Requests: Minimize the number of calls made in the overall page to decrease the overall load time through the use of techniques such as file combining and many others.
Reduce Resource Sizes: Minify images, CSS and JS as a way of reducing the time that it takes to load a webpage.
Use Server Push: Make use of HTTP/2 server push in order to proactively load resources that will be useful in the subsequent page loads.
Enable Compression: You can compress resources through gzip or Brotli to decrease the size even more.
Utilize CDN: Utilize a Content Delivery Network (CDN) to minimize the costs and occasions of being dependent on the server and to organize the conveyance of static assets.

Monitor Your Website’s Performance

After enabling HTTP/2, it’s important to monitor your website’s performance to ensure it is benefiting from the new protocol. Use performance analysis tools like Google PageSpeed Insights, WebPageTest, or Pingdom to measure page load times and identify areas for improvement.

Consider Third-Party HTTP/2 Acceleration Services

If you are unfortunately hosted on a shared server or cannot make literally any modifications to your server settings then using third-party HTTP/2 acceleration services like Cloudflare or Akamai is a good way to go.

Such services can improve your website’s experience by further allocation of resources, decreasing the time of response, or adding the factors of security.

Use the Latest Version of OpenSSL

Nginx relies on OpenSSL for SSL/TLS encryption and HTTP/2 support. Ensure that you are using the latest version of OpenSSL to benefit from the best performance and security.

Check your OpenSSL version with:

openssl version

If your version is outdated, upgrade it using your package manager or by compiling from source to maintain optimal security and functionality.

Use HTTP/2 Server Push

HTTP/2 server push can significantly improve performance by sending additional resources to the client before they are requested. To enable server push in Nginx, use the http2_push directive.

For example, to push a CSS file, add the following line to your Nginx configuration:

http2_push /styles.css;

Monitor Server Resource Usage

Enabling HTTP/2 may increase the resource usage of your server, particularly if you have a high-traffic website.

Monitor your server’s CPU, memory, and network usage to ensure it can handle the increased load. Use monitoring tools such as top, htop, or sar to keep track of resource consumption.

Enable HTTP/2 for Static Content Only

For optimal performance, consider enabling HTTP/2 primarily for static content like images, CSS, and JavaScript files. HTTP/2 can be selectively enabled for specific content types using the map directive:

map $request_uri $http2_enabled {
    ~*\.css$ 1;
    ~*\.js$ 1;
    default 0;
}

server {
   listen 443 ssl http2;
   if ($http2_enabled) {
            http2_push /styles.css;
   }
   …
}

This configuration allows HTTP/2 to be enabled only for requests with specific file extensions, ensuring that dynamic content does not unnecessarily utilize HTTP/2.

Enable HTTP/2 on Supported Browsers

Since HTTP/2 is supported by most modern browsers, you might want to enable HTTP/2 only for browsers that support it.

Use the if directive in your Nginx configuration to detect the client’s browser and enable HTTP/2 accordingly:

map $http_user_agent $http2_enabled {
    default 0;
    ~*Chrome|Firefox 1;
}

server {
    listen 443 ssl;
    if ($http2_enabled) {
            listen 443 ssl http2;
    }
    …
}

This configuration enables HTTP/2 only for Chrome and Firefox, ensuring compatibility with browsers that support the protocol.

Enable Server-side Caching

Even with HTTP/2’s performance improvements, server-side caching remains crucial for optimizing website performance.

Use the proxy_cache directive to enable caching for dynamic content:

server {
   …
   location ~ \.php$ {
            proxy_cache_valid 200 5m;
            …
   }
   …
}

This configuration sets up caching for PHP files, reducing the load on your server and improving response times.

Conclusion

Ensure the security and trust of your website visitors with Certera’s industry-leading SSL certificates. Whether you’re a small business or a large enterprise, our SSL solutions provide robust encryption, seamless installation, and comprehensive support to keep your online presence safe and secure.

How to Enable HTTP/2 on Nginx?