Alan Vo

Available for remote roles

Menu
  1. Home
  2. Blog
  3. Performance
  4. HTTP 103 Early Hints for ecommerce storefronts in 2026

Performance

HTTP 103 Early Hints for ecommerce storefronts in 2026

Performance

HTTP 103 Early Hints ecommerce is how I shave server think-time off cold landings when Magento, Shopify, or WooCommerce still has to hit a database before the first byte of HTML arrives. The browser gets a 103 Early Hints response with Link headers while PHP, Liquid, or layout XML runs in the background. I am Alan Vo, a Gold Coast web developer with eighteen years of catalogue work. This note is for production storefronts where LCP is still waiting on the origin, not for pages that already stream HTML in a few milliseconds.

Official guidance from Chrome on Early Hints is clear: if your server can return the final document immediately, use ordinary Link headers or <link rel="preload"> in the HTML instead. Early Hints only pays off when the connection would otherwise sit idle while the app builds the page. That pattern is common on personalised Magento PLPs, uncached WooCommerce category routes, and first paint on a busy Shopify collection after a cold CDN miss.

Why HTTP 103 Early Hints ecommerce matters on landing templates

HTTP 103 Early Hints ecommerce matters most on entry templates: homepage, top category PLPs, and hero PDPs that paid traffic hits cold. Chrome's Early Hints documentation describes the problem as server think-time: the browser has opened TCP and TLS, then waits with no useful work while Magento loads EAV, WooCommerce warms object cache, or a custom middleware resolves markets. During that gap, critical CSS, fonts, and sometimes the LCP image could already be in flight.

Largest Contentful Paint on web.dev still treats the hero image or main text block as the score driver. Early Hints does not replace width, format, and fetchpriority work from image formats that improve LCP on catalogues. It overlaps the network phase: hints start fetches for render-blocking CSS and stable font files while HTML is still being composed. Shopify's public write-up on Early Hints at scale reports desktop LCP gains when hints stay lean; mobile can regress when teams preload too aggressively. I treat that as a field warning, not a reason to skip measurement.

Second and third navigations benefit less because subresources are often warm. That is fine. CrUX and ads quality still weight first paint on the URL shoppers land on. Tuning hints on five high-traffic templates beats sprinkling 103 responses on every AJAX facet endpoint.

Retail conversion work on a Magento catalogue I shipped as contract work on an agency team reported about two and a half million dollars year-on-year sales lift after a broader performance programme. That included FPC, image discipline, and checkout hygiene, not Early Hints alone. Even so, origin latency on uncached landings belongs in the same conversation because slow first HTML still burns paid clicks.

HTTP 103 Early Hints ecommerce testing on a phone and laptop together

What changed for storefronts in 2025 and 2026

What changed for storefronts is wider edge support and clearer guardrails, not a new shopper-facing feature. The Early Hints article on Chrome for Developers was refreshed through 2026 with LCP before-and-after examples and explicit advice to mirror hints on the final 200 response. Major CDNs and nginx builds ship 103 configuration paths, which matters for self-hosted WooCommerce and Hyva Magento behind a reverse proxy.

Shopify has experimented with Early Hints at platform level; custom themes on other stacks still wire hints at nginx, Varnish, or Cloudflare. WordPress and WooCommerce rarely emit 103 out of the box, but page-cache plugins that already send Link on full HTML responses are the integration point. Magento Open Source and Adobe Commerce teams often attach hints at the load balancer after identifying render-blocking styles-m.css or theme bundles.

The important mindset shift from resource hints on web.dev is that Early Hints candidates are not always the same list as HTML preload tags. HTML preloads target late-discovered fonts and LCP images the preload scanner might miss. Early Hints fire before HTML exists, so stable theme CSS and primary JS bundles are reasonable candidates. Copying every HTML preload into 103 without review is how teams prefetch four unrelated scripts and wonder why mobile LCP regresses.

How HTTP 103 Early Hints ecommerce works on the wire

HTTP 103 Early Hints ecommerce works as a preliminary response: the server returns status 103 with one or more Link headers, then later returns 200 (or another final status) with the document. Each hint uses the same grammar as HTTP Link: </path/to/main.css>; rel=preload; as=style, or https://fonts.example.com; rel=preconnect. Supported browsers that understand 103 start connection setup and requests immediately. Browsers that ignore 103 wait for the final response as today.

Chrome documentation recommends duplicating relevant Link headers on the final response for backward compatibility and for hints you only discovered while generating HTML. A typical sequence looks like: client GET /women/dresses; edge forwards to origin; origin responds 103 Early Hints with preload for theme-base.css and preconnect to the static asset host; origin finishes layout and returns 200 with HTML plus matching Link headers. If your versioned CSS hash in the hint does not match the hash in HTML, the browser may fetch twice. Automation from the build pipeline must keep hashes aligned.

Stopwatch and notebook during a speed pass

Not every browser treats preload inside 103 identically. Check current browser support tables in the Chrome doc before relying on script preloads from hints alone. preconnect for font and CDN origins is the safer default when in doubt.

Early Hints does not bypass cache rules. If HTML is fully page-cached at the edge with sub-50 ms TTFB, you likely do not need 103 on that route. Hints shine when Cache-Control forces revalidation, cookies vary the response, or FPC is deliberately bypassed for a segment. Pair with hosting, cache and CDN for WordPress stores thinking so hints are not a bandage for missing full-page cache.

Production checklist for HTTP 103 Early Hints ecommerce

Production checklist for HTTP 103 Early Hints ecommerce starts with template selection, then hint content, then parity with HTML and deploy automation.

  1. Pick five to ten cold landing URLs. Use analytics entry paths, not sitemap depth. Home, top three categories, and a flagship PDP usually cover most ad and organic landings.
  1. Profile server think-time. If origin TTFB is already under about 200 ms on cache hit, skip 103 on that route. Measure on mobile networks in WebPageTest or RUM, not only datacenter curl.
  1. List at most three critical resources per template. Follow the lean pattern Shopify published: theme base CSS, one font face file, and optionally a stable hero image URL that is identical on most PDPs of a type. Avoid preloading entire slider bundles or review widgets.
  1. Prefer stable URLs for hinted assets. Hashed files are fine when your deploy pipeline writes the same hash into both 103 and HTML. Manual edits break parity.
  1. Emit 103 only for clients that support it. User-agent checks are brittle; many teams enable 103 globally and rely on ignoring clients. Document your edge behaviour for the next developer.
  1. Mirror hints on the final response. Include the same Link headers on 200 as Chrome recommends, and add any extra preloads you learned while rendering.
  1. Scope dynamic routes carefully. Cart, checkout, account, and post-login wholesale pricing should not send speculative preloads that might pull checkout CSS on a browse page.
  1. Validate fonts and CSP. If style-src or font-src blocks a hinted font file, Early Hints only wastes bandwidth.
Compressed product photography on a light table
  1. Roll out per template with before and after CrUX or RUM. Keep a kill switch at the CDN when mobile LCP p75 worsens.
  1. Document ownership. Hints belong with whoever owns nginx, Varnish, or CDN rules, not only the theme repo.

What breaks HTTP 103 Early Hints ecommerce rollouts

What breaks HTTP 103 Early Hints ecommerce rollouts is usually quantity and mismatch, not the status code itself. Preloading seven assets because marketing asked to warm every tag manager container duplicates work on constrained mobile CPUs and radio. Shopify's field data showed degradation when more than about three resources were hinted on phones. I cap hints at critical render path only.

Version skew is the second failure mode. Early Hints predicted main.abcd100.css while HTML linked main.abcd105.css. Browsers fetch both or discard the wrong one. Fix with build-time injection shared between edge workers and PHP/Liquid templates.

Using 103 on fully cached HTML at the edge can add an extra round trip or confuse older HTTP/1.1 clients. nginx documentation notes HTTP/1.1 clients must understand status 103 or parse errors occur. Terminate HTTP/2 or HTTP/3 at the edge when possible for storefronts.

WooCommerce shops that send no-store on every HTML response for security sometimes cannot benefit from edge Early Hints until headers are scoped. Browse templates should not inherit checkout paranoia.

Magento Varnish ESI and hole-punching can delay the moment the app knows which CSS block applies. Sending hints before market or customer group resolution risks preloading the wrong theme bundle. Resolve segment first, or restrict hints to anonymous catalogue routes.

How to measure HTTP 103 Early Hints ecommerce impact

How to measure HTTP 103 Early Hints ecommerce impact is template-level LCP and TTFB in the field, split by device class, not a single lab Lighthouse run. Compare p75 LCP on hinted URLs for four weeks before and after. Watch largest-contentful-paint in CrUX and your RUM beacon on the same pathname.

In DevTools Network, filter for the main document and confirm a 103 entry precedes 200 on supported Chrome. WebPageTest filmstrips should show CSS starting before HTML download completes when hints work.

Track bytes wasted: if hinted resources were not used in the final render, remove them. Early Hints magnifies mistakes because fetches start earlier.

Segment mobile and desktop separately because vendor data already shows divergent outcomes. INP is usually unaffected unless you preload heavy JavaScript that competes with first interaction. Keep script hints off browse templates unless they are genuinely render-blocking and small.

Checkout on a phone with a simple form

Do not confuse TTFB improvement with LCP improvement. A faster first byte that preloads the wrong hero does not help the shopper see the product image sooner. Cross-check against Core Web Vitals and INP for online stores so you still pass all three metrics where Google evaluates them.

Cold landings on Their Nibs, a Shopify fashion rebuild where published results were 31% more conversions and 48% more orders, are where I would pair lean Early Hints with image and script discipline already on the theme. Skanvi is WooCommerce furniture with heavy PLPs and long server routes when cache is cold. Retail conversion is Magento-scale work where FPC and CDN configuration usually come before 103, but uncached category landings still appear in ads reports. For adjacent techniques, see speculation rules for ecommerce on the forward navigation hop and image formats that improve LCP for the LCP element itself.

FAQ

What is HTTP 103 Early Hints ecommerce in plain terms?

HTTP 103 Early Hints ecommerce means the server tells the browser which CSS, fonts, or origins to fetch while the shop platform is still building the HTML for a product or category page. It uses status code 103 and Link headers. Shoppers do not see a different page; they may see the main content sooner when hints were correct and server think-time was real.

When should HTTP 103 Early Hints ecommerce not be used?

HTTP 103 Early Hints ecommerce should not be used when HTML already returns in a few hundred milliseconds from full-page cache or a fast origin. It also should not replace fixing oversized images, render-blocking tags, or missing CDN cache on WooCommerce and Magento. Use normal Link or <link rel="preload"> on the final response when think-time is negligible.

Does HTTP 103 Early Hints ecommerce work on Shopify, WooCommerce and Magento?

HTTP 103 Early Hints ecommerce works on any stack where you control the edge or origin response headers. Shopify may expose platform-level behaviour; WooCommerce and Magento typically need nginx, Varnish, Cloudflare, or another proxy to emit 103 before PHP finishes. The storefront platform does not block hints; your hosting and cache architecture determines whether you can send them safely.

How many resources should HTTP 103 Early Hints ecommerce preload?

HTTP 103 Early Hints ecommerce should preload one to three critical above-the-fold resources per landing template, usually base CSS, one font file, and sometimes a stable LCP image URL. More preloads, especially on mobile, can hurt LCP in field data. Measure after each change and roll back when p75 worsens.

CDN and hosting notes next to a keyboard

Keep reading

Contact if you want this kind of work on a live store.