1. 7
  1. 3

    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:

    1. Top priority: all image headers so that layout completes — stop stuff moving around ASAP (of course you should really have given dimensions in HTML so that the browser doesn’t have to look at the image header to do layout, but…)
    2. Images above the fold (all in parallel) — race to visual completion
    3. Images below the fold (less parallel, top to bottom) — load everything else in reading order

    I approve of the dogs.

    1. 1

      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.