Priority Hints importance=high benefit on HTTP 1.0-1.1

01-Explainer.md

Explainer

Site: http://159.89.227.14/

What happens without priority hints is:

• All 7 requests are made at low priority
• When layout is done, all (that aren't finished yet) re-prioritize to high priority (in-viewport).
• Since a max of 6 connections are allowed to be made, the first 6 are fetched right away. 7th is queued & stalled until one of the previously-made connections is free/done and we can allocate one for the last image.

What happens without priority hints is:

• The first 6 are made at low priority, the 7th is made at high.
• The 7th image gets a connection, and so does one of the remaining 6 low priority ones (we load "low" prio one @ a time).
• When layout is done, all (that aren't finished yet) re-prioritize to high priority (in-viewport).
• We have 4 remaining connections to allocate to 5 now-"high" priority images
• One of the first 6 images gets queued & stalled until we can make another connection. In this case, the image that got the short end of the stick was 5.jpg.

We were able to successfully ensure that out of all images on the page, the one with importance=high got prioritized and therefore skipped the "low"-priority queueing that it risks going through.

Result

HTTP/1

The issue with this example is that the benefits are most percievable on HTTP 1.0 or 1.1, where we have this max-connection problem. With H/2, we just have multiplexed requests so we need to make sure the server is honoring the H/2 priorities we're setting, for us to have a good benefit.

index.html

<h1>Test</h1>
<style>img {width: 100px; height: 250px;}</style>
<img src=1.jpg alt=box>
<img src=2.jpg alt=box>
<img src=3.jpg alt=box>
<img src=4.jpg alt=box>
<img src=5.jpg alt=box>
<img src=6.jpg alt=box>
<img importance=high src=7_other.jpg alt=box>

with-priority-hints.jpg

without-priority-hints.jpg