HTML Priority Hints Help Etsy Ace Google Core Web Vitals
A simple HTML attribute that tells the browser which assets to load first, called Priority Hints, has improved the load time of the largest images on Etsy’s product listing pages by 4% based on Google’s Largest Contentful Paint metrics.
Simply put, now developers can explicitly tell the browser which assets are priority loading assets and take the guesswork out of browser loading.
David Ross, a senior web performance engineer at Etsy defines a fast web page in his recent blog post as, “a visually complete and fully interactive page, rendered almost instantaneously and with no more delay than required for completion of the server request.”
The next best thing he reveals is, “a page that gives the impression of being instantaneous, at least.”
Speed or the illusion of speed is becoming more and more challenging though as page weight and site complexity continue to increase. The challenge at hand is to find a way to load these dynamic web pages incrementally while providing users with the experience of landing at their destination and that the site itself is fully functioning even while some of the heavier components continue loading in the background.
The Problem aka OG Browser Loading
Webpages as they exist today consist of some combination of HTML, JavaScript, CSS, images, and video. The process of reading the full code file, including additional decencies, then requesting additional assets will send bounce rates sky high.
Knowing that, the browser losing process consists of interleaving twin processes of reading files and requesting assets. During this process, the browser makes educated guesses until it gets far enough along in the process to put the full layout together and compose the structure of the page.
Images, unless they are in the initial view of the page, are low priority. And this is a major problem for two reasons: first, this has the potential to lose the user’s interest. Guilty! But it also has the potential to lower the page’s Google search rankings as it pushes Large Contentful Paint timing out past the 2.5-second “good” threshold which is important in determining Google’s search ranking.
The Solution of Priority Hints
Take the guesswork out of browser loading.
Etsy tested priority hints on their product listing pages as these are one of Etsy’s main page types and the design makes it clear as to which image is most important.
Ross explains that they spun up a 50:50 AB test on its in-house experimental platform and ran it. Ultimately the engineers saw a 4% (-83 ms at the 75th percentile) improvement in the Largest Contentful Paint on the product listing pages with no harm detected to key business metrics.
The test metrics were so successful, Ross stated that it, “captured 1-2 months worth of development gains in one test, above existing work and above regular product feature rollouts.”
In terms of solidifying Etsy’s search rank safety with Large Contentful Paint, loading was consistently under 2.5 seconds so much so that Etsy is now able to test other changes while continuing to preserve their Core Web Vitals.
How Hints Work
Priority hints are not preload links — they’re actually simpler and have benefits over preload links. Preload links need maintenance in a separate HTML source and that workflow causes other issues.
Priority hints are an attribute directly attached to a resource link or request. This allows the browser to use the modified priority as part of its existing render flow.
The hint clearly illustrates which assets are a high priority for browser loading and the guesswork is removed. The browser can now load priority assets immediately, as in before the JavaScript requests are complete. This is incredibly powerful in instances where Angular or React files are loading as they contain heavy JavaScript.
Other examples where priority hints shine are in prioritizing resources that need to load in response to user interaction over background items, and deprioritizing lazy-load and below-the-fold content.
Brief History and an Exciting Future
Though first introduced in 2018, Priority Hints didn’t get much traction until 2021 when Google’s Core Web Vitals made site performance a factor in the search rankings and put a spotlight on Large Contentful Paint along with other user-experience metrics. Priority hints, being uniquely helpful in that it can prioritize loading hero images first, began to catch on with more sites.
With the confirmation of successful test metrics and a positive overall response from the developers working with them, priority hints were approved as a full feature of Chrome and Edge. Mozilla Firefox is interested in priority hints. The feedback was also presented to the W3C Technical Architecture Group as well. Since Chrome and Edge are both Chromium browsers, a third browser will need to adopt them as a feature, but once it does, they will become eligible for ending the HTML and JS Fetch specifications.
