Инструкция

Lazy loading: что откладывать, а что показывать сразу

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

Поясняющая схема к материалу «Lazy loading: что откладывать, а что показывать сразу».
Поясняющая схема к материалу «Lazy loading: что откладывать, а что показывать сразу».

Разделите ресурсы и смысловое содержание#

Ленивая загрузка помогает не запрашивать сразу все изображения длинной страницы. Но текст статьи не должен зависеть от необязательного действия, если требуется его доступность при обработке страницы.

Изображению, которое окажется главным элементом первого экрана и кандидатом LCP, откладывание запроса может навредить.

Пример для статьи#

Первое важное изображение загружается обычным способом, иллюстрации далеко ниже — с loading="lazy". Ширина и высота заданы, чтобы браузер зарезервировал место.

Это отправная точка, а не правило по номеру картинки. На другом экране расположение и главный элемент могут отличаться.

Проверьте реальные запросы#

  1. Откройте Network с холодным кешем.
  2. Определите, какое изображение находится на первом экране.
  3. Проверьте момент начала его запроса.
  4. Прокрутите страницу и убедитесь, что отложенные изображения загружаются.
  5. Сравните LCP и смещения после изменения.

Не объявляйте улучшение по уменьшению числа начальных запросов без измерения опыта. Продолжение — диагностика LCP.

Источники#

Проверены 23 октября 2026 г.. Официальные рекомендации отделены от наших примеров и результатов проверки.

Продолжить разбор