Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить атрибут loading="lazy"?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`loading="lazy"`** - це атрибут тега `<img>`, який вмикає відкладене завантаження зображення: браузер завантажує картинку не одразу, а лише тоді, коли вона наближається до зони видимості користувача. **Ключове:** це пришвидшує перше відображення сторінки і економить трафік, тому його варто застосовувати для зображень нижче «першого екрана», але не для тих, що видно одразу.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняАтрибут `loading="lazy"` у тега `<img>` вмикає **відкладене завантаження зображень**: тобто браузер **не завантажує картинку одразу**, а робить це **тільки тоді, коли вона з'являється в зоні видимості користувача** (або близько до неї). Це потужний інструмент для **пришвидшення завантаження сторінок** та **економії трафіку**. --- ### 1. Як працює `loading="lazy"` Типово, коли браузер парсить HTML: ```html <img src="photo.jpg" alt="Фото"> ``` він **одразу** починає завантажувати `photo.jpg`, навіть якщо картинка перебуває **в самому низу сторінки** і користувач її поки не бачить. Це сповільнює завантаження і витрачає трафік даремно. --- Якщо додати: ```html <img src="photo.jpg" alt="Фото" loading="lazy"> ``` браузер: - пропускає завантаження картинки на старті, - чекає, поки користувач **прокрутить сторінку** до потрібного місця, - і тільки тоді **завантажує зображення**. Тобто: «ліниве завантаження» = завантаж, коли це справді потрібно. --- ### 2. Приклад використання ```html <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"` каже браузеру: > «Не витрачай ресурси на картинки, яких користувач ще не бачить. > Завантажиш їх пізніше, коли вони справді знадобляться.»Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.