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.
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!
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:
- The order in which files are sent through stream dependencies.
- Which file streams receive more “weight” or dedicated resources like CPU / RAM when information is being sent concurrently.
The above image is a hypothetical scenario of HTTP/2 prioritization:
- 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.
- 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.
- 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