Lazy loading — паттерн оптимизации веб-страниц: ресурсы (изображения, видео, скрипты) загружаются не при открытии страницы, а при необходимости — когда элемент приближается к видимой области экрана (viewport). Сокращает начальное время загрузки и экономит трафик для пользователей, которые не долистывают страницу до конца.
Как работает
Нативный lazy loading в HTML5 (с 2019–2020 года): атрибут loading="lazy" для <img> и <iframe>. Браузер сам определяет, когда загружать ресурс (обычно за 1250 пикселей до viewport). Поддерживается Chrome 77+ (2019), Firefox 75+ (2020), Safari 15.4 (2022).
Intersection Observer API — JavaScript-механизм для кастомного lazy loading. Позволяет наблюдать за видимостью элемента и загружать ресурс при пересечении с viewport: new IntersectionObserver(callback, {rootMargin: '500px'}). Более гибко, чем нативный loading="lazy".
SEO-аспект: Google с 2021 года полностью поддерживает нативный lazy loading — Googlebot ждёт прокрутки и загружает lazy-изображения при индексировании. Ключевое изображение «above the fold» (выше линии прокрутки) не должно быть lazy — это замедлит LCP (Largest Contentful Paint).
История
Концепция lazy loading применялась в программировании задолго до веба (Lazy initialization, Gang of Four, 1994). В вебе jQuery-плагины (lazyload.js, 2007) реализовывали паттерн через событие scroll. В 2019 году Chrome 77 добавил нативную поддержку через атрибут loading. В 2020 году этот атрибут стандартизирован в HTML Living Standard (WHATWG).
Lazy loading: реализация и инструменты
Нативный lazy loading в HTML5: и