Lazy Loading: What It Is and How to Implement It

What Is Lazy Loading

Lazy loading is a web optimization technique in which resources (images, videos, components) are loaded only when the user needs them—usually when an element enters the viewport.

The opposite is eager loading (loading everything as soon as the page opens).

Why Use Lazy Loading

Benefits of lazy loading:

• Speed — the page loads faster because only visible images are loaded
• Data usage — saves data: users don't load images they won't see
• LCP — improves Largest Contentful Paint for the initial viewport
• Memory — the browser stores less data in memory

Native Lazy Loading in HTML

Since 2019, browsers have supported native lazy loading through the loading attribute:

<!-- Ленивая загрузка изображения -->
<img src="photo.jpg" loading="lazy" alt="Photo" width="800" height="600" />

<!-- Ленивая загрузка iframe -->
<iframe src="map.html" loading="lazy" width="600" height="400"></iframe>

Values of the loading Attribute

Important: Disable Lazy Loading for Hero Images

<!-- Главное изображение — загружать немедленно! -->
<img src="hero.jpg" loading="eager" fetchpriority="high" alt="Hero" />

<!-- Все остальные изображения — lazy -->
<img src="photo2.jpg" loading="lazy" alt="Photo 2" />

The hero image affects LCP—the loading="lazy" attribute will delay it and worsen the metric.

JavaScript Intersection Observer

For more granular control, use the Intersection Observer API:

const images = 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;
      observer.unobserve(img);
    }
  });
}, {
  rootMargin: '200px' // загружать за 200px до появления
});

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

<!-- HTML для JS lazy loading -->
<img data-src="photo.jpg" src="placeholder.jpg" alt="Photo" />

Lazy Loading Components in React / Next.js

import dynamic from 'next/dynamic';

// Компонент загружается только при необходимости
const HeavyChart = dynamic(() => import('./HeavyChart'), {
  loading: () => <div>Загрузка...</div>,
  ssr: false
});

// Маршруты автоматически lazy-loaded в Next.js App Router

Lazy Loading Videos

<video loading="lazy" preload="none" poster="thumbnail.jpg">
  <source src="video.mp4" type="video/mp4" />
</video>

preload="none" prevents the video from being preloaded.

Checking Images with reChecker

Use Image Check to analyze images on your website. The tool will show:

• Images without the loading attribute
• Image dimensions and optimization recommendations
• Missing alt text
• Images without explicit dimensions (which affect CLS)

FAQ

Does lazy loading affect SEO? Native lazy loading is safe for SEO—Google supports it. JavaScript lazy loading can be a problem if Googlebot doesn't execute scripts. Use the native loading="lazy" attribute for an SEO-safe approach.

When does lazy image loading start? Browsers start loading images a few hundred pixels before they enter the viewport (depending on the browser and connection speed). This prevents a noticeable delay while scrolling.

Should I use placeholders (LQIP)? LQIP (Low-Quality Image Placeholder) is a technique for showing a blurred version of an image before the full image loads. It improves the perceived loading experience but requires additional code. The Next.js Image component supports LQIP out of the box.