By David Ross

Jul 25, 2022

As a rule, users don’t like slow web pages. For online businesses, whose success depends on keeping customers engaged through multi-step shopping workflows, making pages fast is a constant preoccupation. What does "fast" look like to a user? Ideally, it's a visually complete and fully interactive page, rendered almost instantaneously and with no more delay than required for completion of the server request. Or, failing that, it's a page that gives the impression of being instantaneous, at least. For some time now, as page weight and site complexity increase year over year, browsers and developers have collaborated on schemes allowing for pages to load and display incrementally, so users can have an initial view that, while not complete, looks and acts complete enough. Done right, these schemes can give users immediate confirmation that they've landed where they expected to, while letting what’s sometimes the bulk of the page’s functionality load unnoticed in the background.

Priority Hints are a newly released browser feature, currently available in Chrome and Edge, that give web developers the option of signaling relative load-time priorities of significant page resources. These hints are declared by way of a new "fetchpriority" attribute in the page's HTML markup and are relatively easy to apply. The browser reads the hints and is expected to honor them, so that setting a high fetchpriority on a page's hero image, for example, will cause it to be retrieved and rendered much earlier than it would have been unhinted. That sort of optimization can go a long way toward giving the user a good impression of your site's responsiveness. At Etsy, we've begun experimenting with priority hints lately, and we think they're going to be a useful addition to the toolkit. Here's what we've learned so far.

The Browser Load Process

Modern web pages are collections of resources: the HTML source of the page itself, but also images, video, CSS for styling, Javascript for interactivity. Loading them gracefully and efficiently is a complex task. The average page is larger than can be delivered all at once, and waiting for the document to be complete and completely parsed before requesting external assets would be unacceptably slow, more so when each resource can itself come with chains of additional dependencies. Knowing this, browser makers attempt to interleave the twin processes of requesting assets and rendering a page view, using a variety of heuristics to make educated guesses about which resources are most important to the initial display state. Resource type (image, font, CSS, etc.) and order in the document matter, but the browser can only guess so much. Images, in particular, are low priority unless they're in the initial view of the page, but the browser can't know what the initial view is, and what images belong in it, until it's far enough along to actually lay out the structure of the page on screen. This is later than we’d like, as it pushes Largest Contentful Paint out and makes it harder to reach the 2.5 second ‘good’ threshold which Google stresses the importance of in determining search ranking. (Largest Contentful Paint, one of Google's Core Web Vitals, is a browser metric that measures the time required for the largest image or text block within the screen view to load.)

Trialing Priority Hints

Priority hints were first made available to developers in 2018, via origin trial, in the Chrome browser. Origin trials are a way for browser makers—Chrome and Edge, specifically—to expose new and experimental features to the development community for testing and feedback, on a limited-scope, limited-duration basis. A developer with a site like, say, Etsy.com can register for any currently active trial and receive a token enabling pages at that origin to participate in it. Restricting trials this way gives browsers the chance to iterate more features more rapidly, since it avoids the risk that an experiment will make its way into the wider world and become load-bearing before it's ready or approved.

Enthusiasm for testing priority hints was lukewarm at first. One of the main uses presented in the 2018 test was prioritizing asynchronous scripts, and there was already a popular (if less graceful) workaround using script preloading to achieve the same result, so test impact was muted. The way the browser handled preload further complicated the effort to validate the feature, which led to Google receiving only limited feedback on it. As a result, priority hints were shelved for the time being.

By the time of a second test in 2021, the web performance landscape had shifted. Chrome 95 fixed a long-standing bug around preload ordering. Core Web Vitals, which promised to make site performance a component of search rankings, put a spotlight on LCP and other such user-experience metrics. The headline call to action for priority hints shifted to the much more impactful “Load your site’s hero image sooner, and improve LCP easily!” As a result, more sites responded to the call (Etsy among them), and the response was sufficiently positive that priority hints were approved to become a full feature of Chrome and Edge. Mozilla Firefox has since signaled their interest as well. This feedback was presented to the W3C Technical Architecture Group, and once a second browser engine adopts the feature (Chrome and Edge are both Chromium browsers) priority hints will be eligible for entering the HTML and JS Fetch specifications.

How Hints Work

Preload links have become a familiar means of triggering early resource downloads, but they have disadvantages which have historically limited their adoption. Preload links have to be maintained separately in HTML source, outside the elements that actually present those resources, which threatens brittleness (preloads can fall out of sync with changes to the page) and potentially useless downloads. Additionally, browser heuristics might still de-prioritize a preloaded image once it’s been received, and modern responsive image features such as <srcset> are much more complicated to implement with preload.

Priority hints are an attribute directly attached to a resource link or request, allowing the browser to use the modified priority as part of its existing render flow.

<img src="/images/example.jpg" fetchpriority="high" alt="" />

<iframe src="https://example.com" width="300" height="300" fetchpriority="low"></iframe>

fetch("/api/endpoint.json", { priority: "low" }).then()

This scheme has multiple benefits over preload and other existing tools for prioritizing resources. Declaring priority in the same place the resource is used on the page eliminates the brittleness problem. And there’s no ambiguity about a manual hint, so the browser can start downloading a high-priority image without having to wait for the layout step. This can move an image request so it begins loading before a page's Javascript gets requested, which for pages written in frameworks like React or Angular can often be the bulk of page load time. Resources requested in response to user interaction can be prioritized over background activity. Lazy-loaded or below-the-fold content can be explicitly deprioritized, in favor of making the user’s initial impression faster.

Where Next?

Given the recommended initial use of “prioritizing hero images” we decided to test priority hints on our product listing pages, as they are one of Etsy’s main page types and the page design is unambiguous about which image is the most important. With that, we spun up a 50:50 AB test on our in-house experimentation platform and ran it. Ultimately, we saw a 4% (-83ms at the 75th percentile) improvement in Largest Contentful Paint on product listing pages, with no harm detected to key business metrics. This captured 1-2 months worth of development gains in one test, above existing work and above regular product feature rollouts. The headroom gained under Google’s 2.5s LCP threshold gave us space to safely test other changes while preserving our Core Web Vitals status as it applied to search ranking signals.

Priority hints are exciting, and after our initial experiment we have ambitions to integrate them further into Etsy's web pages. For such a simple change to unlock this much improvement to Largest Contentful Paint is something to be appreciated on its own, and holds out a lot of promise for future optimizations. We're also excited to join future origin trials, to stay on the cutting edge of web performance. I hope more sites and developers will join us in these tests, so the future of frontend development can take even more voices into account. In return for participating in this testing, you get to help guide browser features which may become part of living standards specs. Not every origin trial becomes a shipped feature, and your feedback could be a deciding factor in the next phase of browser evolution.