JavaScript Performance

Lazy Loading

Load resources only when needed for better performance and user experience

Find videos you like?

Save to resource drawer for future reference!

Load Resources On-Demand for Better Performance

Lazy Loading is a performance optimization technique that defers loading of non-critical resources until they're actually needed. Perfect for images, videos, and code splitting!

Image Lazy Loading

Load images only when they're about to enter the viewport. Saves bandwidth and speeds up initial page load.

Intersection Observer

Browser API to detect when elements enter the viewport. Perfect for implementing custom lazy loading logic.

Code Splitting

Load JavaScript modules only when needed using dynamic import(). Reduces initial bundle size significantly.

Native Image Lazy Loading

Frontend

<div style="max-width: 700px; margin: 0 auto;">
  <h2 style="color: #0284c7; margin-bottom: 20px;">Scroll to Load Images</h2>
  <div style="display: flex; gap: 12px; margin-bottom: 20px;">
    <div style="flex: 1; padding: 12px; background: #e0f2fe; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #0284c7; margin-bottom: 4px;">Images Loaded</div>
      <div id="imagesLoaded" style="font-size: 24px; font-weight: bold; color: #0369a1;">0 / 12</div>
    </div>
    <div style="flex: 1; padding: 12px; background: #dcfce7; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #16a34a; margin-bottom: 4px;">Bandwidth Saved</div>
      <div id="bandwidthSaved" style="font-size: 24px; font-weight: bold; color: #15803d;">~0 KB</div>
    </div>
  </div>
  <div id="scrollContainer" style="height: 400px; overflow-y: auto; border: 2px solid #7dd3fc; border-radius: 10px; padding: 20px; background: #f0f9ff;">
    <p style="color: #0369a1; font-weight: bold; margin-bottom: 15px;">Scroll down to see lazy loading in action! 👇</p>
    <div id="imageContainer"></div>
  </div>
  <div style="margin-top: 15px; padding: 12px; background: #fef3c7; border-radius: 8px; border: 2px solid #fcd34d;">
    <strong style="color: #92400e;">💡 Tip:</strong>
    <span style="color: #78350f;">Images only load when they're about to enter the viewport!</span>
  </div>
</div>

Live Preview

Loading preview...

Intersection Observer API - The Foundation

Modern browser API for detecting element visibility

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Native Lazy Loading (Super Easy!)

Modern browsers support lazy loading out of the box

Just add loading="lazy" attribute!

<!-- Images -->
<img src="photo.jpg" loading="lazy" alt="Photo" />

<!-- Iframes -->
<iframe src="video.html" loading="lazy"></iframe>

<!-- That's it! Browser handles the rest -->
<img src="another-photo.jpg" loading="lazy" alt="Another" />

Browser Support

Supported in all modern browsers (Chrome 77+, Firefox 75+, Safari 15.4+). For older browsers, images load normally - it's a progressive enhancement!

Dynamic Import - Code Splitting

Frontend

<div style="max-width: 600px; margin: 0 auto;">
  <h2 style="color: #8b5cf6; margin-bottom: 20px;">Load Modules On-Demand</h2>
  <div style="display: flex; gap: 12px; margin-bottom: 20px;">
    <div style="flex: 1; padding: 12px; background: #f3e8ff; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #8b5cf6; margin-bottom: 4px;">Modules Loaded</div>
      <div id="modulesLoaded" style="font-size: 24px; font-weight: bold; color: #6b21a8;">0</div>
    </div>
    <div style="flex: 1; padding: 12px; background: #fef3c7; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #f59e0b; margin-bottom: 4px;">Initial Bundle</div>
      <div style="font-size: 24px; font-weight: bold; color: #d97706;">Small ✓</div>
    </div>
  </div>
  <div style="border: 2px solid #c084fc; border-radius: 10px; padding: 20px; background: #faf5ff; margin-bottom: 15px;">
    <h3 style="color: #6b21a8; margin-bottom: 15px;">Click to Load Features:</h3>
    <div style="display: grid; gap: 10px;">
      <button id="loadChart" style="padding: 12px; background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">
        📊 Load Chart Module
      </button>
      <button id="loadEditor" style="padding: 12px; background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">
        ✏️ Load Editor Module
      </button>
      <button id="loadGallery" style="padding: 12px; background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">
        🖼️ Load Gallery Module
      </button>
    </div>
  </div>
  <div id="output" style="padding: 15px; background: white; border-radius: 8px; border: 2px solid #e9d5ff; min-height: 100px; color: #475569;">
    <p style="color: #94a3b8; text-align: center; margin-top: 20px;">Click a button to dynamically load a module...</p>
  </div>
</div>

Live Preview

Loading preview...

Dynamic Import() in Action

Frontend

<div style="max-width: 600px; margin: 0 auto;">
  <h2 style="color: #f59e0b; margin-bottom: 20px;">Dynamic Module Loading Demo</h2>
  <div style="display: flex; gap: 12px; margin-bottom: 20px;">
    <div style="flex: 1; padding: 12px; background: #fef3c7; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #f59e0b; margin-bottom: 4px;">Initial Bundle</div>
      <div style="font-size: 20px; font-weight: bold; color: #d97706;">25 KB</div>
    </div>
    <div style="flex: 1; padding: 12px; background: #dbeafe; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #3b82f6; margin-bottom: 4px;">Loaded On-Demand</div>
      <div id="dynamicLoaded" style="font-size: 20px; font-weight: bold; color: #2563eb;">0 KB</div>
    </div>
  </div>
  <div style="border: 2px solid #fbbf24; border-radius: 10px; padding: 20px; background: #fffbeb; margin-bottom: 15px;">
    <h3 style="color: #d97706; margin-bottom: 15px;">Click to Load Modules:</h3>
    <div style="display: grid; gap: 10px;">
      <button id="loadUtils" style="padding: 12px; background: linear-gradient(135deg, #f59e0b, #fbbf24); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">
        📦 Load Utils Module (45 KB)
      </button>
      <button id="loadAnalytics" style="padding: 12px; background: linear-gradient(135deg, #3b82f6, #60a5fa); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">
        📊 Load Analytics Module (120 KB)
      </button>
      <button id="conditionalLoad" style="padding: 12px; background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">
        🔍 Conditional Feature Detection
      </button>
    </div>
  </div>
  <div id="output" style="padding: 15px; background: white; border-radius: 8px; border: 2px solid #fed7aa; min-height: 120px;">
    <div style="color: #94a3b8; text-align: center; margin-top: 20px;">
      💡 Click buttons to dynamically import modules<br>
      <span style="font-size: 13px;">Notice: Code only loads when needed!</span>
    </div>
  </div>
  <div style="margin-top: 15px; padding: 12px; background: #dcfce7; border-radius: 8px; border: 2px solid #86efac;">
    <strong style="color: #15803d;">✅ Bundle Savings:</strong>
    <span style="color: #166534;">By not loading everything upfront, initial page load is much faster!</span>
  </div>
</div>

Live Preview

Loading preview...

Best Practices

Make the most of lazy loading

✓ Do This

📸Lazy load below-the-fold images - Images not visible on initial load
📦Code split large libraries - Monaco Editor, Chart.js, etc.
🎯Use rootMargin - Start loading slightly before viewport
🖼️Add placeholders - Show loading state for better UX

✗ Avoid This

⚠️Don't lazy load hero images - Above-the-fold content should load immediately
🚫Don't overuse dynamic imports - Too many requests can hurt performance
📱Don't forget mobile - Test on slow connections and devices
🔍Don't hurt SEO - Critical content should be server-rendered

Key Takeaways

📸

Native Lazy Loading

Use loading="lazy" attribute
Supported in all modern browsers
Zero JavaScript required

👁️

Intersection Observer

Detect element visibility
Custom lazy loading logic
Better than scroll listeners

📦

Code Splitting

Use import() for modules
Load features on-demand
Reduce initial bundle size

🚀

Performance Gains

Faster initial page load
Reduced bandwidth usage
Better user experience

Pro Tip

Combine lazy loading with other techniques like image optimization (WebP, responsive images) and CDN caching for maximum performance. Measure with Lighthouse to see the impact!

Previous Topic

Debouncing & Throttling

Limiting function execution for performance optimization.

Next Topic

Web Workers

Running JavaScript in background threads for heavy computations.

Ask a Question

Have a question about Lazy Loading? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Performance

Lazy Loading

Load resources only when needed for better performance and user experience

Find videos you like?

Save to resource drawer for future reference!

Load Resources On-Demand for Better Performance

Lazy Loading is a performance optimization technique that defers loading of non-critical resources until they're actually needed. Perfect for images, videos, and code splitting!

Image Lazy Loading

Load images only when they're about to enter the viewport. Saves bandwidth and speeds up initial page load.

Intersection Observer

Browser API to detect when elements enter the viewport. Perfect for implementing custom lazy loading logic.

Code Splitting

Load JavaScript modules only when needed using dynamic import(). Reduces initial bundle size significantly.

Native Image Lazy Loading

Frontend

<div style="max-width: 700px; margin: 0 auto;">
  <h2 style="color: #0284c7; margin-bottom: 20px;">Scroll to Load Images</h2>
  <div style="display: flex; gap: 12px; margin-bottom: 20px;">
    <div style="flex: 1; padding: 12px; background: #e0f2fe; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #0284c7; margin-bottom: 4px;">Images Loaded</div>
      <div id="imagesLoaded" style="font-size: 24px; font-weight: bold; color: #0369a1;">0 / 12</div>
    </div>
    <div style="flex: 1; padding: 12px; background: #dcfce7; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #16a34a; margin-bottom: 4px;">Bandwidth Saved</div>
      <div id="bandwidthSaved" style="font-size: 24px; font-weight: bold; color: #15803d;">~0 KB</div>
    </div>
  </div>
  <div id="scrollContainer" style="height: 400px; overflow-y: auto; border: 2px solid #7dd3fc; border-radius: 10px; padding: 20px; background: #f0f9ff;">
    <p style="color: #0369a1; font-weight: bold; margin-bottom: 15px;">Scroll down to see lazy loading in action! 👇</p>
    <div id="imageContainer"></div>
  </div>
  <div style="margin-top: 15px; padding: 12px; background: #fef3c7; border-radius: 8px; border: 2px solid #fcd34d;">
    <strong style="color: #92400e;">💡 Tip:</strong>
    <span style="color: #78350f;">Images only load when they're about to enter the viewport!</span>
  </div>
</div>

Live Preview

Loading preview...

Intersection Observer API - The Foundation

Modern browser API for detecting element visibility

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Native Lazy Loading (Super Easy!)

Modern browsers support lazy loading out of the box

Just add loading="lazy" attribute!

<!-- Images -->
<img src="photo.jpg" loading="lazy" alt="Photo" />

<!-- Iframes -->
<iframe src="video.html" loading="lazy"></iframe>

<!-- That's it! Browser handles the rest -->
<img src="another-photo.jpg" loading="lazy" alt="Another" />

Browser Support

Supported in all modern browsers (Chrome 77+, Firefox 75+, Safari 15.4+). For older browsers, images load normally - it's a progressive enhancement!

Dynamic Import - Code Splitting

Frontend

<div style="max-width: 600px; margin: 0 auto;">
  <h2 style="color: #8b5cf6; margin-bottom: 20px;">Load Modules On-Demand</h2>
  <div style="display: flex; gap: 12px; margin-bottom: 20px;">
    <div style="flex: 1; padding: 12px; background: #f3e8ff; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #8b5cf6; margin-bottom: 4px;">Modules Loaded</div>
      <div id="modulesLoaded" style="font-size: 24px; font-weight: bold; color: #6b21a8;">0</div>
    </div>
    <div style="flex: 1; padding: 12px; background: #fef3c7; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #f59e0b; margin-bottom: 4px;">Initial Bundle</div>
      <div style="font-size: 24px; font-weight: bold; color: #d97706;">Small ✓</div>
    </div>
  </div>
  <div style="border: 2px solid #c084fc; border-radius: 10px; padding: 20px; background: #faf5ff; margin-bottom: 15px;">
    <h3 style="color: #6b21a8; margin-bottom: 15px;">Click to Load Features:</h3>
    <div style="display: grid; gap: 10px;">
      <button id="loadChart" style="padding: 12px; background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">
        📊 Load Chart Module
      </button>
      <button id="loadEditor" style="padding: 12px; background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">
        ✏️ Load Editor Module
      </button>
      <button id="loadGallery" style="padding: 12px; background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">
        🖼️ Load Gallery Module
      </button>
    </div>
  </div>
  <div id="output" style="padding: 15px; background: white; border-radius: 8px; border: 2px solid #e9d5ff; min-height: 100px; color: #475569;">
    <p style="color: #94a3b8; text-align: center; margin-top: 20px;">Click a button to dynamically load a module...</p>
  </div>
</div>

Live Preview

Loading preview...

Dynamic Import() in Action

Frontend

<div style="max-width: 600px; margin: 0 auto;">
  <h2 style="color: #f59e0b; margin-bottom: 20px;">Dynamic Module Loading Demo</h2>
  <div style="display: flex; gap: 12px; margin-bottom: 20px;">
    <div style="flex: 1; padding: 12px; background: #fef3c7; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #f59e0b; margin-bottom: 4px;">Initial Bundle</div>
      <div style="font-size: 20px; font-weight: bold; color: #d97706;">25 KB</div>
    </div>
    <div style="flex: 1; padding: 12px; background: #dbeafe; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #3b82f6; margin-bottom: 4px;">Loaded On-Demand</div>
      <div id="dynamicLoaded" style="font-size: 20px; font-weight: bold; color: #2563eb;">0 KB</div>
    </div>
  </div>
  <div style="border: 2px solid #fbbf24; border-radius: 10px; padding: 20px; background: #fffbeb; margin-bottom: 15px;">
    <h3 style="color: #d97706; margin-bottom: 15px;">Click to Load Modules:</h3>
    <div style="display: grid; gap: 10px;">
      <button id="loadUtils" style="padding: 12px; background: linear-gradient(135deg, #f59e0b, #fbbf24); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">
        📦 Load Utils Module (45 KB)
      </button>
      <button id="loadAnalytics" style="padding: 12px; background: linear-gradient(135deg, #3b82f6, #60a5fa); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">
        📊 Load Analytics Module (120 KB)
      </button>
      <button id="conditionalLoad" style="padding: 12px; background: linear-gradient(135deg, #8b5cf6, #a78bfa); color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: bold;">
        🔍 Conditional Feature Detection
      </button>
    </div>
  </div>
  <div id="output" style="padding: 15px; background: white; border-radius: 8px; border: 2px solid #fed7aa; min-height: 120px;">
    <div style="color: #94a3b8; text-align: center; margin-top: 20px;">
      💡 Click buttons to dynamically import modules<br>
      <span style="font-size: 13px;">Notice: Code only loads when needed!</span>
    </div>
  </div>
  <div style="margin-top: 15px; padding: 12px; background: #dcfce7; border-radius: 8px; border: 2px solid #86efac;">
    <strong style="color: #15803d;">✅ Bundle Savings:</strong>
    <span style="color: #166534;">By not loading everything upfront, initial page load is much faster!</span>
  </div>
</div>

Live Preview

Loading preview...

Best Practices

Make the most of lazy loading

✓ Do This

📸Lazy load below-the-fold images - Images not visible on initial load
📦Code split large libraries - Monaco Editor, Chart.js, etc.
🎯Use rootMargin - Start loading slightly before viewport
🖼️Add placeholders - Show loading state for better UX

✗ Avoid This

⚠️Don't lazy load hero images - Above-the-fold content should load immediately
🚫Don't overuse dynamic imports - Too many requests can hurt performance
📱Don't forget mobile - Test on slow connections and devices
🔍Don't hurt SEO - Critical content should be server-rendered

Key Takeaways

📸

Native Lazy Loading

Use loading="lazy" attribute
Supported in all modern browsers
Zero JavaScript required

👁️

Intersection Observer

Detect element visibility
Custom lazy loading logic
Better than scroll listeners

📦

Code Splitting

Use import() for modules
Load features on-demand
Reduce initial bundle size

🚀

Performance Gains

Faster initial page load
Reduced bandwidth usage
Better user experience

Pro Tip

Combine lazy loading with other techniques like image optimization (WebP, responsive images) and CDN caching for maximum performance. Measure with Lighthouse to see the impact!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Debouncing & Throttling

Web Workers

JavaScript Code Editor

Building Your Learning Module...

Lazy Loading

Load Resources On-Demand for Better Performance

Image Lazy Loading

Intersection Observer

Code Splitting

Native Image Lazy Loading

Intersection Observer API - The Foundation

Just add loading="lazy" attribute!

Browser Support

Dynamic Import - Code Splitting

Dynamic Import() in Action

✓ Do This

✗ Avoid This

Key Takeaways

Native Lazy Loading

Intersection Observer

Code Splitting

Performance Gains

Pro Tip

Debouncing & Throttling

Web Workers

JavaScript Code Editor

Lazy Loading

Load Resources On-Demand for Better Performance

Image Lazy Loading

Intersection Observer

Code Splitting

Native Image Lazy Loading

Intersection Observer API - The Foundation

Just add loading="lazy" attribute!

Browser Support

Dynamic Import - Code Splitting

Dynamic Import() in Action

✓ Do This

✗ Avoid This

Key Takeaways

Native Lazy Loading

Intersection Observer

Code Splitting

Performance Gains

Pro Tip