Approaching Lightspeed with HTTP/2 (Part 2)

Quick recap from the last blog:

• HTTP/1.1 is slow because at the advent of the internet, we didn’t expect this modern web thing to get huge.
• HTTP/2 is faster because it’s the Burger King of network protocols. Have it your way — send as many requests and receive as many responses as you want at anytime through multiplexing.

If you have questions, check out my Part 1 on the topic. Without further delay, let’s talk about what HTTP/2 can do for us.

Finally!

Benefits of HTTP/2

1. Server Pushing

With HTTP/2, the server can send multiple responses to one request. This may sound odd, but check out the diagram.

Think about styles.css and scripts.js and the left-most portion of the image. Because of the limitations of HTTP/1.1, we have to wait for a response every time we make a request.

HTTP/2 and server pushing lets us proactively send resources. Your index.html already has information about any dependencies in <link> and <script> tags. Why wait for the client to request each one explicitly? Send them all, and send them asynchronously!

2. Prioritization

Why on Earth would I ever want to receive responses asynchronously? We can’t display a webpage with CSS. What if the HTML document shows up last and delays page load?

Great point. Because of that consideration, we also have the ability to decide two things:

1. The order in which files are sent through stream dependencies.
2. Which file streams receive more “weight” or dedicated resources like CPU / RAM when information is being sent concurrently.

With HTTP/2, we can assign integer “weights” to each file stream from 0–256 representing the proportional amount of resources to dedicate to each file.

The above image is a hypothetical scenario of HTTP/2 prioritization:

1. We set the index.html stream as a dependency for our style.css stream. Thus, the index.html response will receive all CPU / RAM resources before the stylesheet.
2. We then set style.css as a dependency of the jquery.js, scripts.js, and image.png streams. Again, all resources will be dedicated to a response with the stylesheet before our scripts and images.
3. Once style.css is handled, we work with three file streams concurrently. To calculate allocation of resources, we add the previously assigned stream “weights” together (6 + 3 + 1 = 10) and determine proportional importance.

• jquery.js stream will receive 6/10 or 60% of resources.
• scripts.js will receive 3/10 or 30% of resources.
• image.png will receive 1/10 or 10% of resources.

Check out these awesome, very related links

https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-push/
https://nghttp2.org/blog/2014/04/27/how-dependency-based-prioritization-works/
http://blog.scottlogic.com/2014/11/07/http-2-a-quick-look.htmlhttps://hpbn.co/http2/