Ленивая загрузка откладывает некритичный ресурс до момента, когда он понадобится. Это снижает объём работы при первой загрузке, но отложенный контент должен оставаться находимым, пригодным к использованию и доступным для краулеров.
Выберите, что может подождать
Ленивая загрузка подходит для контента далеко под первым экраном: изображений в нижней галерее, встроенных элементов или миниатюр в длинных списках. Плохой выбор по умолчанию — главное изображение, фото товара, которое покупателю нужно сразу, самый крупный элемент контента (LCP) или компонент, необходимый для навигации с клавиатуры. Откладывание ресурса над сгибом может задержать тот момент, когда страница становится полезной.
Составьте список того, что попадает в первый экран на типичной мобильной и десктопной ширине. Определите вероятного кандидата на LCP до того, как добавите атрибуты загрузки. Задайте явные width и height или эквивалентное зарезервированное соотношение сторон, чтобы изображения, появляясь, не сдвигали текст.
Используйте надёжную разметку
Для обычных изображений часто хватает нативного loading="lazy" браузера. Сохраняйте осмысленный alt у информативных медиа, пустой alt — только у декоративных, и реальный источник изображения, который доступен без скрипта, запускаемого прокруткой. Для адаптивных изображений задайте подходящие srcset и sizes, чтобы браузер по умолчанию не загружал избыточно крупный ресурс.
Не выносите ключевые ссылки, заголовки или данные о товаре только внутрь клиентского ленивого компонента. Краулер и пользователь, у которых скрипт не выполнился, всё равно должны находить основной контент страницы. Intersection Observer полезен для специальных виджетов, но добавляет точки отказа, которых нативная разметка избегает.
Проверьте границу области просмотра
Проверьте страницу с замедленной мобильной сетью и при обычной загрузке в браузере. Смотрите, начинает ли основное изображение загружаться быстро, откладывается ли медиа ниже сгиба и появляется ли каждый ресурс при прокрутке без пустых заглушек и сдвигов макета. Изучите DOM и водопад запросов в сети: изображение с атрибутом lazy, которое всё равно грузится сразу, возможно, находится близко к области просмотра; изображение, загруженное слишком поздно, могло быть отложено слишком агрессивно.
Если диаграмма в статье стоит после введения, ленивая загрузка может быть разумна, при условии что она не является элементом LCP и её размеры зарезервированы. На странице товара основное фото обычно плохой кандидат: оно центральное для первого решения покупателя.
Ограничения и проверка
Меньшее число запросов при первой загрузке само по себе не доказывает, что страница стала быстрее или лучше. Измеряйте отдельно ответ документа, LCP, стабильность макета и взаимодействие. После изменений шаблонов заново проверяйте HTML после рендеринга и выборку из сканирования, чтобы отложенные медиа сохраняли нужный alt, контекст канонической страницы и внутренние ссылки.