This is a demo page of Cloudflare's HTTP/2 prioritization feature applied to progressive JPEG images. It makes all images on the page appear to load quicker by prioritizing their progressive "previews" on the network level. See the blog post for details.

Start with prioritization

Start without prioritization

The graphs

The demo will show a graph of page's overall visual progress over time. The data is based on loading progress measured by a ServiceWorker running in the browser. Actual on-screen rendering may be different due to refresh throttling and quality of JPEG decoding implementation.

In the graphs the X axis is time. Y axis is visual completion of the page. Orange represents percentage of images with some preview likely rendered on screen. Green is percentage of images which should look good enough. White is percentage of images that finished loading.

Normal case (without prioritization)

By default images load one by one, especially on HTTP/2 connections that can serialize all respones. This makes progressive rendering not very beneficial, because only one image is displayed progressively at a time (visible in the graph from small amount of green and orange which represents images in progress). Overall visual progress of the page (sum of green+orange+white in the graph) remains quite linear. The dark gray area with dotted line represents how many images have known dimensions. Pages without fixed image dimensions may keep "jumping" until all images finish loading.

Accelerated case (with prioritization)

Thanks to prioritization image sizes are loaded very early (dark gray area jumping to 100%), allowing browsers to perform final page layout almost immediately. The slope of the orange area is much steeper, meaning the images are drawn on the screen sooner. Without prioritization page looks 90% done only after loading 90% of data. With prioritization the page looks 90% done (green area reaching 90%) after loading only about 2/3rds of the data. In both cases the total amount of data loaded is the same, but prioritized deliver looks as if images were compressed much better.

Caveats

The difference between prioritized and non-prioritized traffic is more visible on slow connections (2G/3G). Simulated slow connection speed in Developer Tools does not simulate network speed accurately enough, and may give results that don't represent real-world improvement.

If the graph does not show up, reload the page.

We have a version of the demo site that doesn't use JavaScript.