How to Enable HTTP2.0 in Nginx?

HTTP/2 is the latest version of the HTTP protocol, which is designed to improve website performance and security. Nginx is a popular web server that supports HTTP/2. If you're using Nginx and want to enable HTTP/2 for your website, this article will guide you through the process.

Step 1: Check Nginx Version

Before enabling HTTP/2, you should check the version of Nginx installed on your system. To do this, run the following command −

nginx -v

This command will display the version of Nginx installed on your system. If you have a version of Nginx that is 1.9.5 or later, you can enable HTTP/2. If your version of Nginx is older than 1.9.5, you will need to upgrade to a newer version.

Step 2: Enable SSL/TLS

To enable HTTP/2, you must first enable SSL/TLS on your website. HTTP/2 requires the use of SSL/TLS encryption, which provides a secure connection between the web server and the client's browser.

To enable SSL/TLS, you will need an SSL/TLS certificate. You can obtain a certificate from a trusted certificate authority (CA), or you can create a self-signed certificate for testing purposes.

Assuming you have an SSL/TLS certificate, you can add the following lines to your Nginx configuration file −

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

This configuration tells Nginx to listen on port 443 (the default HTTPS port) using SSL/TLS and HTTP/2. The ssl_certificate and ssl_certificate_key directives specify the paths to your SSL/TLS certificate and private key, respectively. Replace example.com with your domain name.

Step 3: Test Configuration and Restart Nginx

Once you have updated your Nginx configuration file, you should test the configuration to make sure there are no errors. To do this, run the following command −

nginx -t

If the configuration is valid, you should see a message indicating that the syntax is okay and that the test is successful.

Finally, restart Nginx to apply the changes −

sudo service nginx restart

Step 4: Verify HTTP/2 is Enabled

To verify that HTTP/2 is enabled on your website, you can use a browser developer tool, such as Google Chrome DevTools. Open the DevTools, go to the Network tab, and load a page from your website. In the Protocol column, you should see "h2" instead of "http/1.1", indicating that the page is being loaded using HTTP/2.

In addition to the steps outlined above, there are a few other things to keep in mind when enabling HTTP/2 in Nginx −

Enable HTTP/2 for all Server Blocks

If you have multiple server blocks in your Nginx configuration file, you should enable HTTP/2 for all of them to ensure that your entire website benefits from the performance improvements of HTTP/2. To do this, simply add the http2 parameter to the listen directive for each server block.

Optimize Your Website for HTTP/2

While HTTP/2 offers many performance benefits over HTTP/1, it's important to note that not all websites will see the same improvements. To get the most out of HTTP/2, you should optimize your website for the new protocol by −

• Minimizing the number of requests required to load a page

• Reducing the size of resources such as images, CSS, and JavaScript files

• Using server push to preload resources that are required for subsequent pages

• Enabling gzip compression for all resources

• Using a content delivery network (CDN) to cache and serve static resources

• Monitor your website's performance

After enabling HTTP/2, it's important to monitor your website's performance to ensure that it's actually benefiting from the new protocol. You can use tools such as Google PageSpeed Insights, WebPageTest, or Pingdom to measure your website's loading speed and identify any areas for improvement.

Consider using a third-party HTTP/2 Acceleration Service

If you're using a shared hosting environment or don't have control over your server configuration, you can consider using a third-party HTTP/2 acceleration service such as Cloudflare or Akamai. These services can accelerate your website's performance by optimizing resources, reducing latency, and providing additional security features.

Use the Latest Version of OpenSSL

Nginx relies on OpenSSL for SSL/TLS encryption and HTTP/2 support. To get the best performance and security, make sure you're using the latest version of OpenSSL. You can check your OpenSSL version by running the following command −

openssl version

If you have an outdated version of OpenSSL, you can upgrade it using your package manager or by compiling it from source.

Use the HTTP/2 Server Push Feature

HTTP/2 includes a new feature called server push, which allows the server to send additional resources to the client before the client requests them. This can significantly reduce the number of round trips required to load a page and improve performance. To enable server push in Nginx, you can use the http2_push directive. For example, to push a CSS file with the URL /styles.css, you can add the following line to your Nginx configuration file −

http2_push /styles.css;

Monitor Your Server's Resource Usage

Enabling HTTP/2 can increase the resource usage of your server, especially if you have a high-traffic website. Make sure to monitor your server's CPU, memory, and network usage to ensure that it can handle the increased load. You can use tools like top, htop, or sar to monitor your server's resource usage.

Enable HTTP/2 For Static Content Only

Enabling HTTP/2 for dynamic content like PHP scripts or database queries may not provide significant performance benefits. To maximize the performance benefits of HTTP/2, you should enable it only for static content like images, CSS, and JavaScript files. You can use the map directive in your Nginx configuration file to selectively enable HTTP/2 based on the request URL. For example, to enable HTTP/2 for requests with a .css file extension, you can add the following lines to your configuration file −

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

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

Enabling HTTP/2 in Nginx can provide significant performance benefits for your website. However, it's important to optimize your website for the new protocol, monitor your server's resource usage, and selectively enable HTTP/2 for static content only. By following these tips, you can ensure that your website delivers a fast and secure user experience to your visitors.

Enable HTTP/2 on all Supported Browsers

While HTTP/2 is supported on most modern web browsers, some older browsers do not support the new protocol. To ensure that your website is accessible to all visitors, you should enable HTTP/2 only for browsers that support it. You can use the if directive in your Nginx configuration file to detect the client's browser and enable HTTP/2 only if it's supported. For example, to enable HTTP/2 only for Google Chrome and Mozilla Firefox, you can add the following lines to your configuration file −

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

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

Enable Server-side Caching

HTTP/2 can significantly reduce the number of requests required to load a page, but it does not eliminate the need for caching. By enabling server-side caching, you can reduce the load on your server and improve performance even further. You can use the proxy_cache directive in your Nginx configuration file to enable caching for dynamic content. For example, to enable caching for requests with a .php file extension, you can add the following lines to your configuration file −

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

Conclusion

Enabling HTTP/2 in Nginx is a straightforward process. You need to check your Nginx version, enable SSL/TLS, update your Nginx configuration file, test the configuration, and restart Nginx. Once HTTP/2 is enabled, your website will benefit from faster page loading times, improved performance, and better security.