Как сделать lazy loading. Оптимизация скорости загрузки страниц. Готовые решения для улучшения поведенческих факторов / Skillbox Media

Содержание:

• Что такое lazy loading
• Как реализовать механизм lazy loading

Дмитрий Миронов

эксперт

об авторе

SEO-специалист компании Adindex.ua

Ссылки

Исследование Google показало, что при увеличении скорости загрузки страницы с 1 до 3 секунд вероятность, что пользователь уйдёт сразу, возрастает на 32%, а с 1 до 5 секунд — на 90%. Кстати, среднее время полной загрузки страниц составляет около 15 секунд. Это слишком медленно, ведь 53% пользователей покидают страницу, загрузка которой занимает более трёх секунд. К счастью, это наш шанс выделиться среди конкурентов.

Что такое lazy loading

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

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

Как реализовать механизм lazy loading

Есть несколько методов, как реализовать отложенную загрузку согласно рекомендациям Google.

Обработчик событий (например, scroll или resize)

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

API-интерфейс обозревателя пересечений

Он проще в использовании и чтении, чем код с обработчиками событий. Разработчикам нужно всего лишь зарегистрировать его для наблюдения за элементами, а не писать код обнаружения их видимости. Недостаток — поддерживается не во всех браузерах. Не поддерживают или поддерживают только некоторые функции API Chrome ver. 4-57, Mozilla Firefox ver. 2-54, все версии IE, Safari ver. 3.1-11.1, Microsoft Edge ver. 12-15, Opera ver. 10.1-44.

Отсрочка загрузки изображений в CSS

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

Готовые решения

Если не хотите заморачиваться технической реализации функции «ленивой» загрузки, есть множество готовых библиотек. Многие библиотеки используют шаблон разметки, аналогичный тем, которые описаны выше. Среди готовых решений выделю lazysizes, lozad.js, Blazy, yall.js.