Ленивая загрузка ускоряет страницу — но может задержать главную картинку

9 июля 2021 г. в 15:00|Обновлено: 12 августа 2026 г. в 01:14|Автор: Редакция QUASA|5 мин чтения| 2932

Ленивую загрузку изображений сегодня обычно не нужно собирать из отдельного сценария: браузеры умеют откладывать запрос штатными средствами, а WordPress автоматически добавляет необходимые параметры разметки. При этом главное ограничение не исчезло: крупную картинку на первом экране не следует загружать с задержкой, иначе ускорение нижней части страницы может ухудшить показ её основного содержимого.

Практический принцип прост: изображения, которые посетитель видит сразу, загружаются обычным способом, а расположенные ниже получают отложенный режим. Это сокращает первоначальное число запросов и позволяет не передавать часть файлов, если пользователь до них не прокрутит.

Что именно делает ленивая загрузка

Ленивая загрузка разрешает браузеру отложить получение изображения, пока оно не понадобится для ближайшей к экрану части страницы. Запрос обычно начинается заранее, до фактического появления картинки в видимой области, чтобы посетитель не столкнулся с пустым местом во время прокрутки.

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

Действующий стандарт разметки предусматривает отложенный и немедленный режимы получения изображений. Если разработчик не задал режим явно, браузер следует обычному поведению загрузки.

Этот механизм не сжимает фотографию и не меняет её формат. Он лишь переносит запрос на более поздний этап или полностью исключает его, когда посетитель не доходит до соответствующего участка страницы. Поэтому подготовка файлов подходящего размера остаётся отдельной задачей.

Как включить отложенный режим в разметке

Для картинки ниже первого экрана достаточно сохранить настоящий адрес файла и добавить к элементу изображения атрибут с отложенным значением. Минимальный условный пример выглядит так: <img src="photo.jpg" loading="lazy" width="800" height="600" alt="Описание фотографии">.

Настоящий адрес должен оставаться в стандартном поле разметки. Переносить его во вспомогательное поле, а затем подставлять собственным сценарием для обычных изображений больше не требуется: такая схема добавляет зависимость от дополнительного кода и усложняет обработку страницы.

Если сайт предлагает несколько размеров или форматов одной фотографии, отложенный режим указывают у вложенного элемента изображения. Браузер по-прежнему выбирает подходящий файл из доступного набора, поэтому ленивая загрузка совместима с адаптивными картинками, но не заменяет их.

Ширину и высоту изображения лучше задавать явно. Браузер сможет заранее зарезервировать область с нужными пропорциями, и текст не сдвинется после появления файла. Значения должны описывать соотношение сторон исходной картинки; отображаемый размер при этом можно изменять правилами оформления страницы.

Какие изображения нельзя откладывать

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

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

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

Отложенная загрузка также не компенсирует избыточный размер файла. Если мобильному экрану передаётся фотография, рассчитанная на значительно более широкую область, лишние данные всё равно придётся скачать — только позднее. Размеры, формат, степень сжатия и набор адаптивных вариантов следует настраивать независимо.

Что уже делает WordPress

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

Официальная документация WordPress описывает автоматический выбор отложенной загрузки, повышенного приоритета и асинхронной обработки с учётом положения изображения. Один элемент не должен одновременно получать отложенный режим и повышенный приоритет.

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

Два механизма ленивой загрузки на одной странице способны конфликтовать. Они могут повторно менять адрес файла, добавлять несовместимые параметры или подключать несколько наблюдателей за прокруткой. Если задерживается только обложка, безопаснее исключить её из отложенного режима в том компоненте, который создаёт разметку, а не отключать оптимизацию для всех картинок.

Когда всё же нужен собственный сценарий

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

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

В такой реализации следует предусмотреть повторное открытие блока и отказ дополнительного кода. Содержательная иллюстрация не должна навсегда оставаться пустой из-за ошибки сценария. Для неё также сохраняют альтернативное описание и доступный способ получить файл.

Фоновую картинку из правил оформления нельзя отложить атрибутом элемента изображения. Если она передаёт смысл, а не служит украшением, лучше использовать обычный элемент: он позволяет задать альтернативный текст, размеры и адаптивные варианты файла.

Как проверить результат

Проверку проводят на итоговой странице со всеми включёнными модулями. В средствах разработчика откройте список сетевых запросов, отключите кеш для проверки и перезагрузите страницу: верхние изображения должны запрашиваться сразу, а удалённые — при приближении к ним.

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

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