Lazy Loading: Speed Up Your Site 3x Without Sacrificing Quality

What is lazy loading?

Lazy loading = load only what the user sees right now. The rest loads as the user scrolls down.

The impact: According to HTTP Archive, the average page is 2.4 MB. With lazy loading, only 600 KB loads initially – 4x faster.

What should you lazy load?

1. Images (the most important)

Native HTML: `html <img src="hero.jpg" alt="Hero" loading="eager" /> <img src="below-fold.jpg" alt="..." loading="lazy" /> `

Rule: above-the-fold = eager, everything else = lazy.

2. Videos ```html <video preload="none" poster="thumbnail.jpg"> <source src="video.mp4" type="video/mp4"> </video> ```

3. iframes (YouTube, maps) ```html <iframe src="..." loading="lazy"></iframe> ```

Even better for YouTube: lite-youtube-embed – displays a thumbnail and only loads the iframe on click.

4. JS bundles Code splitting in React: ```tsx const Modal = React.lazy(() => import('./Modal')); ```

5. CSS Not all CSS needs to be critical. Inline the above-fold CSS and lazy load the rest: ```html <link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'"> ```

Image optimisation

Lazy loading + the right formats + responsive design: `html <picture> <source srcset="hero.avif" type="image/avif"> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt="Hero" loading="lazy" width="1280" height="720"> </picture> `

AVIF is 50% smaller than JPEG, WebP is 30% smaller.

See our detailed image optimisation guide.

Intersection Observer

Customised for lazy loading: `js const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); });

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img)); `

However, in 2026, native loading="lazy" is sufficient.

What NOT to lazy load

• Above-the-fold content (LCP elements!)
• Critical CSS
• Core JS (required for interactivity)
• Logos and icons (small files)
• SEO-critical images

Cumulative Layout Shift (CLS)

Lazy loading can cause layout shifts if the image does not have defined dimensions.

❌ <img src="x.jpg" loading="lazy"> ✅ <img src="x.jpg" loading="lazy" width="800" height="600">

See also our Core Web Vitals guide.

WordPress

WP 5.5+ uses native lazy loading automatically. A separate plugin is usually not required: - ❌ Don't keep extra plugins: they duplicate functionality - ✅ Use native loading + optimise images

Performance Before/After

A typical e-commerce store: | Metric | Before | After | |--------|------|--------| | First Contentful Paint | 2.4s | 0.9s | | Largest Contentful Paint | 4.2s | 1.8s | | Total Page Size | 3.8 MB | 850 KB | | Time to Interactive | 5.1s | 2.3s |

Testing

• PageSpeed Insights
• WebPageTest
• Chrome DevTools → Network → Throttling: Slow 3G

Summary

Lazy loading is a 2-hour optimisation that delivers a 50% performance boost. Our optimisation service includes a full lazy loading audit and implementation. Request a quote.

Sources

• web.dev – Browser-level Lazy Loading
• MDN – Loading Attribute
• HTTP Archive Web Almanac