Early Hints: A Faster Path to First Paint on Pages

Cloudflare Pages already delivers static assets from one of the fastest networks on the planet. Now the platform is extending that speed advantage to the critical first mile of a page load with support for Early Hints. The feature lets browsers begin fetching the resources that matter most for rendering—CSS, fonts, and above-the-fold images—before the main HTML document has even arrived. For developers running server-side rendering (SSR) on Pages Functions, that can translate into hundreds of milliseconds shaved off key metrics like largest contentful paint (LCP).

What Early Hints Changes About Page Loads

Early Hints, available in Chrome since version 103 and broadly supported on Cloudflare's network, is a successor to HTTP/2 Server Push. Rather than pushing content preemptively, it sends a 103 Early Hints informational response that lists critical subresources via Link headers. The browser can immediately start requesting those assets while it continues to wait for the full HTML response from the origin.

Without Early Hints, a browser is idle from the moment it sends a request until the first byte of the HTML response arrives. On a dynamic page that involves server-side templating or a database lookup, that gap can be substantial. With Early Hints, that waiting time becomes productive; the browser fetches stylesheets and images in parallel with the document being assembled.

In HTTP terms, the flow works like this: a request goes out, the server responds with a 103 Early Hints message carrying preload and preconnect hints, and then follows with the final response. Cloudflare caches these Link headers from a page's 200 OK response and replays them as 103 responses on subsequent requests.

  1. Request sent — the client asks for the HTML document.
  2. Early Hints response — Cloudflare relays cached Link headers as a 103 response.
  3. Final response — the full HTML arrives; critical resources are already in flight or downloaded.

Measuring the Impact on an SSR Page

To quantify what Early Hints can do, Cloudflare engineers built a demo e-commerce landing page. The HTML and CSS were static, but pricing and inventory numbers were templated in live on every request via Pages Functions. A fixed delay was introduced to simulate the latency of an external data source, such as KV, Durable Objects, D1, or a third-party API.

The page included preload links for four critical resources: an external stylesheet, a t-shirt image, a cap image, and a keycap image. On the very first request, no cached hints existed, so the waterfall followed the traditional pattern: the browser sat blocked while the origin worked through the data lookup, then parsed the HTML and only afterward issued requests for the stylesheet and images.

On subsequent requests, the cached Link headers kicked in. Cloudflare sent a 103 response as soon as the request arrived, and the browser fired off requests for the CSS and images while the HTML was still being generated. The result: the t-shirt image that triggered LCP started loading 752ms earlier, moving LCP forward by 530ms. The document finished fully loading 562ms sooner.

One detail worth noting in the waterfall: the final four asset requests came back as 304 Not Modified. By default, Cloudflare Pages forces the browser to revalidate all assets with an If-None-Match header. That adds a round trip, though the responses are content-free and complete quickly. Developers who want to skip revalidation for assets that don't change often can set a custom Cache-Control header via a _headers file, e.g. caching images for a minute. Other performance options to pair with Early Hints include automatic CSS minification, Cloudflare Images, and Image Resizing.

How to Enable Early Hints on Your Pages Project

Cloudflare's Early Hints implementation caches Link headers sent with a page's 200 OK response. For Pages developers, there are two ways to supply those headers:

  • Via the _headers file: set Link headers explicitly for specific paths.
  • Automatically from HTML: Pages parses any <link> elements in your document and converts them into Link headers for the Early Hints response. This keeps hinting logic in the same file where resources are referenced, without leaving HTML.

Early Hints is already enabled automatically on all pages.dev domains. For projects using custom domains, enable the feature manually in the Cloudflare dashboard under the "Speed" tab.

Looking ahead, Cloudflare plans to roll out Smart Early Hints, which would automatically generate hints by analyzing traffic patterns and inferring important resources—no Link headers or <link> elements required. In the meantime, Early Hints on Pages is live now and ready for testing. Given the measurable gains on a simple dynamic page, the feature is a straightforward way to make server-rendered content on Pages feel considerably quicker.