Following Patrick Meenan’s talk at the Performance.Now() Conference last week, I grabbed an approx. 100KB image and ran it through the webpagetest dot org slash http2priorities.html image page generator. Subsequently, I ran that through WPT on Chrome 3G Fast.
As per his slides here: slideshare dot net slash patrickmeenan slash http2-prioritization (26 and onwards) I’m expecting the last 2 images, with the query parameter appended with -visible, to receive preferetial treatment in the resource loading waterfall.
Unfortunately, it doesn’t seem to be the case.
In the waterfall, you’ll see the image header chunks fetched around the 4,5s mark, an almost perfect line straight down. Resources 34 and 35 are the above the fold images. 34 gets discovered and picked up around the 6,5s mark (after resource 7 and 6 have loaded), and the 35th one not even until after 20 seconds (after all the other ones have loaded).
I see no prioritisation happening here. No interruption of the in-flight responsed.
Another surprise is the many dark purple chunks coming in. I get that serving progressive JPGs is done by just fetching enough data for the next level of progressiveness, but I’ve seen that a bit more concentrated in other waterfalls. Here it’s more fragmented in many more and smaller chunks than expected.
Resource details (Slightly redacted, links broken due to n00b post restrictions):
Loaded By: webpagetest.org/http2priorities.html?image=[...]veyafb.jpg:0
Error/Status Code: 200
HTTP/2 Stream: 65, weight 220, depends on 0, EXCLUSIVE
Request ID: 7364.34
Client Port: 43518
Discovered: 6.489 s
Request Start: 6.489 s
Time to First Byte: 2293 ms
Content Download: 11205 ms
Bytes In (downloaded): 100.6 KB
Uncompressed Size: 102.8 KB
Bytes Out (uploaded): 0.3 KB
Request 35 Response (34 practically identical):
expect-ct: max-age=604800, report-uri=“report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct”
last-modified: Wed, 20 Nov 2019 11:08:17 GMT
x-environment: Hipex/3 general
date: Tue, 26 Nov 2019 09:11:14 GMT
As far as CF account settings goes:
Image Resize is Off
Polish is Off
Auto Minify is Off
Brotli is Off
Enhanced HTTP/2 Prioritization is Off (Pat confirmed on Twitter this needn’t be on. Standard prioritisation should work out of the box.)
Rocket Loader is Off
Am I missing something here?