Lazy Loading Best Practices: Load Resources Only

What Is Lazy Loading?

Lazy loading is a technique that defers the loading of non-critical resources until they are needed — typically when they enter or approach the user’s viewport. Instead of downloading every image, video, and iframe on page load, lazy loading prioritizes above-the-fold content and loads everything else on demand.

When implemented correctly, lazy loading dramatically reduces initial page load time, bandwidth consumption, and Time to First Byte impact. When implemented incorrectly, it can harm SEO, delay LCP, and frustrate users.

Native Browser Lazy Loading

Modern browsers support native lazy loading through the loading attribute:

<img src="photo.webp" loading="lazy" width="800" height="600" alt="Description" />

The loading attribute accepts three values:

• lazy — Defers loading until the element approaches the viewport
• eager — Loads immediately (default behavior)
• auto — Browser decides (currently defaults to eager in most browsers)

Native lazy loading is the recommended approach because:

• No JavaScript required — works even if scripts fail
• Browser-optimized — browsers determine the best loading threshold
• SEO-safe — search engines understand the loading attribute
• Lightweight — zero impact on bundle size

What to Lazy Load (and What Not To)

Lazy Load These

• Below-the-fold images — Product thumbnails, blog post images, gallery items
• Embedded videos and iframes — YouTube embeds, maps, social widgets
• Heavy below-the-fold components — Comment sections, related content, footer widgets
• Off-screen advertising — Ad slots below the viewport

Never Lazy Load These

• The LCP element — Your hero image or main content image must load eagerly. Lazy loading it directly harms your LCP score
• Above-the-fold images — Anything visible without scrolling should load immediately
• Critical UI elements — Navigation icons, logos, and interactive controls
• Background images — The loading attribute does not work on CSS background images (use Intersection Observer instead)

Lazy Loading Images for SEO

Search engines handle lazy-loaded images well when you follow these practices:

Use Standard img Elements

Always use <img> tags with proper src attributes. Avoid patterns that replace src with data-src and require JavaScript to swap them — Googlebot may not execute the swap correctly.

<!-- Good: Native lazy loading -->
<img src="photo.webp" loading="lazy" alt="Product photo" width="400" height="300" />

<!-- Avoid: JavaScript-dependent src swap -->
<img data-src="photo.webp" class="lazyload" alt="Product photo" />

Always Include Alt Text

Lazy-loaded images still need descriptive alt text for SEO and accessibility. The loading attribute does not affect how search engines read your image alt text.

Include Width and Height

Always specify dimensions to prevent layout shifts when lazy-loaded images appear. Without dimensions, the page jumps as each image loads.

Lazy Loading Iframes and Videos

YouTube and Video Embeds

Video iframes are among the heaviest resources on a page. A single YouTube embed loads over 500KB of JavaScript. Use the loading="lazy" attribute on iframes:

<iframe
  src="https://www.youtube.com/embed/video-id"
  loading="lazy"
  width="560"
  height="315"
  title="Video title"
></iframe>

For even better performance, use a facade pattern: show a static thumbnail with a play button, and only load the actual embed when the user clicks play.

Third-Party Widgets

Maps, social media embeds, and chat widgets are prime candidates for lazy loading. Load them only when the user scrolls near their position or interacts with a trigger element.

Advanced Lazy Loading Techniques

Intersection Observer API

For cases where native lazy loading is insufficient (lazy loading JavaScript components, triggering animations, or loading content from APIs), use the Intersection Observer API:

const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        loadContent(entry.target);
        observer.unobserve(entry.target);
      }
    });
  },
  { rootMargin: '200px' },
);

document.querySelectorAll('.lazy-component').forEach((el) => {
  observer.observe(el);
});

The rootMargin option starts loading content before it enters the viewport, creating a seamless experience.

Progressive Image Loading

For a polished experience, load a tiny placeholder (blur-up technique) or a low-quality image first, then swap in the full-resolution image:

1. Serve a small (20px wide) blurred placeholder inline or as a data URI
2. Load the full image lazily
3. Fade in the full image when loaded

This approach provides visual content immediately while the full image downloads.

Route-Based Code Splitting

In single-page applications, lazy load JavaScript bundles for routes the user has not visited yet. Frameworks like React (React.lazy), Vue (dynamic imports), and Next.js (automatic page-level splitting) support this natively.

Performance Impact of Lazy Loading

When properly implemented, lazy loading can:

• Reduce initial page weight by 50-80% on image-heavy pages
• Improve LCP by 20-40% by prioritizing above-the-fold resources
• Reduce bandwidth for users who do not scroll to the bottom
• Improve server resource usage by reducing concurrent requests

Common Lazy Loading Mistakes

• Lazy loading the LCP image — The single most common mistake. Always set loading="eager" (or omit the attribute) on your hero image
• No dimensions on lazy images — Causes CLS issues
• JavaScript-only lazy loading without fallback — If JS fails, no images load
• Too aggressive thresholds — Loading images only when they enter the viewport feels slow to users. Start loading 200-500px before they are visible
• Lazy loading above-the-fold content — Anything visible without scrolling should be eager

Key Takeaways

Lazy loading is a powerful performance technique when applied judiciously:

1. Use native loading="lazy" as your primary approach for images and iframes
2. Never lazy load the LCP element or above-the-fold content
3. Always include dimensions to prevent layout shifts
4. Use standard HTML elements with real src attributes for SEO compatibility
5. Test with real users to ensure the loading experience feels seamless

Combined with image optimization and proper caching strategies, lazy loading is a cornerstone of a fast, user-friendly website.