Що таке "lazy loading"?

JavaScriptJunior~2 хв читання

Що таке 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]');

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      obs.unobserve(img);
    }
  });
});

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	Довантаження компонентів по вкладках
Складні візуалізації	Чарти, графіки, карти - лише при показі

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.