Lazy Loading (Отложенная загрузка)

Lazy loading (отложенная загрузка) – это техника оптимизации производительности, которая откладывает загрузку некритичных ресурсов, прежде всего изображений и видео, до момента, когда они действительно понадобятся пользователю. Вместо того чтобы скачивать все изображения на странице при её открытии, отложенная загрузка ждёт, пока каждое изображение вот-вот попадёт в видимую область (viewport), и только тогда запрашивает его с сервера. Это снижает начальный вес страницы, ускоряет первый содержательный рендер и экономит трафик пользователям, которые никогда не доскролливают до конца страницы.

Самая простая реализация – нативный HTML-атрибут loading="lazy" на элементах img и iframe, который теперь поддерживают все основные браузеры. Для более тонкого контроля над временем и поведением разработчики используют Intersection Observer API – возможность браузера эффективно определять, когда элемент входит в область просмотра или приближается к ней. Подход с Intersection Observer допускает настройку, например загрузку изображений, когда они находятся на заданном расстоянии от viewport, чтобы контент был готов к моменту, когда пользователь до него доскроллит, а не загружался на его глазах.

Влияние на Core Web Vitals существенно, но требует аккуратной реализации. Отложенная загрузка сокращает Largest Contentful Paint, заставляя браузер отдавать приоритет контенту выше линии сгиба, а не изображениям ниже по странице. Однако ошибочная отложенная загрузка hero-изображения или другого контента выше линии сгиба, наоборот, ухудшит LCP, потому что задержит именно тот элемент, который измеряет метрика. Лучшая практика – загружать все изображения, видимые в начальном viewport, сразу, а всё ниже линии сгиба – отложенно. Ради Cumulative Layout Shift всегда задавайте для lazy-loaded изображений явные атрибуты width и height или используйте CSS aspect-ratio, чтобы браузер резервировал нужное место до загрузки изображения и не возникало скачков макета, которые раздражают пользователей и снижают ваши показатели производительности.