Chapter 59: Lazy Loading & Resource Scheduling

Lazy Loading Anti-Patterns & Catastrophes

**Part 12: Performance & Optimization** — Chapter 59: Lazy Loading & Code Splitting

LEARNING OBJECTIVES ⌵
  • Recognize and prevent the #1 LCP Killer: Lazy loading the above-the-fold hero image.
  • Understand why adding loading="lazy" to hero images delays Largest Contentful Paint by 1–3 seconds.
  • Fix broken print stylesheets caused by unrendered lazy images (@media print).
  • Avoid SEO crawling gaps caused by poorly implemented custom JavaScript lazy loaders.
🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation
🌐
1. Input
Directives & Tags
⚙️
2. Parse
Tokenizer & AST
🌳
3. Layout
Box Model & Flow
🎨
4. Render
GPU Paint & Composite
PHASE 1: INPUT & DIRECTIVES
Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The #1 LCP Killer: Lazy-Loaded Hero Images

WRONG (Delays LCP by 2000ms! ❌):
<img src="/hero.avif" loading="lazy" alt="Hero banner">
  1. Browser encounters HTML tag.
  2. Because loading="lazy" is present, the browser BLOCKS downloading until layout is complete.
  3. Layout runs $\rightarrow$ Browser realizes image is inside the viewport.
  4. Browser FINALLY starts network download $\rightarrow$ LCP score fails catastrophically!

RIGHT (Sub-1s LCP ✅):
<link rel="preload" as="image" href="/hero.avif" fetchpriority="high">
<img src="/hero.avif" fetchpriority="high" alt="Hero banner">
  1. Browser Preload Scanner discovers image in first 10ms of HTML streaming.
  2. Network fetch starts immediately with highest priority before CSS even finishes!

📌 Key Takeaways

  • NEVER put loading="lazy" on the first 1–2 visible images on a page.
  • Use fetchpriority="high" on your primary hero LCP image.
  • Add print listener fallbacks to trigger instant rendering of all lazy assets when window.print() is triggered.
  • --

❓ Knowledge Check

1. Which of the following is correct?

2. Which of the following is correct?