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

Tram Ho

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:
    tech talk http 2 dev web 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

Share the news now

Source : Techtalk