Lazy loading — отложенная загрузка
Lazy loading — загрузка ресурса не сразу при открытии страницы, а ближе к моменту, когда он понадобится. Для изображений браузер может использовать атрибут loading="lazy". Это позволяет не загружать заранее всю длинную галерею.
Также встречается: Lazy loading — отложенная загрузка.
Для чего используется
Отложенная загрузка помогает уменьшить первоначальные запросы длинной страницы. Но цель — быстрее показать нужное человеку содержание, а не просто сократить число файлов в первом отчёте. Доступность картинок и качество первого экрана проверяют отдельно.
Как SEO-специалист использует это в проекте
SEO-специалист проверяет, доступны ли адреса изображений в HTML или после отрисовки, а разработчик выбирает способ загрузки. В проекте отдельно рассматривают первый экран, галереи, видео и блоки ниже страницы: одинаковая настройка для всех картинок часто не подходит.
- Разделите изображения первого экрана и нижних блоков, определите главный ресурс.
- Настройте отложенную загрузку и место под картинки, сохранив доступные адреса.
- Проверьте холодную загрузку, прокрутку, выбранные файлы и сдвиги в браузере.
Практический пример
У категории 40 карточек. Главный баннер и видимые изображения загружаются сразу, нижние — по мере приближения к экрану. В Network проверяют, что нижние фотографии не скачиваются все одновременно, а при прокрутке появляются без прыжков текста.
Иллюстрация подхода, не данные конкретного проекта.Ошибки и риски
Главное изображение первого экрана обычно не стоит откладывать. У отложенных картинок важно резервировать место, иначе при появлении они сдвинут текст. Добавление атрибута не подтверждает, что все ресурсы действительно стали загружаться позже.
Добавлять lazy ко всем изображениям; хранить адрес только в нестандартном атрибуте без работающего обработчика; не резервировать размеры; проверять лишь тёплый кеш.
Как проверить результат
Откройте страницу с отключённым кешем, наблюдайте запросы до и после прокрутки. Сверьте исходный и отрисованный HTML. Отчёт аудита изображений помогает найти кандидатов, но выполнение скриптов и положение на экране проверяются в браузере.
Связанные термины
Продолжить по теме
- Инструкция: Изображения и загрузка страницы
- Практика: Бесплатный инструмент
- Внедрение: Обсудить состав работ