loading HTML атрибут - відкладене завантаження ресурсів
Атрибут loading визначає, як браузер завантажує зображення або iframe — негайно чи відкладено, коли елемент наближається до видимої області.
Атрибут loading дозволяє контролювати, коли браузер завантажує ресурс. Він підтримується елементами <img> та <iframe>. Використовуючи значення lazy можна відкласти завантаження зображень та iframe, які знаходяться поза видимою областю, до моменту, коли користувач прокрутить до них. Це значно покращує початкову продуктивність веб-сторінки та зменшує споживання трафіку.
Не слід використовувати loading="lazy" для зображень, які знаходяться у видимій області при першому завантаженні сторінки (above the fold), оскільки це може негативно вплинути на показники Core Web Vitals, зокрема LCP (Largest Contentful Paint).
Синтаксис
<img src="image.jpg" loading="lazy" alt="Опис зображення">
<iframe src="video.html" loading="lazy"></iframe>Значення
eagerРесурс завантажується миттєво, незалежно від того, де він розташований на сторінці. Це значення є стандартним.
lazyЗавантаження ресурсу відкладається до того моменту, коли він досягне певної відстані від видимої області (viewport). Браузер самостійно визначає цю відстань.
Приклади використання
<p>Прокрутіть вниз, щоб побачити відкладене завантаження:</p>
<div>Прокрутіть вниз ↓</div>
<img
src="/static/forest.jpg"
loading="lazy"
alt="Ліс з деревами"
width="300"
>
<br>
<small>Зображення вище завантажиться лише коли ви прокрутите до нього.</small>div {
height: 800px;
background: linear-gradient(to bottom, #e0e0e0, #f5f5f5); display: flex;
justify-content:center;
margin-bottom: 20px;
padding-top: 16px;
}Підтримка браузерів
loading |
|---|