Browser Resource Loading & Network Priority

The definitive reference for frontend developers and performance engineers — 86 pages across four sections, 25 topics and 57 hands-on guides. Master fetch priority, preload strategy, script and lazy-loading order, HTTP/2 & HTTP/3 multiplexing, field measurement of real protocol wins, and framework-specific tactics for Next.js, Nuxt, Astro, and SvelteKit.
Loading Mechanics Resource Hints HTTP/2 & HTTP/3 Frameworks

Modern browsers operate as sophisticated network schedulers, dynamically prioritising dozens of concurrent requests to maximise rendering performance. Understanding and influencing that scheduler — through fetchpriority, rel="preload", preconnect, and protocol-level optimisations — is the difference between a mediocre and a top-percentile Core Web Vitals score.

This site provides spec-aligned, production-ready guidance across four interconnected sections: how browsers build and manage their internal priority queues, order scripts, and defer offscreen work; how resource hints (preload, prefetch, preconnect, modulepreload, media preloading, and Speculation Rules) instruct the network layer before the parser even sees the DOM; how HTTP/2 & HTTP/3 stream multiplexing, 103 Early Hints, and QUIC transport interact with browser-side scheduling — and how to measure the difference in the field; and how meta-frameworks like Next.js, Nuxt, Astro, and SvelteKit emit — or fight — those signals on your behalf.

Those four sections hold 25 topics and 57 guides — 86 pages in total. Whether you're diagnosing a priority inversion in Chrome DevTools, choosing between loading="lazy" and IntersectionObserver, tuning font-display to eliminate FOUT, weighing TCP against QUIC under packet loss, containing third-party tag impact, or untangling a Next.js LCP regression — this reference covers the theory, the implementation patterns, and the trade-offs.

New: Head-to-Head Decision Guides

Four fresh comparisons that settle the choices engineers argue about most — each one weighs the two options against concrete conditions rather than declaring a winner.

preconnect vs dns-prefetch

One buys a full TLS handshake, the other only a DNS lookup. A matrix of origin count, connection cost, and when the cheaper hint is the right call.

Compare

Priority Trees vs the Priority Header

HTTP/2's dependency tree was abandoned in practice; HTTP/3 replaced it with an urgency header. What changed, what servers honour, and what you can control.

Compare

TCP vs QUIC Loss Recovery

What a dropped packet actually costs on each transport — retransmission timing, stream independence, and how much of the win survives on a real network.

Compare

loading="lazy" vs IntersectionObserver

The native attribute is one line; the observer gives you the thresholds. Where each one wins, and the LCP regression that catches teams using the wrong one.

Compare

Five new topics

Start Here

How Fetch Priority Affects LCP

The fetchpriority attribute directly shifts your Largest Contentful Paint. See how browsers weigh it against other signals and which mis-applications cost the most time.

Read

Fixing Low-Priority Critical CSS

When browsers downgrade your critical stylesheet, First Contentful Paint stalls. Step-by-step diagnosis and framework-specific remediation.

Read

Does HTTP/3 Eliminate HOL Blocking?

QUIC vs TCP at the transport layer — what HTTP/3 actually solves, what it leaves unsolved, and how to measure the real-world waterfall impact.

Read

Preload vs Prefetch for Images

A decision framework for hero images, responsive images, and off-screen content — with CORS pitfalls and double-fetch gotchas covered in full.

Read

Preload vs Prefetch vs modulepreload

The general three-way decision matrix — timing, priority, cache destination, CORS mode, and the cost of choosing the wrong hint for each resource type.

Read

Fixing async Script Race Conditions

Why two async scripts that depend on each other fail intermittently, and the ordering patterns that make execution deterministic again.

Read

Server Push vs 103 Early Hints

Why HTTP/2 push was removed from browsers, and how the 103 interim response fills the server-think-time gap with client-controlled fetching instead.

Read

Collecting nextHopProtocol in RUM

Read the negotiated protocol straight out of the Resource Timing API, sample it safely, and tell a genuine HTTP/3 win from measurement noise.

Read

Topics Covered

Four sections, 25 topics, 57 guides. Every topic opens with the mechanics and a support matrix, then breaks down into task-sized guides.

Eight topics on how browsers schedule, classify, and dispatch network requests — priority tiers, fetchpriority, script execution order, viewport-driven fetching, render-blocking behaviour, third-party impact, cache interaction, and waterfall analysis.

Seven topics on rel="preload", prefetch, preconnect, modulepreload, Speculation Rules, and media preloading — including font strategy, dynamic injection, and CORS considerations.

Six topics on binary framing, stream prioritisation, head-of-line blocking, 103 Early Hints, QUIC transport, connection coalescing, CDN edge tuning — and how to measure protocol performance on real traffic.

Four topics on how Next.js, Nuxt, Astro, and SvelteKit emit resource hints on your behalf — next/image priority, next/script strategies, NuxtLink prefetching, Astro client directives, SvelteKit preload directives, and where framework defaults fight the browser scheduler.

All Articles

All 86 pages, grouped by section and topic.

Loading Mechanics

Resource Hints

HTTP/2 & HTTP/3

Framework Strategies