Lazy Load Images 2026: Ускорение страниц без ущерба для LCP

Последнее обновление: June 28, 2026

Ленивая загрузка помогает страницам с большим количеством изображений казаться быстрее, потому что браузер может пропускать запросы изображений ниже области просмотра во время первого рендеринга. Если использовать ее неосторожно, она также может задержать изображение, которое пользователям нужно немедленно: главное фото (hero), основное фото продукта или обложку статьи, которое становится элементом Largest Contentful Paint.

В этом руководстве показано, где использовать нативный loading="lazy", где следует оставить изображения активными, и как публиковать лениво загруженные изображения, не нарушая Core Web Vitals, SEO или доставку через CDN.

Краткий ответ: как следует выполнять ленивую загрузку изображений?

Используйте ленивую загрузку только для изображений, которые начинаются за пределами первого области просмотра. Оставьте изображение, вероятно являющееся LCP, "жадным" (eager), зарезервируйте ширину и высоту для каждого изображения и подавайте адаптивные WebP или AVIF файлы с кешируемого CDN URL.

Для чистого HTML самая простая реализация — это loading="lazy" на элементах <img> ниже области просмотра. Не добавляйте его к изображению-герою, основному изображению продукта, первому видимому изображению статьи или любому изображению, которое должно появиться до того, как пользователь прокрутит страницу.

Когда сомневаетесь, протестируйте страницу в Lighthouse или Chrome DevTools. Если ленивое изображение сообщается как элемент LCP, удалите ленивую загрузку с этого изображения и рассмотрите возможность использования fetchpriority="high".

Что на самом деле меняет ленивая загрузка?

Ленивая загрузка меняет тайминг запросов. Браузер может подождать с загрузкой изображения, пока пользователь не приблизится к нему достаточно, чтобы увидеть его. Это экономит пропускную способность на длинных страницах, снижает первоначальную нагрузку на запросы и дает CSS, шрифтам, скриптам и видимому изображению больше шансов завершиться первыми.

Это не уменьшает слишком большие изображения. JPEG размером 2400 px по-прежнему будет избыточным после окончательной загрузки. Сочетайте ленивую загрузку с изменением размера, сжатием и адаптивной разметкой с самого начала. В Image Compression Deep Dive рассматривается сокращение байтов, а в Mobile Image Optimization Guide — srcset и размеры отображения на мобильных устройствах.

Нативная функция браузера задокументирована MDN как свойство loading для изображений и iframes в HTMLImageElement.loading. Для современных сайтов предпочтительнее использовать эту функцию браузера, прежде чем добавлять библиотеку JavaScript для ленивой загрузки.

Какие изображения не следует загружать лениво?

Не следует использовать lazy loading для изображений, которые формируют первое впечатление о странице. Распространенная ошибка — это применение loading="lazy" ко всем изображениям в шаблоне CMS, поскольку это выглядит как универсальное исправление производительности.

Эти изображения следует держать "жадными" (eager):

1. Главное героическое изображение (hero image).
2. Изображение продукта над кнопкой покупки.
3. Первое изображение в статье, когда оно появляется в верхней части на мобильных устройствах.
4. Логотип или скриншот интерфейса, который должен быть виден до взаимодействия.
5. Любое изображение, которое Chrome сообщает как элемент LCP.

Руководство Google по Core Web Vitals рассматривает LCP как время рендеринга самого крупного видимого элемента контента в области просмотра; см. Largest Contentful Paint. Когда этот элемент является изображением, отсрочка его запроса — один из самых быстрых способов ухудшить метрику.

Используйте это правило для шаблонов: первый слот изображения должен по умолчанию быть eager, а более поздние повторяющиеся блоки изображений должны по умолчанию быть lazy. Затем переопределяйте в зависимости от типа страницы, если скриншоты мобильных устройств показывают другой первый viewport.

Как реализовать ленивую загрузку в HTML?

Сначала используйте нативный синтаксис:

<img
  src="/images/gallery-chair.webp"
  alt="Ореховое кресло, сфотографированное спереди для галереи товаров"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>

Атрибуты width и height важны не меньше, чем loading. Они позволяют браузеру зарезервировать пространство макета до того, как файл прибудет. Без зарезервированного пространства отложенное изображение может сдвинуть текст вниз по странице и вызвать Cumulative Layout Shift.

Для адаптивных изображений сохраните ленивую загрузку для резервного <img>:

<picture>
  <source type="image/avif" srcset="/images/gallery-chair-800.avif 800w, /images/gallery-chair-1200.avif 1200w">
  <source type="image/webp" srcset="/images/gallery-chair-800.webp 800w, /images/gallery-chair-1200.webp 1200w">
  <img
    src="/images/gallery-chair-1200.webp"
    alt="Ореховое кресло, сфотографированное спереди для галереи товаров"
    width="1200"
    height="800"
    sizes="(max-width: 700px) 92vw, 680px"
    loading="lazy"
  >
</picture>

Для изображения, которое, вероятно, будет LCP, используйте противоположный шаблон:

<img
  src="/images/product-hero.webp"
  alt="Ореховое кресло с зелеными подушками на белом студийном фоне"
  width="1600"
  height="1000"
  fetchpriority="high"
>

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

Как ленивая загрузка влияет на SEO?

Ленивая загрузка безопасна для SEO, когда важный контент остается обнаруживаемым на отрендеренной странице. Google может обрабатывать современный JavaScript, но SEO изображений ослабевает, когда окончательный URL изображения скрыт за взаимодействием, скриптом, работающим только при прокрутке, cookies или неработающим плейсхолдером.

Используйте обычную разметку <img> или <picture> для изображений контента. Сохраняйте описательный текст alt, сканируемые URL CDN и окружающий текст, который объясняет изображение. В Image SEO Guide 2026 изложен более широкий рабочий процесс для сканирования и alt-текста.

Руководство Google Search Central по JavaScript SEO для ленивой загрузки гласит, что контент должен загружаться при видимости в области просмотра (viewport) и не должен зависеть от действий пользователя, таких как нажатие или ввод; см. Fix lazy-loaded content. Это полезное ограничение для галерей изображений, вкладок и страниц с бесконечной прокруткой.

Сколько производительности может сэкономить ленивая загрузка?

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

Я закодировал четыре графика в этой статье как локальные WebP-файлы в размере публикации. Итоговые ресурсы составляют от 25 KB до 36 KB каждый, поэтому здесь ленивая загрузка не скрывает огромной проблемы байтов. Большая выгода исходит из тайминга запросов: обложка доступна немедленно, а более поздние диаграммы могут подождать, пока читатель прокрутит страницу.

Используйте этот порядок, прежде чем винить ленивую загрузку:

1. Измените размер исходного изображения до самой большой реальной области отображения.
2. Преобразуйте фотографии и смешанную графику в WebP или AVIF.
3. Добавьте srcset и sizes для мобильных макетов.
4. Зарезервируйте размеры изображений или соотношение сторон.
5. Держите изображение LCP готовым к загрузке (eager).
6. Лениво загружайте только изображения ниже области просмотра (below-fold images).
7. Публикуйте через CDN с долгоживущим кешированием.
8. Протестируйте страницу на узкой мобильной области просмотра.

Если вам нужна более широкая последовательность, Полный контрольный список оптимизации изображений — это хорошая финальная проверка перед публикацией. Для правил CDN и заголовков кеша используйте Руководство по Image CDN.

Что следует протестировать перед публикацией?

Тестируйте отрендеженную страницу, а не только код. Пороги браузеров для нативной ленивой загрузки являются деталями реализации, и страница, которая работает на десктопе, все равно может задержать неправильное изображение в мобильном окне просмотра шириной 390 px.

Выполните проверку публикации:

• Обложка или главное изображение загружаются немедленно.
• Вероятное изображение LCP не помечено как loading="lazy".
• Каждое изображение имеет width и height или стабильный контейнер соотношения сторон.
• Изображения ниже сгиба используют loading="lazy".
• Адаптивные изображения включают реалистичные значения sizes.
• URL-адреса изображений CDN возвращают HTTP 200.
• Имена файлов описывают видимое изображение.
• Alt текст конкретный и не перегружен ключевыми словами.
• Lighthouse или PageSpeed Insights не помечают ленивое изображение как LCP.
• Скриншот мобильного устройства не показывает больших пустых пробелов или скачков макета.

Для команд разработчиков добавьте правило шаблона: только повторяющиеся компоненты изображений в теле должны загружаться лениво по умолчанию. Компоненты "героя", основные медиапродукты и редакционные изображения выше сгиба должны требовать явного решения.

Чеклист ленивой загрузки на 2026 год

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

Перед запуском проверьте первый экран и задайте себе один практический вопрос: сохранит ли смысл страница, если каждое изображение ниже линии сгиба будет ждать прокрутки? Если да, то ленивая загрузка, вероятно, помогает. Если страница начинается с пустого блока героя, сначала исправьте приоритет, прежде чем трогать что-либо другое.