Lazy load: как настроить ленивую загрузку изображений или контента

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

Lazy Loading — это особый способ подгрузки элементов веб-страницы, который позволяет экономить ресурсы браузера и устройства пользователя. Благодаря отложенной загрузке значительно повышается скорость открытия страниц, что положительно сказывается на удобстве использования сайта и общем пользовательском опыте.

Для чего нужен Lazy Loading?

Lazy Loading (ленивая загрузка) — это приоритетный рендеринг только тех элементов, которые действительно необходимы пользователю в момент первоначальной загрузки страницы. Все остальные элементы подгружаются позже — по мере прокрутки, клика или наступления определённых условий. Такой подход сокращает длительность критических этапов рендеринга и заметно ускоряет загрузку всего сайта или веб-приложения.

Чаще всего отложенная загрузка применяется при прокрутке страниц или при переходе по навигационным элементам.

Актуальность этой технологии объясняется тем, что средний объём ресурсов, передаваемых браузеру, за последние годы увеличился почти в 9 раз. Соответственно, без оптимизации современные сайты стали загружаться существенно медленнее.

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

Виды Lazy Loading

Существует три основных способа отображения данных при использовании ленивой загрузки:

1. По скроллингу
2. По клику
3. В фоновом режиме

По скроллингу

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

По клику

С этим вариантом сталкивался практически каждый пользователь: после прокрутки списка товаров появляется кнопка «Показать ещё», при нажатии на которую загружается следующая партия элементов. Аналогично работает и загрузка изображений: вместо тяжёлой картинки сразу показывается её миниатюра, а оригинал подгружается только после клика.

В фоновом режиме

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

Перед внедрением данного решения рекомендуется провести A/B-тестирование на разных страницах, чтобы оценить его влияние на поведение пользователей.

Как поисковые системы относятся к отложенной загрузке?

Основная сложность Lazy Loading для поисковых систем заключается в индексации изображений. Теоретически внедрение отложенной загрузки может повысить оценку ресурса по показателям скорости. Однако многие плагины добавляют в атрибут src временную заглушку — файл вида placeholder.svg.

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

В отдельных случаях атрибут src вообще не добавляется, что приводит к полной потере изображений при индексации.

Чтобы избежать подобных проблем, необходимо использовать специальные плагины, которые корректно реализуют Lazy Load с точки зрения SEO. Пример такого решения — True Image & Lazy Load.

Как работает Lazy Loading?

Чаще всего ленивая загрузка применяется именно к изображениям, поскольку они являются самой «тяжёлой» частью страницы (если не учитывать видео). Большое количество картинок существенно замедляет не только загрузку сайта, но и работу уже открытой страницы, особенно на слабых устройствах с ограниченной оперативной памятью.

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

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

Как это работает в Chrome

В браузере Google Chrome реализована встроенная поддержка ленивой загрузки на уровне самого браузера. Это позволяет ускорять сайты даже в том случае, если разработчики не предусмотрели Lazy Load на стороне кода.

В Chrome предусмотрена отложенная загрузка для:

1. Изображений
2. Фреймов

Для управления этими функциями используются специальные флаги:

1. chrome://flags/#enable-lazy-image-loading — для изображений
2. chrome://flags/#enable-lazy-frame-loading — для фреймов

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

Способы реализации ленивой загрузки

Существует несколько подходов к внедрению Lazy Loading. Выбор зависит от типа контента и особенностей проекта.

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

Существует два основных типа разделения кода:

1. По точкам входа
2. Динамическое разделение

Lazy Load для изображений

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

Скрипт от David Walsh

Один из популярных вариантов — замена атрибута src на data-src:

<img data-src="image.jpg" alt="test image">

Элементы скрываются через CSS и плавно появляются после загрузки:

img {
  opacity: 1;
  transition: opacity 0.3s;
}

img[data-src] {
  opacity: 0;
}

Скрипт на JavaScript переносит значения из data-src в src, после чего атрибут удаляется.

Скрипт на событиях

В этом случае загрузка контента происходит после наступления заданного события — например, спустя определённое время после открытия страницы.

Однако сегодня наиболее оптимальным вариантом считается использование атрибута loading=”lazy”, встроенного в HTML5.

Intersection Observer API

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

Эффект размытого изображения

Сначала пользователю показывается размытая версия картинки, а затем — её чёткий вариант в высоком качестве. Такой подход создаёт эффект мгновенной загрузки.

Lazy Load для контента

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

Как настроить время отложенной загрузки?

Для управления временем загрузки используются стандартные методы JavaScript — setTimeout и setInterval.

Метод setTimeout позволяет выполнить функцию один раз через заданный промежуток времени:

let timerId = setTimeout(func, delay);

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

Плагины для настройки Lazy Loading

Для пользователей популярных CMS разработаны специальные плагины, позволяющие внедрить ленивую загрузку без написания кода. В WordPress особенно популярны следующие решения:

1. Lazy Load
2. BJ Lazy Load
3. Lazy Load by WP Rocket
4. Unveil Lazy Load
5. True Image & Lazy Load

Рекомендации по реализации Lazy Loading

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

Какие проблемы могут возникнуть?

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

Итоги

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

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