Как работает встроенная ленивая загрузка изображений/iframe?

Question

Accepted Answer

Атрибут `loading="lazy"` сообщает браузеру **отложить загрузку** изображения или iframe, пока оно не приближается к viewport — экономит пропускную способность и ускоряет первоначальную загрузку, без JavaScript. ```html

``` ## Как это работает - **`lazy`** — загружайте только когда прокрутка приблизит её к viewport. - **`eager`** (по умолчанию) — загружайте немедленно, независимо от позиции. Браузер использует запас (загружает немного раньше, чем элемент прокручивается в представление), поэтому изображение обычно готово, когда пользователь его видит. ## Критическая пара: установите width/height, чтобы избежать сдвига макета ```html

``` Без размеров (или `aspect-ratio`), лениво загруженное изображение не имеет зарезервированного пространства, поэтому когда оно загружается, страница **прыгает** — нанося вред Cumulative Layout Shift (CLS). Всегда резервируйте место. ## Не ленивая загрузка контента выше линии сгиба ```html

``` Ленивая загрузка изображения **Largest Contentful Paint** на самом деле *вредит* производительности — задерживает самый важный пиксель. Ленивая загрузка только внеэкранных медиа. ## До встроенного: IntersectionObserver ```js // the old manual approach native lazy-loading replaced const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; }); }); ``` Встроенный `loading="lazy"` исключил необходимость в этом в большинстве случаев (хотя IntersectionObserver по-прежнему полезен для пользовательской логики). ## Почему это важно Встроенная ленивая загрузка сокращает начальные байты и запросы для длинных страниц со множеством изображений — большой выигрыш для мобильных — бесплатно. Нюансы имеют значение: резервируйте размеры для защиты CLS и держите контент выше линии сгиба/LCP изображения в режиме eager (даже `fetchpriority="high"`), чтобы важный контент по-прежнему загружался быстро.