Web Fundamentals

Lazy Loading: Load Resources On-Demand

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)
easyWeb Fundamentals

Lazy Loading: Load Resources On-Demand

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

Topic content

TL;DRLazy load everything below the fold. Use native loading='lazy', React.lazy() + Suspense, and Intersection Observer.
High Signal
Google
Meta
Netflix
Agoda
Meesho
30-Second Answerstart every interview with this

Lazy loading defers non-critical resources until they are needed. It improves initial load performance, reduces bandwidth usage, and boosts Core Web Vitals (especially LCP and CLS). Apply it to images, components, and third-party scripts.

Instead of unloading the entire truck (all resources) at the front door immediately, the driver only brings items when you actually need them — hero image first, then below-fold content, heavy components only when you open the door (interact/scroll).

Initial Load: Critical Resources Only
Scroll / Interaction Trigger
Lazy Load On-Demand
Smaller Initial Bundle + Faster LCP

1Native Image Lazy Loading

Use the loading='lazy' attribute. Modern browsers handle it automatically. Always set explicit width/height to prevent CLS.

image.htmlhtml
<img src="hero.jpg" loading="eager" width="1200" height="600" alt="Hero">
<img src="below-fold.jpg" loading="lazy" width="800" height="500" alt="Content">

2React Component Lazy Loading

Use React.lazy() + Suspense for heavy components like modals, charts, and editors.

3Intersection Observer & Custom Strategies

For advanced control, use Intersection Observer to load content when it approaches the viewport.

4Third-Party Scripts & Advanced Patterns

Load analytics, chat widgets, and maps after page interactive or on user interaction.

Key Takeaways
  • ✓Lazy load everything below the fold for better LCP
  • ✓Use native loading='lazy' for images
  • ✓React.lazy() + Suspense is the standard for components
  • ✓Always provide meaningful fallbacks and error handling
  • ✓Combine with prefetching on hover for smoother UX
  • ✓Measure before and after with real-user metrics
PreviousNext

Topic Guide

On this page