Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке "lazy loading"?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що таке **Lazy Loading**

**Lazy loading** - це техніка, за якої ресурси (картинки, відео, скрипти, компоненти тощо)
**завантажуються лише тоді, коли вони справді потрібні користувачу**,
а не одразу при відкритті сторінки.

Простіше кажучи:

> "Не завантажуй те, чого користувач ще не бачить."

## Як це працює

Коли сторінка відкривається:

- Браузер **завантажує лише видимий контент** (Above the Fold);
- решта елементів (наприклад, картинки нижче екрана) позначаються як "lazy";
- щойно користувач **прокручує** сторінку і елемент потрапляє в зону видимості (viewport), браузер **довантажує його**.

## Приклад - ліниве завантаження зображень

### Сучасний спосіб (HTML-атрибут)

```javascript
<img src="photo.jpg" alt="Фото" loading="lazy">
```

- Браузер сам відкладає завантаження картинки, поки вона не потрапить у зону видимості.
- Підтримується **в усіх сучасних браузерах**.

## Приклад - для iframe (відео, карти тощо)

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

Це особливо важливо для YouTube і Google Maps - вони важкі, а користувач може їх ніколи не відкрити.

## Варіант з JavaScript (для тонкого контролю)

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

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

І в HTML:

```javascript
<img data-src="photo.jpg" alt="Фото" />
```

Використовується `IntersectionObserver`, щоб "спіймати" момент, коли елемент потрапляє у видиму область.

## Lazy loading компонентів (у JS-фреймворках)

### React / Next.js:

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

function App() {
  return (
    <Suspense fallback={<div>Завантаження...</div>}>
      <Chart />
    </Suspense>
  );
}
```

Компонент `Chart` завантажиться **лише при першому рендері** цього блоку.
Це зменшує **bundle size** при старті.

### Next.js (динамічний імпорт):

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

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

## Що можна вантажити ліниво

| Тип ресурсу | Lazy Loading | Приклад |
| --- | --- | --- |
| Зображення | Так | `<img loading="lazy">` |
| Відео / iframe | Так | `<iframe loading="lazy">` |
| Компоненти | Так | `React.lazy()` / `import()` |
| Скрипти | Так | `<script defer>` або динамічне довантаження |
| Дані API | Так | Запит лише при першому показі блоку |
| CSS (опціональні теми) | Так | динамічне завантаження стилів |

## Переваги

- **Швидше завантаження сторінки** - менше даних при першому запиті.
- **Кращі Core Web Vitals (LCP, FCP, TTI)**.
- **Економія трафіку** - особливо важливо на мобільних.
- **Менше навантаження на сервер**.
- **Плавний UX** - контент з'являється в міру скролу.

## Недоліки і помилки

Якщо *переборщити з lazy loading*, важливі елементи (картинки в hero-секції, логотипи) можуть завантажуватись із затримкою,
а це **погіршить LCP** (Largest Contentful Paint).

Якщо скрипт спостерігача (IntersectionObserver) не завантажений - ліниві елементи не з'являться.

Питання SEO:
тому важливо, щоб **критичні зображення завантажувались одразу**,
а не ліниво (пошуковики можуть не проскролити сторінку).

## Коли використовувати

| Де | Lazy Loading допомагає |
| --- | --- |
| Галереї / каталоги | Багато зображень (e-commerce, блог, портфоліо) |
| Довгі сторінки | Лонгріди, статті |
| SPA / Dashboard | Довантаження компонентів по вкладках |
| Складні візуалізації | Чарти, графіки, карти - лише при показі |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати511 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.