5 Ways to Improve Your Website’s PageSpeed Using HTTP/2

speedup-website

HyperText Transfer Protocol version 2, or HTTP/2, is the latest standard of HTTP. The updates to the protocol will improve the speed, efficiency, and security of web traffic. However, the transition isn’t automatic. This article aims to give you some insight into what HTTP/2 means to you, and how to configure your website or server to take advantage of the new features. What HTTP/2 Means for You For regular users, the changes from HTTP/1.1 to HTTP/2 will be pretty invisible. All browsers will require a valid Transport Layer Security (TLS) certificate to serve websites over HTTP/2. So beyond faster page loading,…

Read the full article: 5 Ways to Improve Your Website’s PageSpeed Using HTTP/2

HyperText Transfer Protocol version 2, or HTTP/2, is the latest standard of HTTP. The updates to the protocol will improve the speed, efficiency, and security of web traffic. However, the transition isn’t automatic.

This article aims to give you some insight into what HTTP/2 means to you, and how to configure your website or server to take advantage of the new features.

What HTTP/2 Means for You

For regular users, the changes from HTTP/1.1 to HTTP/2 will be pretty invisible.

All browsers will require a valid Transport Layer Security (TLS) certificate to serve websites over HTTP/2. So beyond faster page loading, there will also be an increase in website security.

For web designers and owners, HTTP/2 can improve your site’s load speed across all devices.

Every modern browser already supports the new protocol standard (although these mobile browsers don’t support HTTP/2). However, in cases where the browser or server doesn’t support HTTP/2, the HTTP/1.1 standard will be used automatically.

How Will HTTP/2 Affect Website Design?

The changes introduced in HTTP/2 will affect how we optimize websites and servers for efficiency and speed.

New features introduced in HTTP/2 will allow us to disregard many of HTTP/1’s workarounds and optimization techniques. This includes no longer inlining scripts into HTML or combining files to reduce server requests. Domain sharding is also no longer useful.

In some cases, these workarounds will even negatively affect your page speed if it’s served HTTP/2.

The majority of internet traffic is mobile based, so consider mobile internet speeds and keep your media files small and optimized for these devices. You should also continue to minify your JavaScript (JS), HTML and CSS.

If you’re not sure why you should minify your files, a good start would be our article on how and why to minify your JavaScript.

HTTP Concepts You Should Know

In case you aren’t familiar with the terms referred to in this article, here’s a quick introduction

Inlining Script is to add JavaScript directly into a HTML document with the <script> tag. In HTML/1.1 this gets rid of small JavaScript files and will reduce server requests and load scripts faster.

Reducing the number of files is no longer as big of an issue for page speed in HTTP/2 thanks to Multiplexing, Stream Prioritization, and Server Push.

Multiplexing is a new feature in HTML/2 which allows for multiple Data Streams over a single Transmission Control Protocol (TCP) connection.

Data Streams is an HTML/2 term used for bi-directional streams of data. We can prioritize each stream thanks to their unique identifier, which will help us optimize data delivery.

Stream Prioritization is another new feature in HTML/2. This gives us the ability to tell a server to allocate resources and bandwidth to prioritized Data Streams. Thus ensuring optimal delivery of high priority content to clients.

Domain Sharding is the act of splitting website resources across multiple sites or domains to get around the simultaneous download limitation in HTML/1.1.

In HTML/2, Multiplexing and Server Push will do simultaneous downloads faster and more efficient than Domain Sharding. In fact, there is currently no support to use these features across multiple domains.

Server Push will allow a server to send multiple responses for a single client request. In short, the server can make assumptions as to what files a browser needs to load a page, without the browser specifically requesting them.

We’ll now focus on some of the changes website owners should make to optimize websites for HTTP/2. For a deeper insight into these concepts, read our previous article: “What Is HTTP/2 and How Does It Affect the Internet’s Future?“.

5 Website Changes to Make for HTTP/2 Optimization

The main changes you should be aware of as a website owner are related to how to deal with website resources. Specifically in regards to how your website’s server will talk to a browser, and how the files are delivered.

Below are the most common changes you should look into to optimize your website of HTTP/2.

1. Don’t Combine Your CSS or JavaScript

You should no longer concatenate, or combine your website resources. In HTTP/1.1, this will reduce the number of HTTP requests, and files needed to be downloaded to display your website.

Each HTTP request will add latency, so in HTTP/1.1 downloading a single file is often more efficient than downloading multiple files. Fewer files also help get around the limit to simultaneous downloads in HTTP/1.1.

As HTTP/2 allows for multiple downloads without multiple server requests, the number of files is less important when optimizing for speed. Combined with caching, specific files are better in HTTP/2.

In effect, more specific files allow you to serve most of your website from your Content Delivery Network (CDN) and the user’s browser cache. It also means the browser won’t have to download and parse a single large file from your server when you make minor tweaks to your website.

2. Don’t Inline Scripts in HTML

Embedding CSS and JS files in your HTML document will improve your page loading speed in HTTP/1.1. As with combining files, it will reduce file numbers and server requests.

Inlining scripts in HTML when using HTTP/2 will reduce your page speed optimization from caching, by removing a browser’s ability to cache assets individually.

It will also break any improvement from Stream Prioritization, as all embedded script and content will get the same priority level as your HTML content.

Instead of inlining assets to reduce HTTP requests, take advantage of multiplexing and server push. This will allow browsers to download more resources with fewer request, and improve your page’s load speed.

In short, keep your resources separate and small when possible.

3. Stop Using CSS Image Sprites

Example of image sprites using chess pieces
Image Credit: jurgenwesterhof/Wikimedia

Image Sprites are images made up of many smaller images (like the one above). CSS then specifies which sections of the image to display.

As with most HTTP/1.1 workarounds, we use image sprites partly to reduce server requests. In HTTP/2, you can safely use separate images without negatively affect your page’s load speed.

Smaller files will download faster and more efficiently thanks to multiplexing and server push.

4. Do Not Use Domain Sharding

Domain sharding is used to circumvent the simultaneous download limitations in HTTP/1. This limitation is usually between four and eight per domain and is set by browsers partly to reduce DDOS attacks.

Sharding your website across four domains, for example, can theoretically serve resources in a quarter of the time in HTTP/1.1.

Domain sharding is no longer necessary thanks to HTTP/2’s multiplexing.

Note that browsers cannot take advantage of multiplexing and parallel downloads across multiple domains in HTTP/2. Sharding will also break HTTP/2’s stream prioritization, further reducing the benefits of using HTTP/2.

5. Take Advantage of Server Push

http1 vs http2 with server push

Possibly the most significant improvement of HTTP/2 is server push.

In HTTP/1.1, when you request to view a page, the server will send the HTML document first. Your browser will then start parsing this, and separately request CSS, JS, and media files referred to in the document.

In HTTP/2, server push enables a server to push required resources to a browser without a separate request for them. This includes CSS and JavaScript files, as well as media, and will reduce HTTP requests and speed up page loading.

Smashing Magazine has a great comprehensive guide on HTTP/2’s server push with insight into how it works and how to enable it.

How to Configure Your Server for HTTP/2

HTTP/2 test tool

Most server implementations already support HTTP/2. However, if you are using a shared host you’ll need to check with your server admin if they have activated HTTP/2. If you are curious, GitHub has a list of server implementations that support HTTP/2.

Nginx servers have native support for HTTP/2, whereas you might need to configure Apache servers to enable HTTP/2 support.

If your website is HTTPS enabled, (a HTTP/2 requirement) you can check if your website is delivered with HTTP/2 at http2.pro. That said, if you use Cloudflare as your CDN, any content from their servers be served over HTTP/2 without you having to make any changes.

WordPress specific hosts will sometimes limit the configuration changes you can make, especially in their lower tier services. That said, we recommend Bluehost for your WordPress sites. Bluehost offer free SSL and CDN, and will serve your websites over HTTP/2.

HTTP/2 Is Just the First Step

HTTP/2 is a huge improvement on the previous standard, and you should now have some insight into the benefits you can get from implementing it.

Enabled websites will load faster and be more secure, which will also boost your search rankings. HTTP/3 is already on the way, and configuring your website for HTTP/2 will make your eventual jump to HTTP/3 much smoother.

Beyond setting up your website for HTTP/2, you should also use consider these ways to make your website load faster.

Read the full article: 5 Ways to Improve Your Website’s PageSpeed Using HTTP/2

What Is HTTP/2 and How Does It Affect the Internet’s Future?

what-http2

You may not have heard of HTTP/2 yet, but it’s the most recent update to HTTP. The new protocol standard introduces some new concepts and makes communication between servers and applications faster and more efficient. What Is HTTP/2? HyperText Transfer Protocol Version 2, or HTTP/2, is the first major update to HTTP in 15 years. The previous protocol standard, HTTP/1.1, has been in use since 1997 and uses a mix of clunky workarounds to improve on the limitations of HTTP. It is based on SPDY (“speedy”), an open-source experiment started by Google to address some of the issues and limitations…

Read the full article: What Is HTTP/2 and How Does It Affect the Internet’s Future?

what-http2

You may not have heard of HTTP/2 yet, but it’s the most recent update to HTTP. The new protocol standard introduces some new concepts and makes communication between servers and applications faster and more efficient.

What Is HTTP/2?

HyperText Transfer Protocol Version 2, or HTTP/2, is the first major update to HTTP in 15 years.

The previous protocol standard, HTTP/1.1, has been in use since 1997 and uses a mix of clunky workarounds to improve on the limitations of HTTP.

It is based on SPDY (“speedy”), an open-source experiment started by Google to address some of the issues and limitations of HTTP/1.1

The Internet Engineering Task Force (IETF) specifies the changes like this in Hypertext Transfer Protocol version 2, Draft 17:

“HTTP/2 enables a more efficient use of network resources and a reduced perception of latency by introducing header field compression and allowing multiple concurrent exchanges on the same connection […]

“It also allows prioritization of requests, letting more important requests complete more quickly, further improving performance.”

“HTTP/2 also enables more efficient processing of messages through use of binary message framing.”

“This specification is an alternative to, but does not obsolete, the HTTP/1.1 message syntax. HTTP’s existing semantics remain unchanged.”

HTTP/2 Is Based on SPDY

HTTP/2 is based on SPDY

By 2012, most modern browsers and many popular sites (Google, Twitter, Facebook etc.) already supported SPDY. As the popularity of SPDY was increasing, the HTTP Working Group (HTTP-WG) started working on updating the HTTP standard.

From this point onward, SPDY became the foundation and experimental branch for new features in HTTP/2. At the time, we examined how SPDY can improve browsing. Since then, the version 2 standard was drafted, approved and published.

Many of the features from SPDY were incorporated into of HTTP/2, and Google eventually stopped supporting this protocol in early 2016.

Most browsers eventually stopped supporting SPDY, and as there are no alternatives, HTTP/2 is becoming the de facto standard.

While the HTTP/2 protocol standard is not strictly backward compatible with HTTP/1, compatibility can be achieved via translation. An HTTP/1.1 only client won’t understand an HTTP/2 only server and vice versa, which is why the new protocol version is HTTP/2 and not HTTP/1.2.

That said, an important part of the work provided by HTTP-WG, is to make sure HTTP/1 and HTTP/2 can be translated back and forth without any loss of information.

Any new mechanisms or features introduced will also be version-independent, and backward-compatible with the existing web.

HTTP/2 isn’t really something a user can implement, but there are things we can do to affect our browsing speed. Do you believe any of these common myths to speed up your internet speed?

The Benefits and Features of HTTP/2

HTTP/2 comes with some great updates to the HTTP standard. Some of the more important ones are binary framing, multiplexing, stream prioritization, flow control, and server push.

Binary Framing

HTTP message in HTTP/2 binary framing streams
HTTP Messages by mfuji09 is licensed under CC-BY-SA 2.5.

Following the update to HTTP2/, the HTTP protocol communication is split up into an exchange of binary-encoded frames. These frames are mapped to messages that belong to a particular stream. The streams are then multiplexed (woven together in a sense) in a single TCP connection.

The new binary framing layer introduces some new terminology; Streams, Messages, and Frames.

  • Streams are bidirectional flows of bytes that carry one or more messages.
  • Each of these streams has a unique identifier and can carry bidirectional messages using optional priority information.
  • Frames are the smallest unit of communication in HTTP/2 that contain specific sets of data (HTTP headers, message payloads etc.). The header will at minimum identify the stream that the frame belongs to.
  • Messages are a complete set of frames that map to a logical request or response message.
  • Each message is a logical HTTP message, like a request or responses, made up of one or more frames.

This allows us to use a single TCP connection, for what in the past required multiple.

Multiplexing

Multiplexing example

HTTP/1.1 ensures that only one response can be delivered at a time per connection. And the browser will open additional TCP connections if the client wants to make multiple parallel requests.

HTTP/2 removes this limitation of HTTP/1.1 and enables full requests and response multiplexing. This means that the client and server can break down an HTTP message into independent frames, which are then interleaved, and reassembled at the other end.

Overall, this is the most important enhancement of HTTP/2, as it will in part eliminate the need for multiple connections. This will in turn introduce numerous performance benefits across all web technologies.

The reduced number of connections means fewer Transport Layer Security (TLS) handshakes, better session reuse, and an overall reduction in client and server resource requirements. This makes applications faster, simpler and cheaper to deploy.

Websites with many external assets (images or scripts) will see the largest performance gains from HTTP/2 multiplexing.

Stream Prioritization and Dependency

Further improvements of the multiplexed streams are made with weight and stream dependencies. HTTP/2 allows us to give each stream a weight (a value between 1 and 256), and make it explicitly dependent on another stream.

This dependency and weight combination leads to the creation of a prioritization tree, which tells the server how the client would prefer to receive responses.

The server will use the information in the prioritization tree to control the allocation of CPU, memory, and other resources, as well as the allocation of bandwidth to ensure the client receives the optimal delivery of high-priority responses.

Flow Control

Issues with flow control in HTTP/2 are similar to HTTP/1.1. However, since HTTP/2 streams are multiplexed within a single TCP connection, the way flow control in HTTP/1.1 works is no longer efficient.

In short, flow control is needed to stop streams interfering with each other to cause a blockage. This makes multiplexing possible. HTTP/2 allows for a variety of flow-control algorithms to be used, without requiring protocol changes.

No algorithm for flow control is specified in HTTP/2. Instead, a set of building blocks has been provided to aid clients and servers to apply their own flow control.

You can find the specifics of these building blocks in the “Flow Control” section of the HTTP/2 internet-draft.

Server Push

Your browser will normally request and receive an HTML document from a server when first visiting a page. The server then needs to wait for the browser to parse the HTML document and send a request for the embedded assets (CSS, JavaScript, images, etc.).

In HTTP/1.1, the server cannot send these assets until the browser requests them, and each asset requires a separate request (i.e multiple handshakes and connections).

Server push will reduce latency by allowing the server to send these resources without prompt, as it already knows that the client will require them. So in the example above, the server will push CSS, JavaScript (a common scripting language in web pages), and images to the browser to display the page quicker.

Basically, server push allows a server to send multiple responses for a single client request.

Albeit manually, this is the effect we currently get by inlining CSS or JS into our HTML documents—we are pushing the inlined resource to the client without waiting for the client to request it.

This is a big step away from the current HTTP standard of strict one-to-one request-response workflow.

The Limitations of HTTP/2

Image of browsers that support HTTP/2

SPDY had a slightly stricter policy on security and required SSL encryption for all connections. HTTPS/2 does not require encryption but many services will not serve HTTP/2 without SSL.

All major browsers support HTTP/2, but none of them will support it without encryption. The CanIUs website has a great table overview over the current browser support for HTTP/2, as seen above.

The backward compatibility and translations between HTTP/1.1 and HTTP/2 will slow down page load speed.

There is no real reason why encryption shouldn’t be a default or mandatory setup by now. If you already have an SSL certificate on your site, you can improve the security of your HTTPS website by enabling HSTS.

Is HTTP/2 the Next Big Thing?

Comparison of HTTP/1.1 and HTTP/2 loading time

HTTP/2 was proposed as a standard in mid-2015, and most browsers added support for it by the end of that year. HTTP/2 already affects the way that the internet works and how applications and servers talk together.

There are no requirements to force the use of HTTP/2, but so far it only serves benefits and no drawbacks. It’s also a fairly minor change from a user perspective, one that people won’t really notice.

According to W3Tech, 31.7% of the top 10 million websites currently support HTTP/2. The quickest way for most of you to enable HTTP/2 on your website is to use Cloudflare’s CDN.

The next proposed standard (HTTP/3) is already in the works and is based on QUIC, another experimental project by Google. In October of this year, IETF’S HTTP-WG and the QUIC Working Group officially requested QUIC to become the new worldwide standard and to rename it HTTP/3.

If you are curious, Akamai.com has a quick tool to check if your browser supports HTTP/2. If it doesn’t, perhaps consider switching your browser.

Read the full article: What Is HTTP/2 and How Does It Affect the Internet’s Future?