Безопасное внедрение

Откладывайте только то, что находится ниже первого экрана

Самый простой путь — отправить задачу разработчику или поддержке CMS. Попросите не применять Lazy Load к LCP, логотипу и изображениям, которые видны сразу после открытия страницы.

Резервная копия, выбор изображений ниже первого экрана, настройка Lazy Load и проверка на телефоне и компьютере
Сначала резервная копия и исключения первого экрана, затем настройка и проверка.

Готовое сообщение исполнителю

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

Порядок работы

  1. Откройте страницу на мобильной ширине и отметьте изображения, видимые без прокрутки.
  2. Определите LCP: его нельзя помечать loading="lazy".
  3. Найдите повторяющийся шаблон карточек, галереи или списка ниже первого экрана.
  4. Для обычных img добавьте нативный атрибут loading="lazy".
  5. Если изображение создаётся скриптом или используется как фон, примените проверенное решение CMS либо компактный Intersection Observer.
  6. Очистите только нужный кэш и повторите проверку до и после прокрутки.
  7. Проверьте динамические вкладки, слайдеры, фильтры и мобильную версию.

Техническая памятка

Обычное изображение ниже экрана

<img src="/images/product.jpg"
     width="800" height="600"
     loading="lazy"
     decoding="async"
     alt="Описание изображения">

Главное изображение страницы

<img src="/images/hero.jpg"
     width="1200" height="800"
     loading="eager"
     fetchpriority="high"
     alt="Главное изображение">

Не заменяйте настоящий адрес пустой картинкой без необходимости

Старые решения с data-src требуют JavaScript и резервного варианта. Нативный атрибут проще и безопаснее, если сайт и целевые браузеры его поддерживают.

Откат и проверка

  • Если изображения появляются слишком поздно, проверьте расстояние до области просмотра и работу скрипта.
  • Если пропал LCP или ухудшилась его скорость, снимите Lazy Load с первого экрана.
  • Если контент не виден без JavaScript, восстановите исходный src или добавьте корректный резервный вывод.
  • После исправления выполните независимую проверку запросов.

Сжатие, форматы, изменение размеров, srcset, ALT и исправление CLS не входят в эту настройку.