Lazy Loading

Lazy loading is a performance optimization technique that defers the loading of non-critical resources—such as images, videos, iframes, and scripts—until they are needed, typically when they enter or are about to enter the viewport.

How It Works

Modern implementations use the Intersection Observer API to detect when an asset approaches the viewport (usually 50–200 pixels before visibility) and then trigger loading. Scroll event listeners can also be used, but they may degrade performance.

SEO and Business Impact

By prioritizing above-the-fold content, lazy loading improves Core Web Vitals metrics such as Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS), which are direct Google ranking factors. It can reduce initial page load times by 40–60%, cut bandwidth costs by 20–30%, and lift mobile conversion rates by 15–20%.

Best Practices

• Use loading="lazy" for below-the-fold images and iframes, and loading="eager" for above-the-fold content.
• Implement low-quality image placeholders (LQIP) or skeleton screens to prevent layout shift.
• Provide noscript fallbacks and server-side rendering so search crawlers can index deferred content.
• Adjust trigger distances and preload strategies for mobile connections.