Лінива загрузка

Лінива загрузка (lazy loading, відкладене завантаження) — це техніка, за якої зображення, відео чи інший «важкий» контент завантажуються не одразу з усією сторінкою, а лише в момент, коли користувач до них прокручує. Це прискорює першу появу сторінки й економить трафік, бо браузер не тягне те, чого ще не видно.

Простими словами: сторінка не викладає перед вами весь товар зі складу відразу. Вона дістає його з полиці рівно тоді, коли ви дійшли поглядом до потрібного місця.

Що таке лінива загрузка і навіщо вона потрібна

Уяви довгу сторінку з півсотнею зображень. Без lazy loading браузер намагається завантажити всі одразу — і користувач дивиться на порожній екран, поки все прогрузиться. З відкладеним завантаженням спершу з’являється лише те, що у видимій частині екрана, а решта підвантажується поступово. Результат — швидший старт, менше споживання даних (особливо на мобільних) і легше навантаження на сервер.

Як працює lazy loading

Нативний спосіб — атрибут loading="lazy" прямо в тегу <img>, який підтримують сучасні браузери.
Через JavaScript — скрипт відстежує, коли елемент наближається до видимої зони, і тоді підвантажує його.
Плейсхолдер — до завантаження на місці картинки часто показують «заглушку» чи розмиту мініатюру.

Вплив на швидкість і Core Web Vitals

Лінива загрузка — палиця з двома кінцями для метрик Core Web Vitals. Правильно: вона зменшує обсяг, який треба завантажити спершу, і покращує сприйняту швидкість. Неправильно: якщо «лінивими» зробити зображення в самому верху (у першому екрані), особливо головне, LCP (найбільший видимий елемент) може, навпаки, погіршитися. Тому головне правило — верхні, одразу видимі картинки завантажують звичайно, а lazy застосовують до того, що нижче. Ще важливо задавати розміри зображень, щоб не «стрибала» верстка (CLS).

Приклад

Інтернет-магазин із довгим каталогом на 60 фото товарів увімкнув loading="lazy" для всіх картинок, крім першого ряду. Сторінка почала відкриватися помітно швидше на мобільних, а мобільний трафік перестав «з’їдати» зайві мегабайти на зображення, які користувач так і не догортав.

Часто плутають з…

Стиснення зображень — це зменшення ваги файлу; лінива загрузка — про момент завантаження, а не про розмір.
Кешування — це збереження вже завантажених ресурсів для повторних візитів; lazy loading керує першим завантаженням у межах одного перегляду.

Питання та відповіді

Що таке лінива загрузка простими словами?

Це коли картинки й контент завантажуються не всі відразу, а поступово — у міру того, як користувач прокручує сторінку. Так вона відкривається швидше.