Suggest an edit

Improve this article

Refine the answer for “What is "lazy loading"?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What **Lazy Loading** is

**Lazy loading** is a technique in which resources (images, videos, scripts, components, etc.)
**are loaded only when the user actually needs them**,
not right away when the page opens.

Simply put:

> "Don't load what the user cannot yet see."

## How it works

When a page opens:

- The browser **loads only the visible content** (above the fold);
- the rest of the elements (for example, images below the screen) are marked as "lazy";
- as soon as the user **scrolls** and an element enters the visible area (viewport), the browser **loads it**.

## Example - lazy loading images

### The modern way (an HTML attribute)

```javascript
<img src="photo.jpg" alt="Photo" loading="lazy">
```

- The browser itself delays loading the image until it enters the visible area.
- Supported **in all modern browsers**.

## Example - for iframes (video, maps, etc.)

```javascript
<iframe
  src="https://www.youtube.com/embed/..."
  loading="lazy"
></iframe>
```

This is especially important for YouTube and Google Maps - they are heavy, and the user may never open them.

## A JavaScript-based option (for fine-grained control)

```javascript
const images = document.querySelectorAll('img[data-src]');

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

And in the HTML:

```javascript
<img data-src="photo.jpg" alt="Photo" />
```

`IntersectionObserver` is used to "catch" the moment an element enters the visible area.

## Lazy loading of components (in JS frameworks)

### React / Next.js:

```javascript
const Chart = React.lazy(() => import('./Chart'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Chart />
    </Suspense>
  );
}
```

The `Chart` component loads **only on the first render** of that block.
This reduces the **bundle size** at startup.

### Next.js (dynamic import):

```javascript
import dynamic from 'next/dynamic';

const Chart = dynamic(() => import('./Chart'), { ssr: false });
```

## What can be loaded lazily

| Resource type | Lazy Loading | Example |
| --- | --- | --- |
| Images | Yes | `<img loading="lazy">` |
| Video / iframe | Yes | `<iframe loading="lazy">` |
| Components | Yes | `React.lazy()` / `import()` |
| Scripts | Yes | `<script defer>` or dynamic loading |
| API data | Yes | A request only when the block is first shown |
| CSS (optional themes) | Yes | dynamic style loading |

## Advantages

- **Faster page load** - less data on the first request.
- **Better Core Web Vitals (LCP, FCP, TTI)**.
- **Traffic savings** - especially important on mobile.
- **Less server load**.
- **Smooth UX** - content appears as the user scrolls.

## Downsides and mistakes

If you *overdo lazy loading*, important elements (hero-section images, logos) may load with a delay,
which **worsens LCP** (Largest Contentful Paint).

If the observer script (IntersectionObserver) has not loaded, lazy elements will not appear.

An SEO concern:
that's why it matters that **critical images load right away**,
rather than lazily (search engines may not scroll the page).

## When to use it

| Where | Lazy Loading helps |
| --- | --- |
| Galleries / catalogs | Many images (e-commerce, a blog, a portfolio) |
| Long pages | Long-form content, articles |
| SPA / dashboards | Loading components per tab |
| Complex visualizations | Charts, graphs, maps - only when shown |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts558 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.