Как настроить отложенную загрузку изображений и не задержать главный снимок
Loading lazy откладывает загрузку изображений вне видимой области. Оставьте главный снимок без задержки, задайте размеры и проверьте появление при прокрутке.
Что должно получиться
Далёкие изображения не мешают первоначальной загрузке страницы, а при приближении к ним появляются вовремя. Главная фотография, которую человек видит сразу, загружается обычным способом. Текст не прыгает после появления картинки, потому что место под неё подготовлено заранее.
Отложенная загрузка меняет момент получения файла. Она не уменьшает его размер, не выбирает подходящее разрешение и не исправляет неудачное кадрирование. Если фотография слишком тяжёлая, сначала подготовьте сам файл и нужные варианты изображения.
Из чего это складывается
| Часть | За что отвечает | Проверка |
|---|---|---|
| loading='lazy' | Откладывает получение далёкого изображения | Не назначено главному снимку |
| src | Задаёт обычный источник | Файл доступен без специальной подстановки |
| width и height | Помогают сохранить пропорцию и место | Соответствуют выбранному изображению |
| CSS | Определяет отображение в блоке | Не схлопывает область до появления файла |
| srcset и sizes | Помогают выбрать вариант файла | Настроены отдельно от момента загрузки |
| Проверка сети | Показывает начало получения ресурса | Учтён кеш браузера |
Какие изображения откладывать
Подход подходит для фотографий в длинном материале или карточек, которые находятся далеко ниже начала страницы. Смотрите на реальное расположение в нескольких размерах окна. Картинка, скрытая ниже первого экрана на телефоне, может быть видна сразу на широком мониторе.
Изображение первого экрана не стоит специально задерживать. Особенно внимательно проверьте крупную фотографию, определяющую восприятие загрузки страницы. Установка lazy на все картинки не подтверждает корректную настройку.
Как это сделать по шагам
- Выберите страницу с несколькими изображениями. Отметьте, какие из них видны сразу, а какие находятся дальше по содержимому.
- Проверьте обычные адреса файлов, пропорции и адаптивные варианты. Исправьте недоступные ресурсы до изменения способа загрузки.
- Добавьте loading='lazy' изображениям, которые подходят для отложенной загрузки. Не назначайте его главному снимку первого экрана.
- Укажите корректные width и height либо подготовьте подходящую область средствами CSS. Убедитесь, что место сохраняется до появления файла.
- Проверьте, не добавляет ли шаблон или расширение второй механизм через подмену адреса. Для простого случая оставьте одну понятную схему.
- Откройте страницу с учётом влияния кеша и наблюдайте загрузку ресурсов. Медленно прокрутите вниз, затем повторите быстрый переход к далёкому блоку.
- Сравните телефон и широкий экран. Убедитесь, что главный снимок не задержан, а остальные изображения появляются без заметных пустых провалов.
Пример для изображения в тексте
Учебная разметка: <img src='photo.webp' width='800' height='600' loading='lazy' alt='Общий вид рабочего стола'>. Имя файла и размеры здесь служат примером. В своём документе укажите существующий файл, его корректные размеры и описание по смыслу изображения.
Если CSS делает картинку гибкой, проверьте сочетание max-width: 100% и height: auto для обычного пропорционального показа. Атрибуты размеров помогают заранее понять соотношение сторон. Для отдельной фиксированной рамки и обрезки потребуется другая настройка, которую тоже нужно проверить до загрузки.
Почему картинка начинает загружаться заранее
Браузер не обязан ждать точного момента, когда край изображения окажется на экране. Он может начать получение на некотором расстоянии от видимой области, чтобы подготовить картинку к появлению. Расстояние и поведение зависят от реализации и условий. Не задавайте ожидание в виде одного обязательного числа пикселей для всех браузеров.
Обычная загрузка и приоритет
Значение eager означает обычное поведение без дополнительного откладывания через loading. Оно не обещает, что изображение получит наивысший приоритет. Управление приоритетом через fetchpriority — отдельная настройка, которую применяют к действительно важному ресурсу после проверки.
Назначение высокого приоритета картинке с lazy не отменяет откладывание её загрузки. Если цель — убрать задержку главного снимка, сначала проверьте само назначение lazy, а не пытайтесь компенсировать его другой подсказкой.
Частые ошибки
Оставлять область изображения без размера
До получения файла блок может занимать слишком мало места. Это меняет расположение следующих элементов и мешает оценить, что находится далеко от экрана. После загрузки страница сдвигается. Проверьте геометрию до появления картинок, а не только готовый вид.
Смешивать нативную загрузку с подстановкой адреса
Если настоящий адрес хранится только в data-атрибуте, браузер не получит его сам по наличию loading='lazy'. Сценарий должен отдельно подставить источник. Такая схема усложняет диагностику и может оставить пустые изображения при сбое JavaScript. Для обычного img используйте понятный рабочий src.
Судить по повторному открытию страницы
Файл может уже находиться в кеше, поэтому картинка появится почти сразу. Условия сравнения должны учитывать кеш и начальную позицию прокрутки. Иначе результат будет описывать повторный визит, а не первоначальную загрузку.
Как проверить
- Главное изображение первого экрана не имеет лишней задержки через lazy.
- Далёкие картинки начинают получаться при приближении к их области.
- Место под изображения видно и до их загрузки.
- При появлении фотографий текст и действия не перескакивают неожиданно.
- Резкий переход к нижнему разделу не оставляет постоянных пустых мест.
- Адреса изображений работают без скрытой зависимости от второго загрузчика.
- Проверка повторена при разных размерах окна и с понятными условиями кеша.
Для подготовки файлов используйте инструкцию про адаптивные изображения, а результат оцените через проверку скорости страницы и проверку галереи. Помощь с шаблоном доступна в разделе «Разработка».
Вопросы и ответы
Можно ли назначить lazy всем изображениям?
Не стоит делать это автоматически. Сначала выделите изображения первого экрана и проверьте, не задерживает ли настройка важный снимок.
Lazy уменьшает размер фотографии?
Нет. Для уменьшения объёма нужны подготовка файла и подходящие варианты разрешения. Атрибут меняет момент загрузки.
Почему загружается картинка, которую ещё не видно?
Браузер может начать получение заранее, при приближении к видимой области. Это помогает подготовить ресурс к прокрутке.
Нужен ли отдельный JavaScript-загрузчик?
Для нативного loading у обычного img отдельная библиотека не требуется. Специальную схему добавляют только при самостоятельной необходимости.
Почему после загрузки сдвигается текст?
Проверьте заранее выделенное место, пропорции и CSS. Если изображение до загрузки не имеет нужной геометрии, следующие блоки могут поменять положение.
Высокий fetchpriority отменяет lazy?
Нет. Приоритет не заменяет решение о том, откладывать ли получение. Для главного снимка сначала уберите ненужное откладывание.