HAP (HyBit A. ProtoBot) studying on his laptop

HAP's Learning Lab: Loading Strategies

Optimizing When and How Content Loads

Welcome to Station 5! Prof. Teeters taught me three essential loading strategies that can make websites dramatically faster. She explained it like packing for a trip – do you bring everything at once, or just what you need when you need it? Let me show you what I learned! 🚀

The Three Core Strategies

📦 Traditional Loading (Everything at Once)

How it works: Browser downloads everything before showing the page. All CSS, JavaScript, and images load together. Simple but can be slow.

When to use it: Small websites (under 200KB total), critical landing pages, when everything is essential.

Example: A local bakery's single-page site loads their menu, hours, and photos all at once – just 150KB total, loads in under 2 seconds.

🎯 Lazy Loading (Just in Time)

How it works: Load only what's visible first. Fetch additional content as users scroll. Images below the fold wait their turn.

The magic attribute: Just add loading="lazy" to images and iframes that aren't immediately visible. The browser handles the rest!

Example: An online magazine loads the first article immediately, but the other 50 articles only load their images as you scroll. Result: 80% faster initial load!

🚀 Progressive Enhancement (Layer by Layer)

The loading order:

  • HTML First: Content and structure (loads in 0.5 seconds)
  • CSS Second: Visual design (loads at 1 second)
  • JavaScript Last: Interactivity (loads at 2 seconds)
  • Extras Finally: Analytics, widgets (loads when idle)

Example: A news site's article text appears instantly (readable!), then styles make it pretty, then comments and sharing buttons arrive. Users can start reading immediately instead of staring at a blank page.

HAP looking confused while studying

HAP's Performance Discovery:

Prof. Teeters showed me a website that loaded instantly, and I was so impressed! Then she showed me the exact same site WITHOUT lazy loading – it took 8 seconds! That's when I understood: loading strategies aren't just technical details, they're the difference between users staying or leaving. One attribute (loading="lazy") saved 80% of the load time!

Script Loading Attributes

Prof. Teeters warned me: "JavaScript can block your entire page!" Here's what she taught me about controlling when scripts run:

No attribute (Default)

  • Stops HTML parsing while downloading
  • Executes immediately
  • Blocks everything else
  • Use only for critical scripts that must run first

Async

  • Downloads alongside HTML parsing
  • Executes as soon as it's ready (interrupts if needed)
  • Good for independent scripts like analytics
  • Order isn't guaranteed

Defer

  • Downloads alongside HTML parsing
  • Waits to execute until HTML is fully parsed
  • Maintains script order
  • Perfect for most application scripts

🟠 HAP's Tip

Prof. Teeters taught me: "When in doubt, use defer!"

Resource Hints

Prof. Teeters explained resource hints as "giving the browser a heads up about what's coming!"

Preconnect
<link rel="preconnect" href="https://fonts.googleapis.com">

Use for: Establishes early connection to external domains. Perfect for CDNs, font providers, and APIs.

"Hey browser, we'll need to talk to this server soon"

Preload
<link rel="preload" href="hero-image.webp" as="image">

Use for: Forces download of critical resources. Great for fonts, hero images, and critical CSS.

"This is essential – grab it right now!"

Prefetch
<link rel="prefetch" href="next-page.html">

Use for: Suggests resources for future navigation. Ideal for next page resources and lazy-loaded chunks.

"We might need this later, grab it when you're idle"

Real-World Impact

Sarah's Portfolio - Before

  • Everything loads at once
  • 15 images (8MB) download immediately
  • All JavaScript in one bundle (450KB)
  • Time to Interactive: 12 seconds
  • Lighthouse score: 35

Sarah's Portfolio - After

  • HTML and critical CSS load first
  • Images use lazy loading
  • Scripts use defer attribute
  • Resource hints for fonts
  • Time to Interactive: 2.8 seconds
  • Lighthouse score: 92

77% improvement!

🎯 Quick Reference Guide

1

The Golden Rules

  • Start Simple: Get content visible fast, enhance later
  • Load Visible First: Everything below the fold can wait
  • Defer When Possible: Let HTML parse before running scripts
  • Hint at What's Coming: Help the browser prepare
  • Measure Everything: Use Lighthouse to track improvements
2

Quick Decision Guide

  • Images below the fold? → Add lazy loading
  • Script not critical? → Add defer attribute
  • Using external fonts? → Add preconnect
  • Have a hero image? → Add preload
  • Know the next page? → Add prefetch
3

Your Homework

Time to optimize! Here's what you'll do:

  • Audit your current project - Run Lighthouse and note the score
  • Add lazy loading to all images below the fold
  • Add defer to non-critical scripts
  • Add one preconnect for an external resource
  • Re-run Lighthouse and celebrate your improvements!