Lazy loading картинок: когда отложенная загрузка мешает первому экрану

Почему главная обложка загружается поздно

Мини-кейс: на десктопе фотография команды находится ниже текста, а на телефоне становится первым крупным блоком. Единая настройка loading="lazy" для всех устройств задерживает ее именно на мобильной версии. Сравните сетевой waterfall и фактический LCP-элемент на нескольких экранах. Не переносите приоритет на каждую картинку верхней части страницы: одновременные высокоприоритетные запросы снова будут конкурировать. Для галереи проверьте случай прямого перехода по якорю внизу: отложенное изображение должно загрузиться без дополнительного действия пользователя.

Для обложки страницы услуги сначала определите, является ли она LCP на типовом телефоне. Если да, задержка обнаружения ресурса важнее общей экономии байтов от lazy. При этом десятая фотография кейса не должна конкурировать с обложкой за сеть. Укажите реальные размеры или aspect-ratio, иначе поздняя загрузка может сдвинуть форму и увеличить CLS. Итог проверяйте одновременно по сетевому графику и визуальному чтению страницы.

Разделите картинки по положению на экране

Разметьте изображения по положению на типовых экранах: первый экран, рядом с границей и далеко ниже. Замерьте LCP-элемент и сетевой график в мобильном профиле.

Посмотрите реальные атрибуты img, src/srcset и поведение при отключенном JavaScript. Если адрес файла появляется только после прокрутки в нестандартном скрипте, робот может не увидеть важный контент.

Проверьте src и сетевой старт LCP

Нативная отложенная загрузка полезна прежде всего для изображений вне первого экрана. Для изображения, которое может стать LCP, она способна задержать начало загрузки; решение проверяйте измерением.

Назначьте lazy только поздним изображениям

Главную обложку загружайте рано и оставляйте ее адрес доступным в HTML. Изображения далеко ниже экрана можно отложить. Не превращайте правило в механическую настройку для всех img.

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

Пометьте изображения, которые могут оказаться в первом экране на телефоне и на широком мониторе. Для них не включайте механически loading="lazy". Изображения далеко ниже основного содержания можно откладывать, если они все равно появляются при обычной прокрутке.

Сохраните размеры и доступный HTML

Задайте размеры для резерва места и подходящий srcset. Когда пользуетесь компонентом изображений, проверьте итоговый HTML, а не только prop в исходном коде.

Замерьте первый экран и нижнюю галерею

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

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

Проверка результата

• Намерение страницы определено
• Сохранена выборка URL до исправления
• HTTP-ответ и содержимое сверены
• Внутренние ссылки проверены
• Исключения учтены
• Проверка после релиза записана

Скачать таблицу примера

Вопросы по теме

Читайте также