Web Fundamentals

Resource Hints: Preload, Prefetch & Preconnect

Web Fundamentals Map

Rendering & Browser Architecture

Critical Rendering PathScript Loading Patterns (async/defer)Event Loop Deep DiveJavaScript Module Systems (CJS, ESM, UMD)Dynamic Module Loading (import())Import on InteractionImport on VisibilityBrowser Rendering Pipeline & Layout ThrashingRendering Strategies (CSR, SSR, SSG, ISR)Streaming SSR & Progressive HTMLIslands ArchitectureReact Server ComponentsFramework Reactivity (React, Vue, Svelte, Solid)HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC)DNS Resolution & TTL Caching

Performance

Core Web Vitals: LCP, INP, CLSPerformance Optimization Trade-offsCritical Resource PrioritizationCode Splitting & Dynamic ImportsTree Shaking & Dead Code EliminationLazy LoadingResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip & BrotliImage & Video OptimizationAdaptive LoadingList VirtualizationWeb Workers vs Main ThreadMemory Leaks: Detection & PreventionManaging Third-Party ScriptsHow CDNs WorkHTTP Caching Deep DiveService Workers & Offline StrategyPWA Fundamentals

Security

Cross-Site Scripting (XSS)Cross-Site Request Forgery (CSRF)CORS ExplainedCORS Preflight, Credentials & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? (TLS/SSL)Authorization Best PracticesCookie Security & Session Hardening

State & Data Architecture

State Management Guide (Context vs Zustand vs Redux)React Query & Server State CachingData Fetching PatternsCaching StrategiesPagination: Offset vs Cursor-BasedReal-time Communication (WebSocket, SSE, Polling)
mediumWeb Fundamentals

Resource Hints: Preload, Prefetch & Preconnect

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

TL;DRpreload = critical now • prefetch = likely next • preconnect = early connection setup
High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

Resource hints tell the browser how to prioritize network requests. Preload fetches critical assets for the current page, prefetch loads likely future resources, and preconnect warms up important origins early. Used correctly, they significantly improve LCP and overall loading performance.

Preload = first-class passengers who must board immediately (critical fonts, hero image). Prefetch = standby passengers for the next flight (likely next page). Preconnect = ground crew preparing the gate early for important destinations.

Identify Critical Resources
Preload (Current Page)
Prefetch (Next Likely Page)
Preconnect (External Origins)

1Preload – Critical Resources

Tells the browser to fetch important assets with high priority for the current navigation. Ideal for LCP images, critical fonts, and essential JS/CSS.

head.htmlhtml
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/hero.webp" as="image">

2Prefetch – Future Resources

Low-priority hint for resources likely needed in the near future (next page, heavy components). Browser may skip under network pressure.

3Preconnect & DNS-Prefetch

Preconnect establishes early DNS + TCP + TLS for important third-party domains. DNS-prefetch is a lighter DNS-only version.

Key Takeaways
  • ✓Preload critical resources needed for current page
  • ✓Prefetch for likely next navigation
  • ✓Preconnect to important external domains
  • ✓Always specify 'as' and crossorigin where needed
  • ✓Hints are priority signals — use them judiciously
  • ✓Validate with Lighthouse and real-user metrics
  • ✓Combine with critical CSS and lazy loading for best results
PreviousNext

Topic Guide

On this page