Решите, что нужно сейчас, а не что появляется раньше в разметке
Ленивая загрузка помечает ресурс как некритичный до тех пор, пока он не потребуется. Классифицируйте по реальному пути пользователя: обязательное для первого экрана, медиа ниже сгиба, необязательные встроенные виджеты и код для последующего маршрута или панели. Позиция в CMS недостаточна как доказательство; изображение может быть офскрин в одном шаблоне и центральным в другом.
Проверьте холодную загрузку на небольшом телефоне и на типичном десктопе. Также протестируйте переходы из кампаний и якорные ссылки, которые могут посадить посетителя ниже по странице. Это тестирование подскажет, что должно быть готово без запросов, триггерящихся скроллом.
Задача первого экрана, видимая навигация, ключевой текст и первое значимое визуальное представление должны быть доступны немедленно.
Галереи ниже сгиба, карты, социальные виджеты, офскрин-плееры и код для невыредленных функций — типичные кандидаты.
Защитите хиро-блок и начальную область видимости
Не откладывайте контент, который, вероятно, будет виден при открытии страницы. Google предупреждает об этом, а обзор на web.dev показывает, что ленивое загрузка изображений в начальной области видимости может задерживать LCP. Элемент LCP может быть хиро-блоком, изображением товара, постером или текстом; проверяйте это для каждого важного шаблона, а не делайте догадки.
Загружайте подтверждённое изображение LCP заранее (eager). Если тесты показывают, что критическое изображение теряет сетевое внимание, протестируйте подсказку fetch-priority для него. Это подсказка, а не команда. Критическое фон‑изображение, подключаемое через CSS, может потребовать раннего preload, поскольку парсер не всегда обнаруживает его напрямую; измерьте такой кейс.
Проверьте настройки CMS и плагины на предмет featured images, ошибочно помеченных как lazy на страницах списков.
Используйте холодные загрузки на мобильных и десктопных устройствах, а не только предпросмотр дизайна на рабочем столе.
Резервируйте место до прихода медиа
Cumulative Layout Shift (CLS) — это неожиданное смещение видимого контента. Откладываемое изображение без известной высоты может вытеснить текст и контролы после того, как пользователь начал чтение или потянулся к кнопке. Это риск взаимодействия, а не только проблема метрики.
Указывайте точные атрибуты width и height для изображений и видео или резервируйте форму с помощью CSS-свойства aspect-ratio. Используйте плейсхолдер с финальной «отпечатком» компонента. Для фрейма третьей стороны зарезервируйте его высоту и покажите понятное состояние загрузки или недоступности.
Храните размеры медиа вместе с активом там, где это возможно; универсальное соотношение сторон ненадёжно для смешанных форм изображений.
Прокрутите страницу, примените фильтр, откройте панели, поверните мобильное устройство и используйте навигацию «назад», чтобы выявить поздние сдвиги.
Сделайте контент обнаружимым и взаимодействия понятными
Google Search Central говорит, что Google не взаимодействует со страницами путём прокрутки или кликов. Важно, чтобы лениво загружаемый контент подгружался при появлении в видимой области, а рендеренный HTML раскрывал ожидаемый контент или URL медиа. Проверьте представительные страницы в Search Console после внедрения.
Индексируемый бесконечный список нуждается в постраничном маршруте (paginated route) для каждой стабильной порции: постоянный уникальный URL, стабильный контент на этом URL и ссылки по последовательности. Это также создаёт доступное место, куда можно вернуться и которым можно поделиться.
Когда действие раскрывает контент, сохраняйте управляющий элемент доступным с клавиатуры и делайте результат понятным. Для значимого динамического обновления без смены фокуса, например «результаты загружены», откройте статус программно, чтобы вспомогательные технологии могли озвучить его без перемещения фокуса.
Информация о товаре, тело статьи, требования к праву на обслуживание и инструкции по задаче не должны появляться только после действия посетителя.
Не откладывайте необходимые элементы оформления заказа или аутентификации. Привлеките квалифицированных экспертов по безопасности и соответствию для оценки изменений в платежах, идентификации и скриптах третьих сторон.
Используйте наименее хрупкий механизм
Для обычных офскрин-изображений и iframe встроенная в браузер ленивaя загрузка обычно является самым простым стартом. Браузер решает, когда начать запрос для близких к области видимости ресурсов; это расстояние не гарантированно. Событие window.load может сработать, пока ленивые ресурсы остаются незавершёнными.
Используйте Intersection Observer, когда именованный компонент требует кастомной активации, например монтирования тяжёлой панели незадолго до её появления. Держите наблюдатель узким и начинайте работу достаточно рано для быстрого скролла. Разделяйте код (code splitting) для неинициальных маршрутов или опциональных функций, не превращая это в причину откладывать текущую задачу.
Не заменяйте простой источник данными в атрибутах, несколькими скриптами и библиотекой, если добавленное поведение не решает протестированную задачу.
У опционального встраиваемого блока должен быть понятный запасной вариант или состояние отсутствия, а не постоянный спиннер.
Измеряйте, выпускайте и устраняйте вместе
Сравнивайте базовую версию и кандидат на тех же URL, в одинаковом состоянии кэша, с тем же viewport и по тому же пути пользователя. Используйте холодное, ограниченное мобильное тестирование плюс проверки на реальных устройствах, где возможно. Фиксируйте LCP, видимую последовательность, сдвиги макета, ошибки медиа, рендеренный HTML и ключевые действия. Полевая телеметрия дополняет лабораторные тесты.
Выпускайте обратимое, ограниченное шаблоном изменение. Запишите активы, переведённые с eager на deferred, ссылку на деплой, действие по кэшу, владельца и первый шаг отката. Если LCP стал ленивым или путь конверсии стал неполным, уберите правило для этого критического ресурса и проверьте снова. Повторно проверьте после изменений темы, CMS, сервиса изображений, тегов или интеграций.
Сосредоточьтесь на предотвращении и исправлении сломанного опыта, а не только на отчёте о текущем состоянии или алёртах.
Отменяйте настройку для затронутого шаблона прежде, чем перенастраивать поведение всех изображений на сайте.