Tag: frontend optimization

Slow page loads frustrate users and hurt your search rankings. One of the most effective ways to speed up your site is lazy loading — deferring resources that aren’t immediately visible until they’re about to enter the viewport. This cuts down on initial data transfer, reduces CPU work, and makes your pages feel snappy. In this article, you’ll learn how lazy loading works, how to implement it with modern browser features and JavaScript, and what pitfalls to avoid.

What Is Lazy Loading and Why Does It Matter?

Lazy loading is a strategy that postpones the loading of non-critical resources — like images deep down the page, third-party embeds, or heavy scripts — until the moment they’re needed. Instead of downloading everything upfront, the browser loads only what’s in the initial viewport. The rest is loaded on demand.

Why does this matter for performance? For starters, it reduces the total bytes transferred on the initial load. That directly improves your Largest Contentful Paint (LCP) because the main content isn’t competing with dozens of off-screen images. It also reduces CPU idle time and network congestion, which can lower your First Input Delay (FID) and Cumulative Layout Shift (CLS). Tools like Google Lighthouse heavily reward lazy loading for images and iframes.

Native Lazy Loading: The Simplest Approach

The easiest way to lazy load images and iframes is to use the loading attribute. Adding loading="lazy" to an <img> or <iframe> tells the browser to defer loading until the element is close to the viewport. No JavaScript required.

<img src="hero.jpg" alt="Hero image" loading="lazy" width="1200" height="800">

For browsers that support it, native lazy loading is fast, efficient, and respects user preferences like data-saver mode. Always include explicit width and height attributes to prevent layout shifts while the image loads. If a browser doesn’t support loading, the image loads eagerly by default, so it’s safe to use today.

When to Avoid Native Lazy Loading

Critical above-the-fold images should never be lazy loaded. Doing so can hurt LCP because the browser may delay loading the hero image. Use loading="eager" or omit the attribute entirely for your most important visuals. A good rule of thumb is to lazy load any image that appears below the initial viewport.

Using Intersection Observer for Custom Lazy Loading

Native lazy loading works great for images and iframes, but for other resources — like background images, custom elements, or lazy-loading a <picture> with multiple sources — you’ll want the Intersection Observer API. It provides a performant way to detect when an element enters the viewport.

Here’s a basic example that replaces a placeholder data-src with the real src:

const lazyImages = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.onload = () => img.classList.add('loaded');
      observer.unobserve(img);
    }
  });
}, { rootMargin: '200px 0px' });

lazyImages.forEach(img => observer.observe(img));

The rootMargin option triggers loading 200px before the element enters the viewport, which gives a smoother user experience. You can adjust this based on your layout.

Lazy Loading Background Images

Background images set via CSS can also be lazy loaded. Store the background URL in a data-bg attribute and apply it when the element becomes visible:

const lazyBg = document.querySelectorAll('[data-bg]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const el = entry.target;
      el.style.backgroundImage = `url(${el.dataset.bg})`;
      observer.unobserve(el);
    }
  });
});

lazyBg.forEach(el => observer.observe(el));

This technique works well for hero sections that appear further down the page or for card backgrounds in a long list.

Lazy Loading JavaScript and Third-Party Embeds

Not just images — you can lazy load scripts too. Heavy third-party libraries, analytics, maps, or social media embeds can block the main thread. Deferring them until after the page is interactive improves TBT (Total Blocking Time) and FID.

One common pattern is to use <script defer> for non-critical scripts, but for truly lazy-loaded scripts, you can create them dynamically when needed:

function loadScript(src) {
  const script = document.createElement('script');
  script.src = src;
  script.defer = true;
  document.body.appendChild(script);
}

// Load when user scrolls to a certain section
window.addEventListener('scroll', () => {
  if (/* condition met */) {
    loadScript('https://example.com/widget.js');
  }
}, { once: true });

For iframes, native loading="lazy" works well, but you can also use Intersection Observer to swap placeholder content. YouTube embeds can be replaced with a static thumbnail and only load the full player on click.

Best Practices and Common Mistakes

Lazy loading isn’t a magic bullet. Done wrong, it can hurt performance and user experience. Here are some guidelines:

• Always set width and height on images and iframes to reserve space and prevent CLS.
• Lazy load below-the-fold content only. Critical images should load eagerly.
• Avoid lazy loading everything. If an image is not visible on any screen size (e.g., hidden behind a tab), consider not loading it at all.
• Test with real users. Use Lighthouse, Web Vitals, and real user monitoring (RUM) to ensure lazy loading isn’t delaying important content.
• Provide good placeholders. Low-quality image placeholders (LQIP) or blur-up techniques improve perceived performance.

One common mistake is lazy loading a hero image because it reduces LCP — but it actually increases it. Another is forgetting to update loading attributes when you change layout. Always review which images are above the fold on different devices.

Comparison: Native vs. Intersection Observer

Feature	Native Lazy Loading	Intersection Observer
Browser Support	Modern browsers (Chrome, Firefox, Edge, Safari 15.4+)	Wide support in all modern browsers
Implementation Effort	Minimal – just add attribute	Moderate – requires JavaScript
Customization	Limited (root margin via loading=”lazy” only)	Full control via options and callbacks
Use Cases	Images and iframes	Any resource (backgrounds, scripts, custom elements)
Performance	Browser-optimized, no JavaScript overhead	Slightly more overhead but still performant

Choose native lazy loading whenever you can. It’s simpler and faster. Reserve Intersection Observer for cases where native doesn’t cover your needs.

Lazy Loading in Responsive Images

When using the <picture> element with multiple sources, native lazy loading applies to the entire element. But you might want finer control. For example, you can combine Intersection Observer with the sizes attribute to load only the appropriate image for the viewport. Store different resolutions in data-srcset and switch them when the element is near the viewport. This avoids loading a desktop-sized image on mobile.

<picture>
  <source media="(min-width: 800px)" data-srcset="large.jpg">
  <img data-src="small.jpg" alt="Example" width="800" height="600">
</picture>

In your observer, swap both srcset on the source elements and src on the img. This ensures you get the right image size for the device while still lazy loading.

Handling Edge Cases: Print, Accessibility, and Caching

Lazy loading can interfere with printing if images haven’t loaded yet. Add a CSS print rule to force all lazy images to become eager when printing:

@media print {
  img[loading="lazy"], [data-src] {
    content: attr(data-src);
    /* force eager loading via JS */
  }
}

You can also use JavaScript to load all lazy resources when the user invokes print via window.beforeprint event. For accessibility, ensure that screen readers can still navigate lazy-loaded content. The loading attribute is accessible, but if you use JavaScript, make sure the resources are loaded when the focus reaches them, perhaps by observing focus events or using a preload buffer.

Caching is another consideration. Browsers cache lazy-loaded images after they load, so subsequent visits or scrolls won’t re-fetch them. But if you lazy load scripts, ensure they have proper cache headers to avoid blocking future loads. Test with browser DevTools on throttled connections to verify that lazy loaded resources appear quickly when needed.

Measuring the Impact

After implementing lazy loading, measure the difference. Run Lighthouse before and after, and look at these metrics:

• LCP: Should improve if critical images load faster without competition.
• Total Image Bytes: Reduced on initial load.
• Number of Requests: Fewer requests upfront.
• Time to Interactive: Should decrease as less JavaScript is parsed.

Also monitor real-user metrics like FID or INP. If you lazy load too aggressively, users may experience delays when scrolling. Adjust your rootMargin to trigger loads sooner if needed.

For more on building performant layouts, check out our guide on Common CSS Grid Mistakes and How to Fix Them. Proper layout techniques complement lazy loading by reducing layout shifts.

Conclusion: Start Small, Measure Often

Lazy loading is a practical, high-impact performance optimization. Begin with native lazy loading on all images and iframes below the fold. Then explore Intersection Observer for more complex cases like background images or third-party scripts. Always measure before and after with Lighthouse and real-user monitoring. Avoid lazy loading critical above-the-fold assets, and always set dimensions to prevent layout shifts. With these techniques, you’ll deliver faster, smoother experiences for your users.

Frequently asked questions

What is lazy loading in web performance?

Lazy loading is a technique that defers the loading of non-critical resources until they are needed, typically when they scroll into the viewport. It reduces initial page weight, speeds up load time, and improves performance metrics like LCP and FID.

How do you lazy load images in HTML?

You can lazy load images by adding the loading=’lazy’ attribute to the img tag. Browsers that support the attribute will defer loading until the image is close to the viewport. Always include width and height attributes to prevent layout shifts.

Should I lazy load above-the-fold images?

No, you should not lazy load critical above-the-fold images. Doing so can delay the Largest Contentful Paint (LCP). Eager-load hero images and other visible content, and lazy load only images below the initial viewport.

What is the difference between native lazy loading and Intersection Observer?

Native lazy loading uses the HTML loading attribute and is supported by modern browsers with zero JavaScript overhead. Intersection Observer is a JavaScript API that provides more control and works for any element, including background images and scripts, but requires more code.

Does lazy loading affect SEO?

Lazy loading can positively affect SEO by improving page speed and user experience, which are ranking factors. However, ensure that content is still accessible to search engine crawlers. Native lazy loading is generally safe, and you should avoid hiding important content behind lazy loading that isn’t triggered by crawlers.