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
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
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
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
