Advertisements

Will HTTP2 speed up your WordPress site

The holy grail of hosting a WordPress website is finding that plugin, server configuration or external service that would speed up your site.

There is a new concept available on how to speed up your WordPress website, It’s called HTTP/2.

What is HTTP and Why Do We Need HTTP/2?

You have heard about HTTP. Although you may now know exactly what it does, you probably use it dozens of times every day.

Every time you visit Google or torbjornzetterlund.com or WordPress.org, you use the HTTP (short for HyperText Transfer Protocol) in your browser to send a request to a web server to communicate with each other. In not too technical terms, HTTP is the language that is used by the web server and the client (browser) to communicate.

If you want to read more about it, check out the Wikipedia page.

HTTP was invented more than 25 years ago, and websites of that time didn’t have to transmit much data. Since then website technology has evolved and this website you’re reading right now is an example of how the web has progressed.

The size of your standard website has grown from a few kilobytes to easily a few megabytes. The actual number of files which make up a website has gone from just a handful to a hundred or more files.

Resulting in the size and number of files needed to run a website, exacerbated a number of limitations which the HTTP protocol had. These limitations were creating latency (or slowness) in the loading of a website.

HTTP/2 is the evolution of the HTTP protocol, which is aimed at fixing these limitations.

The Limitations of HTTP1.x

HTTP1.x has a number of limitations, which have come about due to the ever-increasing complexity and size of websites today.

If we take a look at a simple website from the early days, the whole website is made up of two files:

index(.html)
logo.gif

The HTML file consists of nearly ALL of the content of the page. The only additional resource required to display the page correctly is the logo.gif. This means that the browser has to make two connections.

Modern websites such as torbjornzetterlund.com uses frameworks such as WordPress and the home page has over fifteen different files to download to the browser.

Ther are several HTML files used for different features and functions required by WordPress and other plugins, CSS files to style the site, JS files to enable interactive functions, Imagery to beautify the site and to complement the HTML, JS and CSS files.

Third party scripts to enable functions such as Analytics, social sharing, Google AdWords and so much more.

The browser has to ask for EACH and every file mentioned in the HTML, CSS and JS files. That means it has to make hundreds of connections.

Now, creating a single connection requires significant technical overhead. Creating hundreds of connections means that this overhead is incurred hundreds of times.

Making a website fast, mostly involved two things:

To make a website fast you have to decrease the latency by combining as many of the above files into as few files as possible – thus requiring fewer requests.

Compressing and minifying the files thus reducing the size of the data being sent between the browser and the server.

HTTP/2 tries to solve these problems.

So how is HTTP/2 solving the problem of HTTP, HTTP/2 is Meant to be Readable by Machines, Not Humans. HTTP1.x was a text-based protocol, readable by humans.

HTTP/2 is a binary protocol,  this means that it is intended for communications between machines (your web server and your browser) rather than humans.

This makes communication between the server and the browser more efficient in a number of ways. In essence, it is faster to parse, it is compressible, it reduces the number of errors, and gets rid of a number of inefficiencies required for readability such as whitespace, blank lines, line endings, capitalization etc.

Learn more about HTTP/2

HTTP1.x suffers from the limitation that only one connection is allowed at a time. HTTP/2 is multiplexed,  several connections are allowed to happen at the same time.

  • HTTP2 allows for more than one connection at a time, unlike HTTP1.1, which is restricted to one connection at a time.
  • HTTP2 allows for more than one connection at a time, unlike HTTP1.1, which is restricted to one connection at a time.
  • HTTP2 Allows the Server to Send Files to the Browser That It Knows It Will Need
  • HTTP2 implements a mechanism called Server Push.

In HTTP1.x, the browser typically had to wait for an HTML file to get delivered and parse it. Once it realizes that it needs a CSS file, a JS file, and a few image files, it then had to request those files. If while parsing the resultant files, it required other files, it then had to send other requests later on.

Server Push is a mechanism where the server actually knows which files the browser will need before the browser actually asks for them. The server “pushes” those files to the browser without waiting for the browser to request them.

This makes the whole process of getting all of the resources required to display a website much faster.

HTTP2 Employs Other Optimization Techniques

HTTP2 allows what is called header compression. This is essentially a mechanism which reduces the overhead in creating the initial connection between the server and the client. This makes the time required to start a connection significantly lower, particularly on mobile devices, where the overhead is typically compounded by slow networks and the need to fetch data from multiple servers for a single website.

What are the advantages of HTTP/2

  • It is faster to create a connection between the client and the server;
  • The actual connection between a browser and a web server is more efficient hence implicitly faster;
  • Files and resources needed by the client can be transferred simultaneously rather than sequentially;
  • Files can be pushed to the web browser by the server if it thinks it’s going to need them later on – making the whole transfer time of files shorter;
  • and Initial connections have been made more efficient.

When Can I Implement HTTP2 on My Site?

HTTP2 on browsers was defined and implemented in such a way that it can gracefully degrade to HTTP1.x. Essentially, if a browser does not support HTTP2, it will fallback to using HTTP1.x. The user will be none the wiser.

However, it is starting to become unlikely that the browser of your visitor does not support HTTP2.

Major browsers such as Chrome, FireFox, Microsoft Edge, Safari, Opera and other major browsers all support HTTP2.

You can check whether your own browser supports HTTP2 using Akamai’s testing tool.

How to Implement HTTP2 On your Website?

Most major web servers such as Apache, nginx and IIS already have support for HTTP2. If your site is powered by one of these servers, this doesn’t automatically mean that your website can support HTTP2. It all depends on whether your website’s server currently has a version of the software which supports HTTP2.

You can check with the HTTP/2 Test tool whether HTTP/2 is already enabled on your website. To utilize HTTP2 requires HTTP2 to be delivered over an encrypted connection.

This means that besides having a web server which supports HTTP2, your site must also have implemented HTTPS. This means that you’ll need to acquire a secure certificate for your website and implement it.

HTTP/2 for WordPress?

HTTP/2 is independent of WordPress or any other web application. Since this is something which is implemented at the web server level, this is something which is “lower” in the stack than your WordPress website.

For WordPress, the HTTP/2 Server Push WordPress plugin allows site admins to suggest what resources can be “server pushed.” What this does is add the necessary support for pushing every enqueued script and style file.

JS and CSS files which are using the WordPress enqueue mechanism can be pushed from the web server to the browser, making full use of the HTTP/2 optimization techniques.

HTTP/2 can make your website faster, it will improve the loading times of your website significantly. That by default means that your users will have a much faster and more pleasant user experience.

Advertisements

Leave a reply:

Your email address will not be published.

Site Footer

Sliding Sidebar

Subscribe for updates

Enter your email address to subscribe to receive notifications of new content by email.

Join 5,882 other subscribers

Advertisements