HTTP/2 – Does it improve site performance?

HTTP/2 and Plesk - improve site performance

There are only 2 groups of web developers – those who already use HTTP/2 to boost website performance and those who are getting ready to use HTTP/2 on their next project. If you’ve not yet heard about HTTP/2, you’ve lots of catching up to do. Let’s get started.

So what is HTTP/2? Is it just a marketing buzzword or is there actually more than that?

HTTP/2 is the latest version of the famous HTTP network protocol. HTTP stands for Hypertext Transfer Protocol which is used by the World Wide Web. This protocol makes it possible to distribute text and media information using so-called web links between non-connected nodes, such as a browser and a server. For instance, your browser used this protocol to load this blog article. So without HTTP, there wouldn’t be an Internet!

Before diving into the advantages of HTTP/2 and explaining why it will speed up your site, let’s first understand how data is transferred between independent systems.

HTTP/2

The network protocol HTTP

HTTP uses a client-server model. This means that your browser (Firefox, Chrome etc.) is the client and our blog application running on a hosting computer is the server. This article can be identified and loaded by a fixed Uniform Resource Locator (or short and more familiar: URL). If you open the URL of this article, your client will make an HTTP request to the server and retrieve the information in the HTML format. Once the transfer (over a transport layer, commonly TCP) was carried out, your browser renders the received HTML code response to the output that you are looking at right now!

History fact: The term “hypertext” was first used by Ted Nelson in 1965 (Xanadu Project). HTTP and HTML were invented by Tim Berners-Lee and his team at CERN in 1989. BTW, the first website was published on August 6th 1991.

The network protocol supports sessions and authentication. A session is an open sequence of request-response transactions over a TCP connection to a specific port. Port 80 is used for HTTP and 443 for HTTPS connections. HTTPS is HTTP over SSL / TLS that means that an end-to-end connection is established through an encrypted channel using Transport Layer Security (TLS) as cryptographic protocol.

HTTP/1.0 and HTTP/1.1

Before HTTP/2 was introduced as a standard, HTTP/1.1 was the official standard. HTTP/1.1 is a revision of the original HTTP/1.0 version. The original HTTP/1.0 version was officially introduced in 1996. The initial revision of HTTP/1.1 was introduced in 1997, the improved and updated revision of this version was released in 1999 and again in 2014. The main difference between both outdated standards is the support of multiple connections per request. HTTP/1.0 only supports a single connection for each resource request, whereas HTTP/1.1 allows to reuse the same connection multiple times, a persistent connection so to speak. This leads to less latency which helps to load a modern website faster. Latency is the time delay between the request (cause) and response (effect). This was improved even further in HTTP/2 but I will explain the main advantages of the new standard later!

HTTP request methods in detail

I talked about requests to the server previously. HTTP defines several request methods that can be used for different purposes and actions on the identified resource. The most common verbs (as the methods are also called) are GET and POST which should be familiar to you.

http2 headers

When you call a URL following a normal link, then your browser does a GET request. You can see GET parameters directly in the URL, e.g. ?id=42. In the example the GET variable is id and has the value 42.  When you sign into a service by putting your credentials into a form and clicking on the submit button, then your client will perform a POST request. Besides these methods, HTTP supports some other methods which are typically not used by your browser while surfing the internet. The other methods are:

  • HEAD (like GET but without response body),
  • PUT (modifies or creates resource),
  • DELETE (deletes resource),
  • TRACE (echoes request),
  • OPTIONS (returns supported HTTP methods),
  • CONNECT (converts request to a TCP/IP tunnel),
  • PATCH (applies modifications to resource).

HTTP responses and HTTP status codes

Let’s also take a brief look at the responses. The response of the server after a request does not only contain the response body, the HTML code for the output of the loaded page, but also the response header fields. These fields contain important information and parameters about the HTTP transaction in the established connection, e.g. the used encryption algorithm or cache mechanisms. For the sake of completeness I should mention that such important parameters are also send in the request in the request header fields.

http status codes

The first line of the HTTP response always contains the so-called status code that helps the client to handle the response properly. Who does not know the notorious “Server Error 500” message? Exactly, this is the status code 500 that was sent by the server due to internal problems to the browser. There are several main categories that can be recognized by the first digit:

  • 1[xx] – Informational,
  • 2[xx] – Successful,
  • 3[xx] – Redirection,
  • 4[xx] – Client Error,
  • 5[xx] – Server Error.

Advantages of HTTP/2

HTTP/2 supports most of the high-level syntax of the HTTP/1.1 revision. For instance, the request methods or the status codes are the same. The most important change was the way how data packages are framed and transported between the nodes.

The server can push data to the client even though they were not requested yet by the browser but will be required to render the page completely. Additionally requests can be multiplexed (requests or responses are combined) and pipelined (multiple requests without waiting for corresponding responses) over one single TCP connection. These improvements decrease the latency which leads to significantly better page load speed.

So, what do I need to use the HTTP/2 advantages? Both client and server have to understand and support this standard. All popular modern browsers already have HTTP/2 support fully implemented by now. Your browser will automatically load web pages over HTTP/2 if the server supports it.

How do I activate HTTP/2 on my server? Simply use Plesk!

This is really easy! As always, Plesk will do the hard work for you, while you can relax and concentrate on your business! If you have already Plesk on your server, then you are just some clicks away of supporting the modern, fast network standard.

Activate HTTP2 with Plesk

The Plesk team created the security extension Security Advisor that supports an one-click activation of HTTP/2 besides other important measures such as one-click SSL and HTTPS activation for WordPress. Open the Plesk Extension Catalog on Plesk and install the Security Advisor. The extension is completely free and will not only make your website more secure but also faster!

So long, thanks for reading and now I need to GET /coffee HTTP/2.0! 🙂

HTTP/2 & Let’s Encrypt for WordPress

Let's Encrypt & HTTP/2 for WordPress

Our web blog is now meeting the latest security standards and making it HTTP2-ready is easier than you think. Here’s how we switched our web blog ( https://devblog.plesk.com ) running on Plesk + NGINX to HTTPS and made it HTTP/2-ready with a free, SSL certificate from Let’s Encrypt. Before we get into the details a few things to start with.

Protocol enhancements like SPDY and HTTP/2 have narrowed the performance gap between encrypted and un-encrypted web traffic, with encrypted HTTP/2 outperforming un-encrypted HTTP/1.1 in some cases. Even more importantly, encryption is now kind of mandatory as Google announced that HTTPS is used as a ranking signal in search results, with HTTPS-enabled sites ranking above their plaintext counterparts. ‘Yes, HTTP/2 is awesome,’ I hear you saying, ‘but it requires HTTPS which, in turn, requires an SSL certificate – and those things cost money, you know?’ Well, here comes the sales pitch: Plesk, together with Let’s Encrypt, makes HTTPS setup a breeze and brings you a faster Web with HTTP/2.

Let’s see how we did it.

HTTPS & Let’s Encrypt

First,  issued a free trusted certificate from Let’s Encrypt with automatic renewal and set it up for devblog.plesk.com, hosted on Plesk 12.5.

There are many manuals available online talking about how to install an SSL certificate on Linux so you might have already seen rows upon rows of command line calls, lists of changes to configuration files, and even instructions for building additional utilities. Well, we decided to make our life easier and just used the Plesk “Let’s encrypt” extension that enables Plesk users to issue and install certificates with auto-renewal functionality in the Plesk UI with just a few clicks.

 

You can find the details in one of our previous blog posts here: https://www.plesk.com/2015/12/lets-encrypt-plesk/. After a few clicks we were done and had a free, trusted SSL certificate installed on devblog.plesk.com. Let’s enable HTTP/2 next.

HTTP/2

HTTP/2 is the second major version of the HTTP network protocol used by the world wide web.

Ratified in May 2015, HTTP/2 was created to address some significant performance problems with HTTP 1.1 in the modern web era.

  •  HTTP/2 is supported in NGINX web server starting from version 1.9.5.
  •  Currently, HTTP/2 is supported by all major web browsers.
  •  Your sites do not require any changes to get the HTTP/2 advantages.

Now, HTTP/2 is available out-of-the-box for all Plesk 12.5 customers!

Sounds good, doesn’t it? Let’s move on.

First, you need to make sure that the latest Plesk update, Plesk 12.5.30 Update#28, is installed. We don’t, because  we have auto-updates enabled on the server and  recommend you enable them too. Then, we logged in to the server via SSH as root, and ran the following command line utility:

#/usr/local/psa/bin/http2_pref enable

That’s all it took to empower our HTTPS sites with HTTP/2! If you’re not sure about your websites go to https://tools.keycdn.com/http2-test to check for HTTP/2 compliance. 

 

Detailed User Instructions for enabling HTTP/2 in Plesk can be found here: https://kb.plesk.com/en/128733

If you’d like to get a second opinion, you are welcome to use the “HTTP/2 and SPDY indicator” extension for Google Chrome, found here.

WordPress

We have now secured the connection between the server and the website. Next step is to configure our WordPress site to only use HTTPS. This required a re-configuration of WordPress settings to replace all http:// links inside the WordPress database with  https://. If you fail to do so you will continue to receive “Mixed content warnings” for previously uploaded content:

  1. Go to the WordPress administrative interface and change both “WordPress Address” and “Site Address” to use https://
  2. Set-up a redirect for all http:// requests to https:// for the respective website.

Screen Shot 2016-04-15 at 11.14.43

Next step was to change the links inside the WordPress database. There are a lot of possible ways to do it, starting from direct SQL queries to wp-cli. We decided to do it via the WordPress interface using the “Better Search & replace” plugin, which can either be installed from the Plesk interface or from the WordPress Administrative interface.

This plugin helped us to find all matches for “https://devblog.plesk.com” in the WordPress database and replace it with “https://devblog.plesk.com“. This plug-in allows you to only find but also find and replace if you with to do so.

Last but not least we had to redirect all http:// requests to the https:// counterpart of our blog using the Plesk interface. We went to Websites & Domains , selected devblog.plesk.com, and then “Apache and nginx Settings”

to set-up the redirect in the “Additional nginx directives” section, like this:

if ($scheme = http) {

return 301 https://$server_name$request_uri;

}

 

That’s it! Now, all browser requests to https://devblog.plesk.com are redirected with the 301 code to https://devblog.plesk.com, and that’s just what we wanted.

On a separate note…. .

Load speed test with https://www.webpagetest.org/ shows that the transition from non-SSL HTTP to HTTPS + HTTP/2 has little impact to the site load speed.

In return, we now have a secure connection with a nice green trusted SSL certificate,  including better indexing from Google for free 🙂

By the way, we did not stop with the DevBlog – actually, the new Plesk website (https://www.plesk.com – check it out!) was built on Plesk 12.5 [+ WordPress Toolkit] + WordPress.

Have a nice day 🙂