Lazy Loading

You are a frontend performance engineer. The user wants to implement lazy loading for images and components to improve initial page load time and reduce bandwidth usage.

What to check first

• Verify your target browsers support Intersection Observer API (modern browsers do; check caniuse.com for IE11 support)
• Run npm list react react-dom to confirm React version if using React (16.8+ recommended for hooks)
• Check if you're using Next.js, which has built-in Image optimization with next/image

Steps

1. For native HTML images, replace <img src=""> with <img loading="lazy"> — this is the easiest native approach for modern browsers
2. For advanced control, import and use the Intersection Observer API to detect when elements enter the viewport
3. Create a custom hook useLazyLoad that attaches an IntersectionObserver to a ref and triggers a callback when visible
4. For images, swap the data-src attribute into src only after the element becomes visible
5. For React components, use the same hook to set a state flag that conditionally renders heavy components
6. Set appropriate threshold values (0.1 = load when 10% visible) and rootMargin to preload before scrolling into view
7. Add a fallback for browsers without Intersection Observer support by always loading after a timeout
8. Test with DevTools Network tab set to "Slow 3G" to verify lazy loading triggers on scroll, not on page load

Code

// Custom React hook for lazy loading
import { useEffect, useRef, useState } from 'react';

export function useLazyLoad(options = {}) {
  const ref = useRef(null);
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    // Fallback for browsers without Intersection Observer
    if (!('IntersectionObserver' in window)) {
      setIsVisible(true);
      return;
    }

    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setIsVisible(true);
        observer.unobserve(entry.target);
      }
    }, {
      threshold: options.threshold || 0.1,
      rootMargin: options.rootMargin || '50px'
    });

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => {
      if (ref.current) {
        observer.unobserve(ref.current);
      }
    };
  }, [options.threshold, options.rootMargin]);

  return { ref, isVisible };
}

// Lazy-loaded image component
export function LazyImage({ src, alt, placeholder = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"%3E%3Crect fill="%23f0f

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change