Early Hints are awesome and I wanted to make a wider, more-correct use of them across Shopify.
This page documents the issues and challanges I encountered when testing them.
This response sends a Link header with three preloads.
Reload without preload Link headers
When emitted, the preloads are:
Becuase Cloudflare caches Early Hints on the edge node, timestamp parameters should make it obvious which files were Early Hinted (stale) and which were preloaded by the `Link` header in the main response.
Swiper scripts and stylesheets include the integrity attribute, but for the second script tag it is deliberately incorrect.
The final response is delayed by 500ms so it is easier to see whether each file was loaded from Early Hints or from the main response.
When Chrome sees a preload with integrity in Early Hints, it bails from preloading that file, while it still does preload from the Link header in the main response.
Caveat: this may be an issue with how Cloudflare does not wrap the integrity attribute with quotes in Early Hints, but the preload from the main response still works, so...
Both Firefox and Safari don't seem to suffer from this issue.
If integrity is omitted from the Early Hints preload, Chrome does fetch the file early, but the preload is not reused by the HTML tag with integrity.
DevTools reports this as: "A preload is found, but is not used due to an integrity mismatch."
This means there is no good option for SRI-protected resources: adding integrity prevents Early Hints preloading, while omitting integrity causes the preload to be discarded.
Both Firefox and Safari do reuse a preload without integrity as long as the tag's integrity attribute matches the downloaded content.
In Chrome, Early-Hinted files that aren't reused are not visible in DevTools Network tab or resource timings.
The only signal they happened is the console warning that they were preloaded but not actually used.
Firefox shows them in both DevTools and resource timings.
Safari gives no indication that the Early Hints happened at all. The only clue is that the files loaded immidately from the memory, even for an empty cache.
Waiting for resource timing data...
In both Chrome and Firefox, Axios should show as initiated by Early Hints. Firefox even gives a clear visual indication for this in the waterfall column.
However, the resource timings reflect the later cache read, not the actual time when the file was downloaded by Early Hints.
This makes the timing data misleading: it confirms the resource came from Early Hints, but does not expose when the Early Hints download actually happened.
Waiting for timing data...
If Axios is marked as loaded by Early Hints, but these request timings are near or after finalResponseHeadersStart, the Resource Timing entry is showing the later cache read rather than the original Early Hints download.