HTTP / 2: What every web developer needs to change in 2020

As of March 2020, HTTP / 2 has been used as much as 43.8% across websites. And this number will continue to increase. Here is a brief summary of my recent exploration of this topic.

A brief overview of HTTP / 2

• HTTP / 2 is a new type of Protocol and is gradually replacing HTTP / 1.1, which is currently the de facto standard of the web.
• The main motivation behind it is its incredible performance.
• Its backward compatibility . Customers and browsers can still use HTTP / 1.1 as usual if they do not support HTTP / 2.
• With HTTP / 2, SSL is also recommended for performance reasons, but not required.
  

What improvements does HTTP / 2 bring?

• Multiplexing:
  Http / 2 can fetch multiple files (usually HTML, JS CSS, etc.) synchronously from the server. It uses the same type of TCP connection for multiple files, so is considered multiplexing. Only 1 TCP connection is required. For comparison, Http / 1.1 allows up to 4-8 connections to the server (per domain) at the same time, limiting the number of files you can fetch. Even if a request is made, it is necessary to wait for the previous request to finish.
• Use binary encoding for requests / responses when compared to http / 1.1 which uses ‘text encoding’. That means it will more accurately handle Line ending, whitespace encoding v … v … Binary encoding is also very effective for analysis and use.
• Stream prioritization : Each request stream can be prioritized.
  
• Stream dependencies : Dependencies between threads can also be specified. So we can say that one js file may depend on another.
• HTTP header compression – HTTP header compression : http / 2 supports header compression. That means there will be less data on the wire.
• Server Initiated Push – the server starts up pushing : unlike http / 1.1, the http / 2 server can start pushing files to the client itself even before the client requests it. This reduces latency and awaits html parsing and asset requests.
  

How to prepare for HTTP / 2?

• Stop bundling assets:
  No need to bundle css / JS files because http / 2 supports multiplexing. There is virtually no limit to making many web requests. It may also mean that we do not need to deploy the entire bundle when only a few files need to be updated.
• Stop inlining JS / CSS / Images / SVG:
  Fetch them as separate files. You can take advantage of browser caching with separate files.
• Use ‘lazy loading’ for JS / css files. This will be more efficient and reduce initial load time.
• Stop creating ‘Sprites’ images:
  This is no longer needed thanks to multiplexing. This also means workflow and scripting will be simpler.
• Stop sharding domain:
  No need to spread your files across multiple domains, since we can fetch everything right now from the same domain.
• Start using HTTPS:
  It is the proposed standard with HTTP / 2. You get more secure websites / apps by default.

But always:

• Make sure your users are using the latest browsers (HTTP / 2 is now supported on nearly all browsers, except our usual suspicious objects: IE <v10 )
• HTTP / 2 is allowed on your server. See you on the HTTP2 protocol!
  

Tech Talk via dev.to

Source : Techtalk