What is the difference between preload and prefetch?

preload fetches a resource the current page needs at high priority; prefetch fetches a resource for a future page at idle priority and stores it in cache.

Why must a preloaded font include the crossorigin attribute?

Font requests use CORS. Without crossorigin on the preload hint, the preload and the @font-face fetch use different request modes, causing the browser to fetch the font twice.

Which browsers support the Speculation Rules API as of 2026?

Chromium-only in practice; document rules and eagerness arrived later than the basic prerender API. Firefox is unshipped; Safari is behind a flag (off by default) as of 2026. Always feature-detect with HTMLScriptElement.supports('speculationrules').

When does fetchpriority='high' on an image help LCP?

When the browser would otherwise deprioritize the LCP image behind scripts or stylesheets. It corrects the scheduler's ordering without changing HTML structure.

Why does domain-sharding hurt performance with HTTP/2?

HTTP/2 multiplexes over one connection, so extra domains create unnecessary TLS handshakes and separate congestion windows — net slower than a single connection.

What does 'eagerness: moderate' mean in Speculation Rules?

Chrome triggers the prerender on hover/focus, not immediately on page load. It balances bandwidth cost against the probability the user will actually navigate.

Network Performance · fearchitect

Summary

Resource hints, priority hints, and the Speculation Rules API let you control what the browser fetches, how urgently, and when — before the user asks for it. HTTP/2 and HTTP/3 multiplexing eliminate head-of-line blocking. Together, they shrink the critical path and hide latency behind pre-work.

Jump to the interview angle

Resource hints — what each one does

`preconnect` — opens TCP+TLS to an origin early; saves ~150 ms per cold connection.
`dns-prefetch` — resolves DNS only; cheaper than preconnect for low-priority third parties.
`preload` — fetches a current-page resource early (LCP image, font, late script). Requires `as=` for the correct request context.
`prefetch` — fetches a future-page resource at idle priority, stored in the HTTP cache.
`modulepreload` — fetches, parses, and compiles an ES module graph before first import.
`fetchpriority="high"` on the LCP `<img>` stops the browser deprioritizing it; `fetchpriority="low"` on below-fold images frees bandwidth.

Speculation Rules API — prerender and prefetch

The Speculation Rules API prerenders or prefetches entire URLs before navigation. The basic prerender API is Chromium-only; document rules (where/href_matches) and eagerness arrived later, so feature-detect rather than target a version.

Speculation Rules JSON (Chromium-only)html

<script type="speculationrules">
{
  "prerender": [
    {
      "where": { "href_matches": "/articles/*" },
      "eagerness": "moderate"
    }
  ],
  "prefetch": [
    {
      "urls": ["/checkout"],
      "eagerness": "conservative"
    }
  ]
}
</script>

moderate triggers prerender on hover; conservative waits for mousedown. Feature-detect with HTMLScriptElement.supports('speculationrules') before injecting.

Hints fire in urgency order: preconnect warms origins, preload fetches the LCP asset, then idle prefetch and prerender prepare the next navigation.

Speculation Rules is Chromium-only

As of 2026, Firefox has not shipped Speculation Rules and Safari supports it only behind a flag (off by default). Always feature-detect before injecting the script. Treat it as progressive enhancement — pages must load correctly without it.

Interview angle

Interviewers probe which hint does what and whether you know Speculation Rules browser limits. The real signal: you can rank critical-path resources and explain why prerender beats prefetch for instant navigations.

Soundbite: "Preconnect warms origins, preload unlocks early fetches, Speculation Rules prerenders the next page — Chrome only, so always feature-detect."

Key terms

Critical path: Resources that block first paint; shortening it cuts LCP.
preconnect: Opens TCP+TLS to an origin before the browser needs a resource from it.
fetchpriority: HTML attribute hinting high/low fetch urgency to the browser's scheduler.
Speculation Rules API: Chrome API to prerender or prefetch future navigations via inline JSON.
modulepreload: Fetches, parses, and compiles an ES module graph ahead of first import.

Summary

Resource hints — what each one does

Speculation Rules API — prerender and prefetch

Interview angle

Key terms

Related topics

Further reading

Search fearchitect