advanced 9 min read

Network Protocols & Resource Hints (HTTP/2, HTTP/3, Caching, Preload)

Network protocols (HTTP/1.1, HTTP/2 multiplexing, HTTP/3 QUIC) and browser resource hints (preload, prefetch, preconnect) dictate how fast assets are fetched, compressed, and negotiated across the network.

Why it matters in interviews

Even the most optimized React code will feel slow if the network waterfall is blocked by Head-of-Line blocking, missing TLS preconnections, uncompressed payloads, or poor Cache-Control headers.

Visual & Interactive Explanation

Resource Hints Comparison Matrix

Interactive Comparison

rel='preload'

Mandatory current page

Critical Path

TargetCurrent page LCP / Fonts

PriorityHigh / Critical (Mandatory)

AttributeMust include 'as' (e.g. as='font')

Strengths

•Discovers hidden CSS background images & fonts early
•Directly improves LCP time

Trade-offs

•Over-preloading wastes bandwidth and delays other assets

rel='prefetch'

Speculative future page

Next Navigation

TargetNext probable page chunk

PriorityLowest (Idle time only)

StorageStored in HTTP Cache

Strengths

•Instantaneous 0ms sub-page navigations
•Never blocks current page rendering

Trade-offs

•Wastes mobile data if user doesn't visit predicted route

rel='preconnect'

Early handshake

DNS + TLS

TargetCross-origin CDN / API domain

PhasesDNS lookup + TCP + TLS handshake

Time Saved100ms - 300ms round trips

Strengths

•Eliminates multi-step socket negotiation latency

Trade-offs

•Connections closed if unused within 10 seconds

Code Examples & Implementation

Optimal HTML Resource Hints & Cache-Control Headers

<!-- 1. Preconnect to critical third-party font & image CDN -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://assets.mycdn.com" />

<!-- 2. Preload critical LCP hero image and custom header font -->
<link
  rel="preload"
  href="/fonts/inter-display.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>
<link
  rel="preload"
  href="/images/hero-banner.avif"
  as="image"
  fetchpriority="high"
/>

<!-- 3. Speculatively prefetch checkout bundle for likely next step -->
<link rel="prefetch" href="/_next/static/chunks/checkout.js" as="script" />

Interview-Ready Answers

HTTP/2 introduced multiplexing over a single TCP connection; HTTP/3 moves to UDP (QUIC) to eliminate TCP head-of-line blocking. Resource hints like preconnect and preload prioritize critical assets on the critical rendering path.

Official Documentation & Specifications

web.devweb.dev: Establish network connections early with preconnect

MDNMDN: Cache-Control HTTP Headers

MDNMDN: Preloading content with rel='preload'

Follow-up Questions & Deep Dives

Common Mistakes & Anti-Patterns

Preloading resources without specifying the 'as' attribute (causes the browser to fetch the resource twice with different credentials).
Setting 'Cache-Control: no-cache' thinking it means 'do not store' (no-cache still stores the asset, but revalidates with ETag; use 'no-store' to prevent caching).
Omitting the 'crossorigin' attribute when preloading fonts (fonts are fetched anonymously and will be downloaded twice if crossorigin is missing).

Real-World Architectural Scenario

A retail site's LCP metric is 3.8s because the hero image URL is defined inside an external CSS file. How do you reduce LCP below 1.5s?

Rate Your Readiness

Rate how comfortably you can explain this in an interview to update your global readiness gauge:

Rate your confidence: