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

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

Отложенная загрузка — это техника оптимизации веб-производительности, которая задерживает скачивание и рендеринг некритичных ресурсов (изображений, iframe, фоновых видео) до момента, когда они вот-вот попадут в область видимости пользователя.

Применение ленивой загрузки для 30 изображений на странице каталога в среднем снижает объём данных, передаваемых при начальной загрузке, на 65–75 % и уменьшает Largest Contentful Paint (LCP) на 0,8–1,2 секунды — это индустриальный стандарт 2026 года, без которого невозможно стабильно проходить Core Web Vitals на мобильных устройствах.

Как это работает?

Браузер или JavaScript-библиотека отслеживает позицию элемента относительно окна просмотра с помощью Intersection Observer API.

Ресурс получает заполнитель (плейсхолдер), а его реальный URL записывается в атрибут data-src вместо src.

Как только элемент оказывается на заданном расстоянии от границы вьюпорта (обычно 500–1000 пикселей), скрипт подменяет атрибут, инициируя загрузку и декодирование изображения или iframe.

WordPress с версии 5.5 реализует это нативно через атрибут loading=»lazy», который поддерживается всеми современными браузерами без JavaScript.

Метрики и стандарты

• Сокращение начального трафика: страница с 50 изображениями без ленивой загрузки передаёт в среднем 8–12 МБ данных при открытии. С активированным Lazy Loading начальный объём падает до 2–3 МБ, что является эталоном для прохождения мобильных тестов PageSpeed.
• Влияние наLCP: для достижения оценки «хорошо» (<2,5 с) Largest Contentful Paint обязательно исключается из отложенной загрузки изображение-кандидат на LCP, иначе его загрузка откладывается и метрика деградирует на 0,5–1,5 с.
• Требование к размерам изображений: стандартом является обязательное указание атрибутов width и height у всех <img> с loading=»lazy». Без них браузер не может зарезервировать пространство, что вызывает Cumulative Layout Shift (CLS) и блокирует ленивую загрузку во многих реализациях.
• Доля охвата: в корректно настроенной системе более 90 % внеэкранных изображений и iframe должны быть обёрнуты в механизм ленивой загрузки. Меньший охват считается упущенной оптимизацией.

Почему это важно для бизнеса?

Отложенная загрузка напрямую ускоряет время до интерактивности страницы, особенно на мобильных устройствах с медленным соединением, что снижает показатель отказов и увеличивает среднюю глубину просмотра коммерческого контента.

С точки зрения SEO, прохождение Core Web Vitals является официальным сигналом ранжирования Google, и без ленивой загрузки изображений достичь целевых порогов LCP и TBT практически невозможно, что вытесняет сайт из топа конкурентных запросов.

Экономия трафика снижает нагрузку на хостинг и CDN, а также сохраняет мобильный лимит данных пользователя, повышая лояльность и повторные визиты.

Пример применения

Новостной портал публиковал материалы с 40–60 фотографиями в галереях. Начальная загрузка страницы требовала 15 МБ трафика, а показатель LCP достигал 4,2 секунды, что приводило к оттоку 55 % мобильных посетителей.

После активации нативного loading=»lazy» для всех изображений, кроме первого в теле статьи, начальный объём сократился до 3,5 МБ, а LCP упал до 2,3 секунды. За месяц отказы на мобильных снизились на 15 %, а органический трафик из новостных блоков вырос на 22 %.

Как это реализуется в WordPress?

С версии 5.5 WordPress автоматически добавляет атрибут loading=»lazy» ко всем изображениям и iframe, имеющим явно заданные width и height. Для этого не требуется установка дополнительных плагинов.

Для исключения первых изображений (чтобы не замедлить LCP) или для поддержки фоновых изображений применяют плагины: WP Rocket, Lazy Load by WP Rocket, Autoptimize или Smush. Они позволяют настроить порог отступа, классы исключений и ленивую загрузку видео.

При кастомной разработке отключают нативный атрибут через фильтр wp_lazy_loading_enabled и внедряют ручную систему на основе Intersection Observer, подменяя src из data-src. Важно резервировать размеры через атрибуты или CSS, чтобы предотвратить CLS.

Контроль эффективности ведётся в Google PageSpeed Insights: параметр «Отложите загрузку скрытых изображений» должен перейти в зелёную зону, а LCP — опуститься ниже 2,5 секунд.

Связанные понятия

• Largest Contentful Paint (LCP) — метрика Core Web Vitals, измеряющая время рендеринга самого крупного видимого элемента; отложенная загрузка должна исключать этот элемент.
• Intersection Observer API — встроенный в браузеры механизм асинхронного отслеживания пересечения элементов с окном просмотра, на котором базируется ленивая загрузка.
• Атрибутloading=»lazy« — HTML-атрибут, внедрённый в WordPress 5, который даёт браузеру нативную команду отложить загрузку изображения или iframe.
• Предварительная загрузка (Preload) — противоположная техника принудительной ранней загрузки критических ресурсов, используемая совместно с Lazy Loading для баланса производительности.
• Cumulative Layout Shift (CLS) — метрика стабильности макета, которая ухудшается, если для лениво загружаемых элементов не заданы фиксированные размеры.