That’s a very cool technique.
I wonder how widely applicable the heuristics described would apply. “Headers first, then parallel” seems pretty ideal for the demo page, which resembles an image gallery or e-commerce list page (many small images, all immediately visible).
I think you’d want different heuristics for a “tall” page like a news article that consider the fold. Something like:
I approve of the dogs.
Prioritization of content above the fold is definitely useful.
Unfortunately, it’s not easy. Typically, even browsers don’t really know which images are above the fold, because they make image requests quite early, before they receive and apply any CSS.
For now, to accommodate tall pages with below-the-fold content, we have a heuristic that limits amount of responses in flight to hopefully group responses into above- and below-the-fold phases.
To get it right we could be measuring layout of pages after the render and keep track of which resources are visible, but such measurements and global database are hard to do at scale.
We’ve exposed this control as a header that customers can use. I hope someone will come up with more clever hacks this way.