Що робить атрибут loading="lazy"?
Атрибут loading="lazy" у тега <img> вмикає відкладене завантаження зображень: тобто браузер не завантажує картинку одразу, а робить це тільки тоді, коли вона з'являється в зоні видимості користувача (або близько до неї).
Це потужний інструмент для пришвидшення завантаження сторінок та економії трафіку.
1. Як працює loading="lazy"
Типово, коли браузер парсить HTML:
<img src="photo.jpg" alt="Фото">він одразу починає завантажувати photo.jpg, навіть якщо картинка перебуває в самому низу сторінки і користувач її поки не бачить.
Це сповільнює завантаження і витрачає трафік даремно.
Якщо додати:
<img src="photo.jpg" alt="Фото" loading="lazy">браузер:
- пропускає завантаження картинки на старті,
- чекає, поки користувач прокрутить сторінку до потрібного місця,
- і тільки тоді завантажує зображення.
Тобто: «ліниве завантаження» = завантаж, коли це справді потрібно.
2. Приклад використання
<img src="header.jpg" alt="Головний банер">
<img src="gallery1.jpg" alt="Фото 1" loading="lazy">
<img src="gallery2.jpg" alt="Фото 2" loading="lazy">
<img src="gallery3.jpg" alt="Фото 3" loading="lazy">Браузер завантажить header.jpg одразу,
а решту (gallery1-3.jpg) завантажить тільки під час прокрутки вниз.
3. Значення атрибута loading
| Значення | Що робить |
|---|---|
lazy | Завантажує зображення, коли воно майже потрапляє в область видимості |
eager | Завантажує одразу, не чекаючи прокрутки (типова поведінка для важливих зображень) |
auto | Дозволяє браузеру самому вирішити (типово більшість зображень поводяться як lazy) |
4. Коли це особливо корисно
- на довгих сторінках з великою кількістю зображень (блоги, каталоги, галереї);
- в інтернет-магазинах (картки товарів довантажуються тільки коли користувач до них доходить);
- на мобільних пристроях, де важливо економити трафік;
- на лендингах з великою кількістю графіки.
5. Переваги
| Перевага | Опис |
|---|---|
| Швидше завантаження сторінки | Менше запитів на старті |
| Менше мережевого навантаження | Зображення завантажуються тільки «за потреби» |
| Економія трафіку | Особливо важливо на мобільних |
| Покращення SEO | Google враховує швидкість завантаження (Core Web Vitals) |
6. Важливий нюанс
- Не варто ставити
loading="lazy"на зображення, які видно одразу (наприклад, логотип, банер у шапці), вони повинні завантажуватися одразу (loading="eager"або без атрибута). - Працює в усіх сучасних браузерах (Chrome, Edge, Firefox, Safari 15+).
Підсумок:
| Параметр | Значення |
|---|---|
| Атрибут | loading |
| Основне значення | "lazy" |
| Що робить | Відкладає завантаження зображень до появи у видимій області |
| Мета | Пришвидшити завантаження сторінки і знизити навантаження на мережу |
| Коли використовувати | Для зображень нижче «першого екрана» |
Простими словами:
loading="lazy" каже браузеру:
«Не витрачай ресурси на картинки, яких користувач ще не бачить. Завантажиш їх пізніше, коли вони справді знадобляться.»
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.