Early Hints Moves Beyond the Origin Trial

When Cloudflare first wrote about Early Hints, the feature was still early-stage: Chrome was running an origin trial, and initial lab tests showed potential Largest Contentful Paint (LCP) gains of up to 30%. Since then, more than 100,000 customers have enabled Early Hints on Cloudflare, and the browser support picture has changed dramatically. Chrome 103 ships Early Hints with support for preload and preconnect Link headers out of the box, no experiment flag required.

The underlying idea remains the same. Browsers wait for a server's full response before they know which resources to fetch. That response takes time to assemble, especially for dynamic pages — a period called “server think time.” Early Hints uses the HTTP 103 status code to send a provisional response containing Link headers for resources the browser can start fetching immediately, while the origin continues compiling the final response. Cloudflare sends those 103 responses from its edge, which sits within 50 ms of 95% of the Internet-connected population, so the hints arrive well before the origin's full response is ready.

Three mechanisms drive the performance gains:

  • Preload: hints tell the browser to fetch specific resources (fonts, scripts, images) before the full response arrives.
  • Preconnect: hints warm up connections to third-party origins that will serve content needed to complete the page.
  • Edge caching: Cloudflare caches Link headers from origin responses and emits them as 103 responses on subsequent requests, making use of the full waiting period, not just origin think time.

Shopify Sees Real-World Gains

Shopify tested Cloudflare's Early Hints implementation during Black Friday/Cyber Monday 2021 and is reporting results from that peak traffic period. According to Colin Bendell, Director of Performance Engineering at Shopify, storefronts saw LCP improve by over 500 ms at the p50. Bendell also noted during a talk at Cloudflare Connect London that a 10% improvement on a buyer's first page experience correlates with a 7% average increase in conversion. For Shopify storefronts, the win comes largely from preconnecting to cdn.shopify.com, which hosts many of the assets those pages depend on.

Measuring Impact Beyond Shopify

To understand how Early Hints performs for the broader Web, Cloudflare ran lab tests with WebPageTest against a sample of roughly 750 URLs drawn from the top 1,000 zones by request volume. Each URL was tested with Early Hints disabled and enabled, across four simulated connection profiles: desktop cable (5 Mbps, 28 ms RTT), mobile 3G (1.6 Mbps, 300 ms RTT), mobile low-latency 3G (1.6 Mbps, 150 ms RTT), and mobile 4G (9 Mbps, 170 ms RTT).

The measurements covered both First Contentful Paint (FCP) and LCP. Median improvements were modest but meaningful: on desktop, half the pages saw FCP improve by more than 9.47% and LCP improve by more than 6.03%. The upper quartile saw stronger results — over 20.4% FCP improvement and over 15.97% LCP improvement. Some individual pages did far better; one page improved FCP and LCP by 33% on mobile 3G settings when Early Hints was enabled.

Notable observations from the data:

  • FCP improvements outpaced LCP improvements, suggesting many hints target render-blocking resources such as critical stylesheets and scripts.
  • Percentage gains were larger on desktop cable and mobile 4G than on the slower 3G profiles, likely because wider bandwidth lets preloaded assets arrive faster once the connection is warm.
  • Filtering out zones that cache their HTML on Cloudflare (about 15% of the sample) produced nearly identical relative improvements, confirming that even with short server think times, Early Hints still helps.

Best Practices and a Caveat

Pages that saw the biggest gains typically shared one or more characteristics:

  • Preconnect Link headers for important third-party origins hosting page assets.
  • Preload Link headers for a small set of critical render-blocking resources.
  • Scripts and stylesheets split into chunks, with each chunk enumerated in a preload Link.
  • Preload for the LCP asset, such as a featured image.

If a page already uses preload or preconnect Link headers in its HTML, enabling Early Hints amplifies those existing declarations. The feature simply sends the same headers earlier.

There is a limit, however. Early Hints avoids the wasted bandwidth of Server Push because the browser doesn't receive content it already has cached, but over-hinting is still possible. One page in the sample listed over 50 images in its 103 response while omitting its render-blocking JavaScript. It improved on cable but consistently performed worse on higher-latency, lower-bandwidth mobile connections, where those image preloads saturated the network.

Enabling Early Hints on Cloudflare

Enabling the feature takes three steps in the Cloudflare dashboard:

  1. Sign in and select the domain.
  2. Navigate to the Speed tab.
  3. Enable Early Hints.

Once enabled, Cloudflare harvests preload and preconnect Link headers from origin responses, caches them, and sends them as 103 Early Hints on subsequent requests.

What's Next: Smart Early Hints

Cloudflare is also developing Smart Early Hints, which will generate 103 responses even when an origin response includes no Link headers. Instead of harvesting hints, Smart Early Hints will analyze origin responses to infer which assets can be preloaded or prioritized. The goal is a no-configuration experience that applies performance best practices automatically. The feature is still in development, with delivery targeted before the end of the year.